Maîtriser CSS
(Cascading Style Sheet)
Web dynamique 2022
ECE Paris Ecole d’Ingénieurs
Dr. Manolo D. Hina (responsable du cours)
2 Introduction au CSS
CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en
forme votre page web.
Il faut être vigilant sur la compatibilité des navigateurs avec certaines
fonctionnalités récentes de CSS3. Quand un navigateur ne connaît pas une
instruction de mise en forme, il l'ignore simplement.
On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de
créer un fichier séparé portant l'[Link](exemple : [Link]).
En CSS, on sélectionne quelles parties de la page HTML on veut modifier et on
change leur présentation avec des propriétés CSS.
Il existe de nombreuses façons de sélectionner la portion de la page que l'on veut
mettre en forme. Par exemple, on peut viser :
toutes les balises d'un même type, en écrivant simplement leur nom (h1par exemple) ;
certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class
ou id(.nomClasse ou #nomId) ;
uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3 em).
3 Implémenter CSS <head>
<style type= text/css >
body { background-color:#E6E6FA;
Syntaxe: Styles intégrés (embedded color:#191970;
styles)
}
h1 { background-color:#191970;
color:#E6E6FA;
Configuré dans la section }
d'en-tête d'une page Web. h2 { background-color:#AEAED4;
color:#191970;
Utilise l'élément HTML <style> }
</style>
S'applique à l'ensemble du </head>
document de la page Web
Styles externes (external
Trois façons d’implémenter CSS styles)
Style inline Configuré dans un fichier
texte séparé, avec body { background-color:#E6E6FA;
Configuré dans le corps de la page Web extension de fichier .css. color:#191970;
}
Utilise l'attribut de style d'une balise HTML L'élément HTML <link> de la h1 { background-color:#191970;
S'applique uniquement à l'élément spécifié section d'en-tête de la }
color:#E6E6FA;
page Web l'associe au h2 { background-color:#AEAED4;
fichier .css. color:#191970;
}
<h1 style= color:#ff0000 > Le titre est en rouge. </h1> Exemple: Ce texte est
enregistré sous [Link]
4 Propriétés de formatage CSS
Quelques propriétés de formatage CSS Configuration de la couleur
partie rouge
color
partie verte
background-color
partie bleu
font-family = configure la police de
caractères du texte #000000 = black (noir) #FF0000 = red (rouge)
#00FF00 = green (vert) #0000FF = blue (bleu)
font-size = configure la taille du texte color: #0000FF; #FFFFFF = white (blanc) #CCCCCC = grey (gris)
font-style = configure le texte en style italique
font-weight = configure le texte en gras Trois façons de déclarer une couleur
(Exemple: déclarer une couleur rouge)
font-height
color: red;
margin
color: #FF0000;
text-align
color: rgb(255,0,0);
text-decoration
width
5 Configurer le texte et sélectionner en CSS
Configuration du texte avec CSS Selecteur CSS
font-weight = configure le caractère en gras Selecteur d’élément HTML
font-style = configure le texte en style italique Selecteur de classe (“class”)
font-size = configure la taille du texte Selecteur d’identifiant (“id”)
font-family = configure la police du texte Selecteur d’élément HTML
La propriété « font-size » Appliquer une règle CSS à un élément HTML
Exemple: La règle CSS s'applique aux éléments
body, h1 et h2 (ceux à l'intérieur des balises <body>
</ body>, <h1> </ h1> et <h2> </ h2>)
<head>
<style type= text/css >
body { background-color:#E6E6FA;
color:#191970;
La propriété « font-family » }
h1 { background-color:#191970;
color:#E6E6FA;
}
h2 { background-color:#AEAED4;
color:#191970;
}
</style>
</head>
6
Configurer le texte et le sélecteur d’un
élément à configurer
Configuration du texte avec CSS Selecteur CSS
font-weight = configure le caractère en gras Selecteur d’élément HTML
font-style = configure le texte en style italique Selecteur de classe (“class”)
font-size = configure la taille du texte Selecteur d’identifiant (“id”)
font-family = configure la police du texte Selecteur d’élément HTML
La propriété « font-size » Appliquer une règle CSS à un élément HTML
Exemple: La règle CSS s'applique aux éléments
body, h1 et h2 (ceux à l'intérieur des balises <body>
</ body>, <h1> </ h1> et <h2> </ h2>)
<head>
<style type= text/css >
body { background-color:#E6E6FA;
color:#191970;
La propriété « font-family » }
h1 { background-color:#191970;
color:#E6E6FA;
}
h2 { background-color:#AEAED4;
color:#191970;
}
</style>
</head>
7 Le sélecteur d’un élément à configurer
Selectionner par classe Selectionner par ID
Appliquer une règle CSS à une classe Appliquer une règle CSS à un ID d’un éléments
d’éléments d’une page web d’un page web
Utilisé avec le format .nomDeClasse Utilisé avec le format #nomID
Pour utiliser cette classe, il faut que cette Pour utiliser cette classe, il faut que cette classe
classe soit définie dans un élément HTML, soit définie dans un élément HTML, par exemple
par exemple dans un paragraphe dans un paragraphe
<style type=”css/text”> <style type=”css/text”>
.new { color:#FF0000; #new2 { color:#FF0000;
font-style: italic; font-size: 2em;
} font-style: italic;
</style> }
</style>
<p class=”new”>This is text in red
and in italics.</p>
<p id=”new2”>This is red, large and
in italics.</p>
8 Comment décider si on configure par classe
ou par ID? L’élément <div> et <span>
Configurer par classe L’élément HTML <div>
Si le style est à appliquer à plusieurs Un élément de niveau bloc. Il y a un saut de
éléments dans la page web ligne avant et après <div>
Utiliser la notation . (dot notation) dans la Objectif: configurer une division ou une zone
feuille de style spécialement formatée
Utiliser l’attribut « class » dans HTML Peut contenir d'autres éléments de niveau bloc
et des éléments en ligne
Configurer par ID
L’élément HTML <span>
Si le style est spécifique à un seul élément
dans la page web Un élément en ligne (inline). Il n'y a pas de saut
de ligne avant et après la durée.
Utiliser la notation # (notation hashtag)
dans la feuille de style Objectif: configurer une zone spécialement
formatée, affichée en ligne avec d'autres
Utiliser l’attribut « id » dans HTML
éléments, comme dans un paragraphe
Le Modèle de boite
9
Les règles de style CSS sont contenues
L’élément <link>
dans un fichier texte distinct des
documents HTML. Une balise autonome placée dans la section
d'en-tête
Le fichier texte de la feuille de style
externe: Objectif: associer la feuille de style externe à la
page Web
Extension .css
Exemple:
Contient uniquement des règles de style
<link rel=“stylesheet” href=“[Link]”
Ne contient aucune balise HTML type=“text/css” />
Plusieurs pages Web peuvent être
associées au même fichier de feuille de
style externe Validation CSS
Exemple: Utiliser ce lien pour valider votre fichier CSS:
body { background-color:#E6E6FA;
color:#000000; [Link]
font-family: Arial, sans-serif;
}
h2 { color:#003366;
}
.nav { font-size: 16px;
font-weight: bold;
}
Feuilles de style CSS externes
10
Tous les éléments HTML peuvent être
L’élément <link>
considérés comme des cases.
Content (contenu) = texte et éléments de
En CSS, le terme "modèle de boîte" est page web dans le conteneur
utilisé pour parler de conception et de
mise en page. Padding (remplissage) = zone entre le
contenu et la bordure
Le modèle de boîte CSS est Border (bordure) = entre le rembourrage et
essentiellement une boîte qui enveloppe la marge
chaque élément HTML.
Margin (marge) = détermine l'espace vide
Il comprend: entre l'élément et les éléments adjacents
les marges,
les bordures, Plus de precision et des exemples de
le remplissage et CSS dans votre prochain TD/TP
le contenu réel.
