De la même façon que HTML, CSS n’est pas vraiment un langage de programmation. C’est un langage de feuille de style, c’est-à-dire qu’il permet d’appliquer des styles sur différents éléments sélectionnés dans un document HTML. Il existe un grand nombre de propriétés graphiques sur lesquelles le CSS pourra avoir un impact. Il nous sera ainsi possible d’en modifier les couleurs, les positionnements, les dimensions, les comportements… Dans sa dernière version, le langage CSS nous permet également de pouvoir animer les éléments HTML, de jouer sur leurs propriétés de fusions (de la même façon que les calques Photoshop) ou de modifier notre mise en page en fonction de l’outil de navigation utilisé par l’internaute (ordinateur, tablette, smartphone, télévision…).
La syntaxe
L’écriture du code css est simple, il s’agit de cibler un élément, puis de donner une valeur aux propriétés graphiques (les règles) nécessaires a l’affichage souhaité.
Dans l’exemple suivant, nous ciblons l’ensemble des éléments <p> de notre page et leur attribuons la couleur rouge.
p {
color : red;
}Observons ce que nous venons d’écrire de plus prêt :
Cette structure s’appelle une règle ou ensemble de règle. Elle est toujours composée de la même façon, il n’existe pas d’exception.
- Le sélecteur : Il s’agit de l’élément ciblé dans notre page, c’est sur cette élément et toutes ses occurrences que seront appliqués les propriétés graphiques. Il suffira de changer de sélecteur pour cibler un autre élément.
- La déclaration : C’est une règle simple qui permet de définir les propriété de l’élément à mettre en forme. Nous mettrons autant de déclarations que de propriétés à préciser.
- La propriété : Spécifie quel rendu nous voulons modifier. Ici, nous modifions la couleur du texte, mais ce n’est qu’un début, il en existe un grand nombre et chacune d’entre elle permetra de coller au plus près de la maquette graphique définie en amont.
- La valeur : À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d’autres pour une propriété donnée.
Les autres éléments importants de la syntaxe sont :
- chaque ensemble de règles, à l’exception du sélecteur, doit être entre accolades ({ }).
- pour chaque déclaration, il faut utiliser deux points (:) pour séparer la propriété de ses valeurs.
- pour chaque ensemble de règles, il faut utiliser un point-virgule (;) pour séparer les déclarations entre elles.
Dans l’exemple ci-dessous, nous voyons comment sera structurée la règle pour modifier plusieurs propriétés (la couleur, le corps, l’arrière-plan, la bordure du bas, la marge extérieur du bas et la marge intérieur du bas) :
p {
color : red;
font-size : 25px;
background-color : yellow;
border-bottom : solid 1px blue;
margin-bottom : 15px;
padding-bottom: 15px;
}Les commentaires
Comme c’est le cas pour le code HTML, nous pouvons ajouter des commentaires dans une feuille de style. Ces commentaires sont utiles pour faciliter la lecture de notre feuille CSS laisser des indications aux autres personnes intervenant dessus, ou simplement prendre des notes. Pour écrire les commentaires, ils suffira d’encadrer un texte ou une suite de caractères par /* et */ :
/* Ceci est un commentaire */Les sélecteurs
Jusqu’ici nous avons vu comment sélectionner un élément unique en l’appelant par le nom de sa balise, mais il existe de nombreux cas où cette méthode nous blqoue dans notre progression. Le CSS offre une solution pour chaque problématique.
Sélectionner l’ensemble des éléments en une fois.
Lorsque nous débutons une feuille de style, nous pouvons constater que certains paramètres son déjà définis sans que nous ne connaissions leur valeur précise. Il s’agit des paramètres propres à la feuille de style du navigateur qui permettent une meilleur visualisation des contenus HTML avant la liaison avec notre propre feuille de style. Certains de ces paramètres sont intéressants, le corps du texte par exemple, d’autre sont plus gènants. C’est le cas pour les marges intérieurs et extérieurs. Il est possible de cibler l’ensemble des balises HTML pour réinitialiser ces valeurs. Le sélecteur étoile (*) est dédié à cette opération. Il est généralement plus confortable de commencer sa feuille de style par cette règle.
* {
padding : 0;
margin: 0;
}Sélectionner plusieurs éléments d’un coup.
Une règle peut parfois être à plusieurs éléments. Pour allèger le poid de notre feuille de style et éviter les répétitions inutiles nous pourrons donc appliquer les mêmes paramètres graphiques en une seul règle en séparant les sélecteurs par des virgule (,).
h1, h2, h3, h4{
border-bottom: solid 1px black;
}Sélection par lien de parenté
Il existe un lien de parenté entre les éléments HTML, certains sont frères, d’autres parents/enfants. Nous pourrons donc cibler un éléments enfant en s’appuyant sur son élément parent. Pour ce faire, nous citerons l’élément parent puis l’élément enfant précédé d’un espace.
Dans l’exemple suivant, les éléments <li> ne seront pas de la même couleurs. Cette couleur dépendra de l’élément parent <ul> ou <ol>. Ainsi les <li> contenus dans un <ul> apparaitrons en rouge tandis que ceux contenus dans un <ol> apparaitrons en bleu.
ul li {
color : red;
}
ol li{
color : blue;
}Nous pourrons aussi sélectionner un élément en fonction de son frère précédent. Nous intercalerons le caractère plus (+) encadré par des espaces entre les deux balises. La première cité sera le « grand frère ».
Dans l’exemple suivant, les éléments <p> directement précédés par un élément <h2> apparaitrons en gras et dans un corps de 18px :
h2 + p {
font-weight : bold;
font-size : 18px;
}Sélectionner à l’aide d’un attribut
Certains attributs présent dans le code HTML sont soit directement destinés au CSS, comme les class, ou disponible comme sélecteur, dans le cas des id par exemple.
| Sélecteur | Ce qu’il sélectionne | Utilisation HTML | Utilisation CSS |
|---|---|---|---|
| Class | Les éléments d’une page qui sont de la classe donnée. Pour une page HTML donnée, il est possible d’avoir plusieurs éléments qui partagent une même classe. Un élément peut posséder plusieurs classes, dans ce cas il faudra séparer les classes par un espace dans le code HTML. | <p class= »my_class my_second_class »> | .my_class{ color:red; } |
| Id | L’élément d’une page qui possède l’ID fourni. Pour une page HTML donné, on ne peut avoir l’id présent qu’une seule fois. | <p id= »my_id »> | #my_id{ color:red; } |
| Sélecteur d’attribut | Les éléments de la page qui possèdent l’attribut donné. | <a href= »http://facebook.com » title= »Facebook »> | a[title= »Facebook »]{ color:red; } |
| Pseudo class | Les éléments donnés mais uniquement dans un certain état, par exemple quand on passe la souris au dessus d’un lien). | a:hover{color:red;} |
Il existe d’autres mode de sélection d’éléments, pour aller plus loin, rendez-vous sur cette page.