CSS signifie "Cascading Style Sheets" ce qui signifie "Feuille de style en cascade". On parle de feuille de style car on écrit le fichier css dans une feuille à part et que l'on appelle cette feuille de style entre les balises <HEAD> et </HEAD>. On appelle cette feuille grâce au code suivant :
<link href="../css/style.css" rel="stylesheet" type="text/css">
Vous pouvez mettre aussi bien l'adresse absolue ou relative de votre code css
Le fichier CSS n'est ni plus ni moins un fichier avec l'extension .css . Donc au lieu d'enregistrer votre fichier avec l'extension html ou htm, enregistrez le avec l'extension css.
A partir de maintenant, je vais utiliser un éditeur HTML pour saisir mon code. J'ai pris notepad++ car il est gratuit et il gère la coloration du code que ce soit du code HTML ou CSS.
Vous vous souvenez de la balise <body> et </body> que l'on trouve dans le code HTML. Rien qu'avec une manipulation en css, nous allons changer la couleur de fond de la page web.
Voici le code en css, le code HTML et le résultat de ce code.
|
body { background-color:CC9933; } |
Enregistrez ce code dans un dossier au format css
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Première page html avec du css</title> <link href="../style.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html> |
Et voila le résultat
Maintenant, rien qu'en ajoutant une ligne dans la section <HEAD> et </HEAD> de chaque page html, j'aurai un fond d'une certaine couleur. Si vous changez la couleur de fond dans le fichier css, la couleur de fond s'appliquera à toutes vos pages html.
Vous souhaitez voir une vidéo de création d'un fichier css et html, cliquez sur le lien suivant
Exemple vidéo : Création d'un fichier et css et d'un fichier html
Dans un css, on trouve 3 éléments différents :
En somme pour chaque balise, on peut attribuer un css et chaque balise doit avoir une valeur.
Nous allons créer un css avec la balise <p>. La balise <p> lorsqu'elle est utilisée créer un paragraphe. Donc pour chaque paragraphe créer, je veux par exemple, que le texte soit de couleur bleu et qu'il soit centrer au milieu de la page. Maintenant, nous allons reprendre les 2 fichiers de tout à l'heure et nous allons un peu les modifier.
|
body { background-color:CC9933; } p { color:blue; text-align:center; } |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Première page html avec du css</title> <link href="../style.css" rel="stylesheet" type="text/css"> </head> <body> <p>bla bla bla</p> encore du bla bla bla mais sans css </body> </html> |
Et voici le résultat
Dans le cours sur le HTML, nous avons vu que l'on pouvez créer des titres avec les balises <h1>, <h2> ... La seule différence dans ces balises c'est la taille des caractères mais on peut très bien ajouter de la couleur. Comme nous allons créer le même style pour deux balises différentes, nous allons les rassembler :
Les 2 codes suivants sont identique :
|
h1 { color:red; } h2 { color:red; } |
|
h1, h2 { color:red; } |
Cela signifie que mes 2 balises de titre soit en rouge