Le langage CSS (Cascading Style Sheets) est un langage qui décrit le style à donner à des balises HTML.
Le CSS peut être placé à plusieurs endroits :
Il est plus propre de mettre le code CSS dans un autre fichier. C'est pourquoi nous ne développerons pas les deux autres possibilités.
Tout d'abord, il faut créer un fichier avec l'extension ".css".
Puis, dans la balise head du fichier HTML, il faut placer un lien vers le fichier CSS pour qu'il soit utilisé.
Exemple :
Les styles CSS sont généralement écrits de la façon suivante :
Exemple :
Vous pouvez observer que ce code CSS est utilisé pour le titre de la page. En effet, le texte de la balise <h1> est coloré en rouge.
Pour observer le code CSS de la page, faites "Ctrl+Shift+i" ou "F12" et aller l'onglet "Sources". Cherchez ensuite le fichier CSS dans les fichiers chargés pour afficher la page. En cliquant sur le fichier, le code de celui-ci s'affiche.
Rappel : Voici la touche "Shift"
Observez le code CSS de la page "2.2. Page à observer".
Notez vos observations des styles CSS (leur utilité, leur spécificité, ...). Cela vous permettra d'avoir un mémo sur ces styles pour votre projet.
Les principaux styles à connaître pour concevoir une page Web : | ||||
---|---|---|---|---|
color | width | font-family | ||
background-color | height | text-decoration | ||
font-size | border-radius | |||
border | list-style |
Ces styles CSS sont les "grands basiques" de ce langage. Nous verrons plus tard comment changer les dispositions des éléments (aligner à droite, mettre deux éléments côte-à-côte, etc.).
D'après-vous, quel code faut-il écrire pour mettre un fond sur toute la page ?
Faire les exercices de la page suivante "2.2. Page à observer".