Le CSS (Cascading Style Sheets) est un langage de programmation web utilisé afin d'altérer l'apparence visuelle, la mise en forme et le positionnement des éléments HTML d'une page.
Il est possible d'appliquer du CSS en HTMl de trois différentes façons.
style<p style="color: red;">Ceci est un exemple</p>¨
Cette méthode peut être utile si on désire appliquer certains styles à un seul élément, mais elle est inflexible.
<head> d'une page à l'aide de la balise <style><head>
...
<style>
p {
color: red;
}
</style>
</head>
Cette méthode permet d'appliquer des styles à plusieurs éléments à la fois et d'utiliser des sélecteurs plus avancés.
<head> d'une page à l'aide de la balise <style><head>
...
<style>
p {
color: red;
}
</style>
</head>
<link>Il est possible de créer un fichier externe en .css afin d'y mettre tout notre code CSS. L'avantage de cette méthode est qu'on peut appliquer le même code CSS à plusieurs pages sans duplication.
<head>
...
<link rel="stylesheet" href="style.css">
</head>
Le code CSS est organisé à l'aide de sélecteurs. Un sélecteur permet de regrouper plusieurs balises HTML ensemble afin de leur appliquer du CSS. Chaque sélecteur peut comporter plusieurs règles. On peut y insérer des commentaires à l'aide de /* et */. Chaque règle CSS doit se terminer par un point-virgule (;).
h1 { /* sélecteur */
color: red; /* une première règle */
font-size: 24px; /* une deuxième règle */
}
Il suffit de donner le nom de la balise. Par exemple, pour sélectionner tous les paragraphes:
p {
color: red;
}
On peut combiner des balises afin de sélectionner les éléments descendants. Par exemple, pour sélectionner tous les textes en importance qui se trouvent dans un paragraphe:
p strong {
color: red;
}
Comme pour un lien vers une balise avec un ID, on utilise le symbole de dièse (#) suivi du nom du ID.
#premier_paragraphe {
color: red;
}
Puisqu'on ne peut pas utiliser un ID avec plusieurs balises différentes, lorsqu'on veut appliquer des styles à plusieurs balises, on peut utiliser une classe. Il faut d'abord l'ajouter aux balises en question à l'aide de l'attribut class:
<p class="important">...</p>
<p>...</p>
<p class="important">...</p>
On sélectionne ensuite les balises d'une même classe en utilisant le point (.) suivi du nom de la classe.
.important {
color: red
}
Il est possible de combiner plusieurs sélecteurs différents en un seul à l'aide de la virgule (,). Il s'agit ici du même principe que le || en programmation, la virgule agit donc à titre de "ou".
p, h1, .test {
color: red;
}
Parfois, on voudra appliquer des styles sur une partie spécifique de notre page qui n'est pas nécessairement encadrée par une balise en particulier. On peut utiliser les balises universelles afin de regrouper des éléments d'une page comme on le désire.
<span>La balise <span> permet de regrouper des éléments de texte ensemble. Il s'agit d'une balise dite inline, au même titre que <strong> ou <em>.
<p>Il est donc possible d'appliquer des styles à <span>certains mots seulement</span>!</p>
Afin d'indiquer une couleur en CSS, on peut utiliser plusieurs différentes méthodes.
On peut utiliser le nom de plusieurs couleurs de base en anglais. Une telle liste de couleurs est disponible sur le site du W3C.
p {
color: red;
}
Si on désire utiliser une couleur plus spécifique, on peut utiliser un de 3 codes de couleurs, soit hexadécimal, RGB ou HSL. Il existe plusieurs outils en ligne afin d'aider à trouver ce code de couleur, tel que celui de MDN.
p {
color: #FF0000; /* rouge */
}
colorp {
color: red;
}
font-sizep {
font-size: large;
}
font-familyp {
font-family: Arial, sans-serif;
}
font-stylep {
font-style: italic;
}
font-weightp {
font-weight: bold;
}
text-decorationp {
text-decoration: underline;
}
text-alignp {
text-align: center;
}
list-style-typeli {
list-style-type: lower-alpha;
}
background-colorbody {
background-color: red;
}
background-imagebody {
background-image: url('images/penguins.jpg');
}
background-repeatbody {
background-repeat: repeat;
}