oujood.com

Introduction où mettre du CSS

Le CSS permet de changer la taille, la position, le style et la couleur des éléments de pages web. Les feuilles de style css ou stylesheet stocke des informations CSS
Le Langage CSS (Cascading Style Sheets ) est le format utilisé pour décrire la présentation de documents HTML.
Le CSS est un langage de présentation, permettant de créer un design sur chaque page du site web. Il permet par exemple de changer la taille, le positionnement, le style et la couleur de chaque élément de vos pages comme les textes, images, etc.….

Introduction où mettre du CSS

HTML & CSS

Le langage CSS (Cascading Style Sheets) est utilisé pour définir l'aspect futur de votre site, comme par exemple la couleur du fond de la page ou le type de police.
Plus concrètement, le CSS (ou feuille de style), c'est un petit fichier (exemple « style.css ») dans lequel vous allez définir l'aspect futur de votre site.

Dans ce cours sur le css vous aller apprendre comment colorer et mettre en forme vos textes, décorer une page web, dimensionner une image etc.…. Dans la partie précédente nous avons appris comment créer une page Web C'est vrais qu'elle est toujours moche sans couleur ni format, nous ne pouvons pas centrer les images ou les mettre où l'on veut etc.
Et c'est ce que nous allons faire dans ce cours .

Question : Où mettre le CSS dans une page web ?

On peut écrire le code CSS à 3 endroits différents, selon ce qu'on veut:


1. Dans l'en-tête du fichier HTML



Il est possible de taper du CSS directement à l'intérieur même du code de la page HTML, entre les balises <head> </head>.
Dans ce cas le style ne sera appliqué qu’aux éléments de la page dans laquelle vous avez ajouté le style.
Vous devrez y ajouter la balise <style> </style> à l'intérieur, comme ceci :
Code HTML

Sélectionner le code

<!DOCTYPE html >
<html>
   <head>
	   <title>Exemple le CSS dans le head</title>
	   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   
	   <style type="text/css">
		   /* C'est ici que vous taperez votre code CSS */
	   </style>
   </head>
   <body>
	   <p>Cette page comporte du CSS directement dans le header.</p>
   </body>
</html>
			
 

2. Dans les balises (non recommandée)


On ajoute un attribut style sur les balises pour leur appliquer un style particulier. N'importe quelle balise.
Par exemple sur un titre :

Code HTML

Sélectionner le code

	<h1 style="/* Votre style pour cette balise ici */">Titre</h1>
			
 

Avec cette méthode non seulement le CSS sera peu lisible à l'intérieur des balises, mais en plus ça ne nous permet pas de profiter de tous les avantages du CSS, comme la possibilité de changer la couleur de tous les titres du site en un coup. Je vous parle de cette méthode seulement pour en prendre connaissance.

Mais si ce css ne sera appliqué qu’à une seule Balise dans le site, il serait préférable d’utiliser cette méthode.



3. Dans un fichier CSS (la plus recommandé)


Pour appliquer une feuille de style CSS sur une page HTML, vous devez créer une balise <link> dans l'entête de votre code HTML entre <head> et </head> qui va permettre de "dire" au fichier HTML quel fichier CSS il doit charger :
Ouvrez notepad++ ou votre editeur et tapez le code suivant:

Code HTML


Sélectionner le code

 <!DOCTYPE html >
<html>
  <head>
	<title> Utilisation de CSS externe</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css"  title="fichier" href="fichier.css" />
  </head>
  <body>
	   <p>Cette page comporte une feuille de style externe. C'est la meilleure méthode à utiliser quand on fait du CSS.</p>
   </body>
</html>
			
 

La balise <link /> comporte plusieurs attributs. Vous pouvez en modifier deux d'entre eux pour le moment :
• title : c'est le nom de votre feuille de style (mettez ce que vous voulez)
• href : c'est l'URL qui indique l'emplacement où se trouve votre feuille de style. Dans cet exemple le CSS se trouve dans le même dossier que notre page html.
Jusqu'ici nous travaillons sur un seul fichier, le .html. A partir de ce moment nous allons travailler sur 2 fichiers : un .css et notre fichier .html.
Dans cette méthode le fichier css peut servir pour toutes les pages html de votre site ce qui allègera la taille des fichiers et rendra donc votre site plus rapide.

Par carabde 10 mars 2014

chapitre précédent     chapitre suivant


SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Balise video

Afficher une vidéo ou un film

écrire dans fichier en php

Manipulation de fichiers écriture

Détermine si l'argument peut être appelé comme fonction

 Détermine si l'argument peut être appelé comme fonction


Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer