Le code CSS est un langage dit descriptif. Non obligatoire bien qu’essentiel sur une page web, il a pour but de mettre en forme et d’animer des balises HTML. Son but est uniquement visuel, à contrario du HTML qui a un but sémantique.
Voyons dans cet article son intégration dans un fichier HTML
Sommaire
Présentation
Association dans un fichier HTML
Le code CSS est un langage dit descriptif. Son but est de mettre en forme et d’animer des balises HTML. Un code CSS seul n’a donc pas d’utilité pour un navigateur. Le CSS peut être écrit :
- dans le fichier
.htmlsur lequel il agit, - dans un ou plusieurs fichier
.cssprésents :- dans le dossier (ou sous-dessier) du fichier
.html - dans un serveur web externe
- dans le dossier (ou sous-dessier) du fichier
On associe un fichier .css ou du code CSS dans un fichier .html comme suit :
HTML seulAjout CSS depuis serveurAjout CSS depuis dossierAjout CSS dans HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
</head>
<body>
<!-- Contenu site écris en blabla HTML -->
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- le css est dans un serveur web HTTP à part -->
<link rel="stylesheet" href="http://nom_de_domaine/chemin_acces/styles.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<!-- Contenu site écris en blabla HTML -->
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- le css est dans un fichier à part -->
<link rel="stylesheet" href="./chemin_acces_relatif/styles.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<!-- Contenu site écris en blabla HTML -->
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
<!-- le code CSS à écrire est ici :3 -->
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<!-- Contenu site écris en blabla HTML -->
</body>
</html>Création d’un fichier CSS
Dans cet exemple, on souhaite associer un fichier styles.css à un fichier .html. Pour cela, il nous faut :
- Créer un fichier texte et :
- Le renommer
styles
- Remplacer l’extension
.txtpar.css.
- Le placer dans le dossier / un sous-dossier du fichier
.html
- Le renommer
- Remplir le fichier texte crée avec l’éditeur de texte / code de votre choix :
- Simple (bloc-notes windows, …)
- Avec mise en relief du code (notepad++, …)
- Équipé d’un IDE (atom, …)
- Ajouter entre les balises
headdu fichier.htmlle chemin d’accès relatif au fichier.css.
Fichier .htmlFichier styles.css
<!DOCTYPE html>
<html lang="fr">
<!-- Ce bloc gère l'entête de la page web -->
<head>
<meta charset="utf-8">
<title>Mes premiers essais CSS</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<!-- Ce bloc gère le contenu de la page web -->
<body>
<h1>Titre - Des couleurs et du CSS</h1>
<div>
<p>Ceci est un paragraphe normal</p>
<p id="test">Ceci est un paragraphe mis en forme via CSS </p>
</div>
<h1>Titre - De l'animation et du CSS</h1>
<section>
<p>Ceci est un bloc animé via CSS</p>
<p>Pointez votre souris sur moi</p>
</section>
</body>
</html>/* Ce bloc CSS souligne l'élément <h1> */
h1 {
text-decoration: underline;
}
/* Ce bloc CSS met en forme l'élément id "test" */
#test {
color: blue;
font-style: italic;
text-align: center;
font: Calibri;
font-family: monospace;
}
/* Ce bloc CSS modifie l'affichage de l'élément <section> en fonction */
/* d'un évènement particulier indiqué par la pseudo-classe :hover */
section:hover {
background-color: gold;
}
Exemples
1 – HTML et CSS dans un fichier2 – HTML et CSS séparés2 – HTML et CSS séparés
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- le css est juste ici -->
<style>
p {
color: blue;
}
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<p>Hello World, cette phrase est dans la balise p mise en forme vis CSS</p>
<div>Good Night, cette phrase est dans la balise div</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- le css est dans un fichier à part -->
<link rel="stylesheet" href="styles.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<p>Hello World, cette phrase est dans la balise p mise en forme vis CSS</p>
<div>Good Night, cette phrase est dans la balise div</div>
</body>
</html>/* Nommez le fichier "styles.css" et mettez le dans le même dossier que le fichier HTML <h1> */
p {
color: blue;
}
