Informations
.gif)
AccueilSanté
Divertissement
Dossiers : Langage de Site
Thèmes du Site :
Le langage CSS
Principe du CSS
Le langage CSS (ou feuilles de style en cascade) est le format utilisé pour décrire la présentation de documents HTML.
Le CSS est donc un langage de présentation, permettant de créer un vrai design sur chaque page de votre site. Vous pourrez par exemple changer la taille, le positionnement, le style et la couleur de chaque élément de vos pages comme les titres, images, etc.
Tout en étant complémentaire au language HTML, le CSS devient donc très vite indispensable si l'on veut réussir un design clair et personnalisé de ses pages web.
Pour ceux qui veulent créer leur propre site web sur Internet sans passer par des éditeurs de sites web, il est donc indispensable de connaître les bases du langage CSS.
Intégrer une page CSS dans un fichier HTML
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 de la façon suivante :
"link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="http://www.mon-site.fr/design-site.css""
Cette ligne vous permettra de dire : "Je veux que tu appliques à mon code HTML le style CSS que j'ai réalisé dans la page "design-site.css" de mon site."
Structuration du CSS
Une page CSS est composée de 3 éléments :
- Les noms de balises : On pourra ainsi modifier l'apparence des éléments contenus dans le code HTML comme le titre, paragraphe...
On peut également intégrer un ensemble d'éléments dans des balises universelles. - Les propriétés : Ce sonts les effets que l'on veut appliquer aux balises. Par exemple, si l'on veut changer la disposition d'un paragraphe on appliquera la propriété "text-align".
- Les valeurs : Elles indiquent la manière dont doit se comporter une propriété. En reprenant l'exemple, si l'on veut un texte centré, on mettra la valeur "center".
Au final, notre code CSS doit ressembler à ceci :
1 2 3 4 |
p { text-align: center; } |
Le CSS et les attributs id/class
L'intérêt d'avoir les attributs "id" et "class" est que l'on peut les placer sur n'importe quel balise.
Que ce soit sur des titres ou des images, ils permettent de donner à ces éléments un design personnalisé. Les valeurs que l'on donne à ces attributs, c'est-à-dire que l'on peut choisir celles qu'on veut. Cependant, il est important de bien les nommer car ces valeurs vont aussi nous servir comme point de repère dans notre feuille CSS.
Par exemple, si dans notre code HTML, on a :
<h1 class="titre">
On doit retrouver dans notre code CSS :
1 2 3 4 |
.titre { font-size: 15px; } |
Si l'on avait voulut utiliser l'attribut "id", on aurait mis un dièse "#" à la place d'un point "." dans notre code CSS.
Cependant, l'id a le souci de n'être utilisable qu'une fois. C'est pourquoi l'on préfèrera utiliser l'attribut "class" qui peut s'utiliser dans tous les cas.
Le Langage CSS et les balises universelles
L'avantage avec les balises universelles est que, contrairement aux attributs id/class (qui ne peuvent se placer que sur des balises), on peut les placer là où on veut.
Ces deux balises s'utilisent de manières différentes :
- Les balises <div></div> : ce sont des balises de type "block" (comme les titres, paragraphes...), elles permettent notemment de déplacer les éléments et de les positionner là où on le souhaite.
Exemple : Code HTML : <div class="bloc1"><p>Voici un paragraphe à l'intérieur d'une balise "DIV".</p></div>
Code CSS : - Les balises <span></span> : ce sont des balises de type "inline", qui se situent à l'intérieur d'un texte (comme les balises <em><strong>...).
Exemple : Code HTML : <p>Ce paragraphe contient une <span class="balise1">balise "SPAN"</span>.</p>
Code CSS :
1 2 3 4 |
.bloc1 { font-size: 15px; } |
1 2 3 4 |
.balise1 { color: red; } |
Le CSS et les imbrications de balises
Faire des imbrications de balises s'avère très utiles pour personnaliser sa page web, et il n'y a aucune difficulté à l'appliquer.
Voici le premier exemple :
Code CSS :
1 2 3 4 |
.bloc1 p { color: blue; } |
Cela signifie : "Tous les paragraphes contenus dans les balises de type "class" et ayant le nom "bloc1" auront un texte de couleur bleue.
Autre exemple :
Code CSS :
1 2 3 4 |
p strong { font-size: 16px; } |
Cela signifie : "Toutes les balises "strong" de tous les paragraphes doivent avoir une taille de "16px".
Utiliser efficacement le langage CSS
- Il est très important de se repérer dans sa page CSS (plus qu'en HTML qui suit un plan linéaire), il faut donc penser à organiser votre feuille de style en fonction des éléments et des pages.
- Pensez à mettre des commentaires dans votre code afin de savoir quelle partie vous êtes en train de traiter, ou les éléments que vous voudrez modifier. Pour ce faire il vous suffit de mettre /* avant votre commentaire et d'ajouter */ à la fin de celui-ci.
- Utilisez un stlyle unique sur votre site pour les éléments importants. Les visiteurs pourront mieux se répérer et naviguer sur votre site.
- N'employez pas trop de couleurs différentes ou de couleurs "flash". Conservez votre texte principal en noir, c'est toujours plus agréable à lire. Gardez toujours à l'esprit que le fond (= contenu) reste toujours plus important que la forme (= le design).
