Introduction où mettre du 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 changer la taille, le positionnement, le style et la couleur de chaque élément de vos pages comme les textes, images, etc.….

Somaire

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 XHTML



Il est possible de taper du CSS directement à l'intérieur même du fichier XHTML, entre les balises <head> </head>.
Vous devrez y ajouter une balise <style> </style> à l'intérieur, comme ceci :
Code XHTML

Sélectionner le code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <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">
		   /* Vous taperez votre code CSS ici */
	   </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 XHTML

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.



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


Pour appliquer une feuille de style CSS sur une page xHTML, 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 XHTML quel fichier CSS il doit charger :
Ouvrez notepad++ ou votre editeur et tapez le code suivant:

Code XHTML


Sélectionner le code

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <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'emplacement où vous déclarez le chemin de votre feuille de style sous forme de lien relatif. 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 bon .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