Html & CSS
Apprendre les bases du langage
pour créer des sites web
Html/CSS
CSS 3
Introduction et notions de base
CSS 3
Définition
Html/CSS – Steven Berg – MAJ 01/2023 3
Cascading Style Sheets (CSS) => feuille de style en cascade.
Permettent de générer la présentation d’une page HTML :
séparer la structure (HTML) de sa présentation (CSS).
Ensemble de règles stylistiques applicables à un, ou
plusieurs documents HTML.
Différentes versions depuis 1996 (avant on utilisait des
balises de présentation directement dans le HTML.
Aujourd’hui CSS 3
CSS 3
Html/CSS – Steven Berg – MAJ 01/2023 4
Le CSS “en ligne” dans la balise HTML
Attribut style = “proprieté: valeur;“
Cette façon de faire, n’est pas une “bonne pratique“.
Et si je veux appliquer un style à tous les titres ? Et si je veux changer tous les titres
d’un coup ? => Long et fastidieux
MAIS c’est comme ça que le JavaScript injecte du CSS donc vous risquez de le voir
dans l’inspecteur d’élément.
Appliquer un style, mais où ?
CSS 3
Html/CSS – Steven Berg – MAJ 01/2023 5
Appliquer un style, mais où ?
Le CSS “interne“ dans l’entête du HTML
On place une balise <style> dans la
balise <head> du document.
On peut ainsi séléctionner et modifier
l’apparence de plusieurs éléments en une fois.
Inconvénient :
Ne s’applique qu’à ce document, et non
au site en entier
Il faut donc modifier le CSS sur chaque
page (ex : si on a 10 pages, modifier les styles
sur les 10 fichiers)
CSS 3
Html/CSS – Steven Berg – MAJ 01/2023 6
Appliquer un style, mais où ?
La/les feuille(s) de style externe(s)
Création d’un nouveau fichier appelé « styles.css » (notez l’extension .css ici) et on
lie la feuille de styles au HTML.
On « lie » la feuille de style au document HTML avec une balise <link> dans le
<head>.
CSS 3
Html/CSS – Steven Berg – MAJ 01/2023 7
Appliquer un style, mais où ?
La/les feuille(s) de style externe(s)
Avantages :
Séparation totale de la structure et de la présentation : possibilité
d’avoir des présentations alternatives.
Possibilité d’appliquer la même feuille de style sur plusieurs pages
(donc le site en entier) sans devoir la dupliquer.
Cohérence de la présentation sur tout le site et les pages futures.
CSS 3
Html/CSS – Steven Berg – MAJ 01/2023 8
La syntaxe est composée de 3 éléments :
Le sélecteur est l’élément sur lequel on applique les propriétés
(balise HTML, id, classe, etc.)
La propriété est l’effet que l’on va vouloir donner (ex couleur
de texte, positionnement, couleur de fond, etc.)
La valeur de la propriété CSS (rouge, 10px, etc.)
On appelle « une déclaration CSS » l’ensemble propriété +
valeur . On peut en avoir plusieurs pour un même élément et elles
sont séparées par le symbole point virgule.
La syntaxe de base
sélecteur {
propriété: valeur;
propriété: valeur;
}
CSS 3
Html/CSS – Steven Berg – MAJ 01/2023 9
Pour créer un commentaire CSS, on utilise /* */
Le commentaire n’est pas visible dans le navigateur.
Sert au développeur à prendre des notes, laisser des messages aux autres et savoir à
quoi servent les lignes de code.
Les commentaires
Html/CSS – Steven Berg – MAJ 01/2023 1 Html & CSS Apprendre les bases du langage pour créer des sites web 02 Html/CSS – Steven Berg – MAJ 01/2023 2 CSS 3 Introduction et notions de base CSS 3 Définition Html/CSS – Steven Berg – MAJ 01/2023 3 Cascading Style Sheets (CSS) => feuille de style en cascade. Permettent de générer la présentation d’une page HTML : séparer la structure (HTML) de sa présentation (CSS). Ensemble de règles stylistiques applicables à un, ou plusieurscuments HTML. Différentes versions depuis 1996 (avant on utilisait des balises de présentation directement dans le HTML. Aujourd’hui CSS 3 CSS 3 Html/CSS – Steven Berg – MAJ 01/2023 4 Le CSS “en ligne” dans la balise HTML Attribut style = “proprieté: valeur;“ Cette façon de faire, n’est pas une “bonne pratique“. Et si je veux appliquer un style à tous les titres ? Et si je veux changer tous les titres d’un coup ? => Long et fastidieux MAIS c’est comme ça que le JavaScript injecte du CSS donc vous risquez de le voir dans l’inspecteur d’élément. Appliquer un style, mais où ? CSS 3 Html/CSS – Steven Berg – MAJ 01/2023 5 Appliquer un style, mais où ? Le CSS “interne“ dans l’entête du HTML On place une balise
