03 Les - Bases - en - CSS

Les sélecteurs CSS simples
Le CSS va nous permettre de mettre en page un contenu et de changer son apparence en lui appliquant des
styles.Pour appliquer un style à un élément HTML, nous allons devoir au préalable le « sélectionner » ou le
cibler.Un sélecteur va donc nous permettre de cibler un ou plusieurs éléments HTML afin de leur appliquer un
style particulier.Il existe différents types de sélecteurs qu’on appelle sélecteurs « simples » ou « complexes ».
Nous allons voir les plus utilisés d’entre eux au cours des chapitres à venir.
On appelle également les sélecteurs CSS simple des "sélecteurs éléments", tout simplement car ils reprennent le
nom du type d'élément HTML à cibler.Par exemple, si l’on souhaite par exemple appliquer un style particulier à
tous les paragraphes de notre page web, nous utiliserons le sélecteur CSS p.
Les propriétés CSS

Les propriétés vont nous permettre de choisir quel(s) aspect(s) (ou "styles") d’un élément HTML on souhaite
modifier.Par exemple, nous allons pouvoir modifier la couleur d’un texte et lui appliquer la couleur que l’on
souhaite grâce à la propriété color (« couleur », en français).
Une propriété va être accompagnée d’une ou plusieurs valeurs qui vont définir le comportement de cette
propriété.Par exemple, la propriété color peut prendre le nom d’une couleur (en anglais). Si l’on donne la valeur
« red » (rouge) à notre propriété color, les textes au sein des éléments HTML auxquels on applique cette
propriété s’afficheront en rouge.
Sélecteurs, propriétés et valeurs en pratique

Prenons immédiatement un premier exemple ensemble, afin d’illustrer ce que nous venons de dire et de bien voir
comment le CSS fonctionne.
p
{
color:blue;
font-size: 14px;
}
Dans l’exemple ci-dessus, nous utilisons le sélecteur CSS simple p qui va cibler tous les paragraphes de notre
page HTML.Ensuite, vous remarquez que nous utilisons deux propriétés color (couleur) et font-size (taille de la
police d'écriture) pour modifier nos paragraphes.Nos paragraphes vont dorénavant s’afficher en bleu (blue) et
notre texte va avoir une taille égale à 14 pixels (14px).
Profitez-en pour déjà noter la syntaxe du CSS et apprendre un peu de vocabulaire : on appelle le couple «
propriété : valeur » une déclaration en CSS.Chaque déclaration doit être séparée d’une autre par un point virgule
On place toutes les déclarations relatives à un sélecteur à l’intérieur d’un couple d’accolades. Cela permet au
CSS de savoir à quel sélecteur il doit appliquer les styles correspondants.
Premières explications
Lorsque l’on code, vous devez bien vous dire que rien n’est « magique » : tout le code que vous écrirez dans
votre vie reposera sur des règles et des mécanismes. Les connaître vous permettra de beaucoup mieux
comprendre ce que vous faîtes et comment faire telle ou telle chose.Comme nous l’avons vu dans la partie
précédente, on va utiliser des sélecteurs en CSS afin d’appliquer des styles, c’est-à-dire afin de modifier
l’apparence d’éléments HTML.
Cependant, il va falloir d’une manière ou d’une autre « lier » notre code CSS à notre code HTML afin que les
éléments de nos pages HTML tiennent bien compte des styles qu’on a voulu leur appliquer en CSS.Pour faire
cela, nous allons pouvoir écrire le code CSS à trois endroits différents. Chaque méthode va présenter des
avantages et des inconvénients selon une situation donnée.
La première façon d’écrire du code CSS va être à l’intérieur même de notre page HTML, au sein d’un élément
style.De cette façon, le code CSS ne s’appliquera qu’à la page HTML dans laquelle il a été écrit.Cette première
méthode d’écriture du CSS n’est pas recommandée, pour des raisons de maintenance et d’organisation du code
en général.Nous la voyons dans ce cours à titre d’exemple, afin que vous sachiez l’identifier si un jour vous
voyez du code CSS écrit de cette façon dans un fichier.
L’élément style sera en général placé en haut de notre page HTML, à l’intérieur même de l’élément head.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>titre de la page</title>
<link rel="stylesheet" href="depart.css">
<style>
body{
background-color: orange;
}
p{
color:blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Que d'erreurs dans cette page !</h1>
<p>Mon premier paragraphe</p>
<p>Mon second paragraphe ?</p>
<p>Mon troisième paragraphe.</p>
<p> Voici <a href=http://www.google.fr>un lien pour Google</a>.</p>
</body>
</html>
Ici, je commence donc par créer un élément style que je place dans l’élément head de ma page HTML. Ensuite,
j’écris mon CSS à l’intérieur de cet élément style.Je commence par appliquer une couleur de fond orange à mon
élément body (c’est-à-dire à toute la partie visible de ma page) avec la propriété CSS background-color en le
ciblant avec le sélecteur CSS body. Ensuite, je change la couleur et la taille du contenu de tous les éléments p de
ma page HTML. Mes paragraphes auront désormais une taille égale à 16 pixels et s’afficheront en bleu.
Nous pouvons également écrire notre code CSS à l’intérieur de la balise ouvrante de nos éléments HTML.Pour
faire cela, nous utiliserons cette fois-ci un attribut style (à ne pas confondre avec l’élément style). Cet attribut va
prendre comme valeur les différentes déclarations CSS relatives à l’élément.Avec cette seconde méthode, les
styles CSS ne s’appliqueront qu’à l’élément au sein duquel est écrit le CSS.
Cette méthode d’écriture du CSS, bien qu’elle puisse parfois être pratique, n’est également pas recommandée et
est à éviter tant que possible.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>titre de la page</title>
<style>
body{
}
p{
color:blue;
font-size: 16px;
}
</style>
</head>
<body>
<p style="color:red;font-size: 30px; ">Mon premier paragraphe</p>
</body>
</html>
Comme vous pouvez le voir ci-dessus, seul notre premier paragraphe a été modifié cette fois-ci.
Finalement, nous pouvons écrire notre code CSS dans un fichier séparé portant l’extension « .css ». C’est la
méthode recommandée, qui sera utilisée autant que possible.Cette méthode comporte de nombreux avantages,
notamment une meilleure maintenabilité du code grâce à la séparation des différents langages, ainsi qu’une
meilleure lisibilité.Cependant, le plus gros avantage de cette méthode est qu’on va pouvoir appliquer des styles à
plusieurs pages HTML en même temps, d'un seul coup.
En effet, en utilisant l'une des deux premières méthodes, nous aurions été obligés de réécrire tout notre code CSS
pour chaque nouvelle page HTML composant notre site.Ici, nous allons pouvoir lier notre fichier CSS à autant
de fichiers HTML que nous le voulons. Ainsi, lorsque nous voudrons modifier, par exemple, la couleur de tous
les paragraphes, nous n’aurons à le faire qu’une fois pour toutes.Nous allons donc commencer par créer un
fichier CSS qu’on va appeler styles.css. Nous allons enregistrer ce fichier et le placer dans le même dossier que
notre page HTML pour plus de simplicité.
p{
color:blue;
font-size: 14px;
}
body
{
}
Nous travaillons donc dorénavant avec deux fichiers : un fichier que j’ai appelé depart.html et notre fichier
depart.css.Nous allons maintenant finalement devoir lier notre fichier CSS à notre fichier HTML. Pour cela,
nous allons utiliser un nouvel élément HTML : l’élément link (« lien », en français).Cet élément va avoir besoin
de deux attributs : rel, qui va préciser le type de fichier (dans notre cas, ce sera « stylesheet » pour feuille de
style) et un attribut href qui va indiquer l’adresse relative du fichier CSS.
On va placer l’élément link dans l’élément head de notre fichier HTML. Cet élément prend la forme d’une
balise orpheline.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>titre de mon site</title>
</head>
<body>
</body>
</html>
Nos deux fichiers sont maintenant liés et les styles CSS vont bien être appliqués aux éléments de notre page
HTML.
Les commentaires, le retour

Tout comme nous avons vu qu’on pouvait écrire des commentaires en HTML, nous allons également pouvoir
commenter notre code CSS.Les commentaires n’influent une nouvelle fois en rien sur le code et ne sont pas
visibles par les utilisateurs. Commenter le code CSS n’est pas une option : cela va très vite devenir indispensable
car vous allez vous rendre compte que les fichiers CSS s’allongent très vite.
Il est donc essentiel de bien organiser et de bien commenter son code CSS afin de ne pas faire d’erreur en
appliquant par exemple deux styles différents à un même élément. La syntaxe des commentaires en CSS est
totalement différente de celle des commentaires en HTML. Nous écrirons de la même manière un commentaire
mono-ligne ou multi-lignes en CSS.
/* Commentaire sur une ligne*/

p{
color:blue;
font-size: 14px;
}
/*Commentaire
sur
plusieurs
lignes
*/
body
{
}
Vous pouvez également remarquer une utilisation intéressante des commentaires et qui est très commune en CSS
: le fait de commenter une déclaration CSS.En effet, vous voudrez parfois supprimer momentanément une
déclaration CSS, pour effectuer des tests par exemple. Plutôt que de l’effacer complètement, vous pouvez la
commenter. Ainsi, la déclaration CSS ne sera plus prise en compte. Vous n’aurez ensuite plus qu’à enlever le
commentaire pour la « réactiver ».
L’indentation en CSS
Indenter en CSS est également très important afin de conserver le plus de clarté possible dans son code et de
paraître professionnel si un jour vous devez le distribuer. En terme de règles, nous indenterons en général d’une
tabulation les différentes déclarations concernant un sélecteur donné.
Pour plus de lisibilité, nous retournerons également à la ligne après chaque déclaration. Notez que cela
augmentera de façon très minime le temps d’exécution du code et donc le temps d’affichage de la page.
Cependant, en phase de développement tout au moins, il est essentiel de conserver un code aéré et propre. Vous
pourrez toujours le compresser par la suite ; de nombreux outils existent sur le web pour cela.
Les sélecteurs de type élément

Comme je vous le disais précédemment, le CSS va pouvoir appliquer des styles à du contenu écrit en HTML
grâce à des sélecteurs qui vont cibler un contenu particulier.Jusqu’à présent, nous n’avons vu que des sélecteurs
CSS de type élément, c’est-à-dire des sélecteurs qui ciblent un élément en se basant sur le nom de l’élément.
Par exemple, le sélecteur p va cibler tous les éléments p (c’est-à-dire tous les paragraphes) d’une page HTML.
De même, le sélecteur CSS h1 va nous permettre d’appliquer des styles à notre titre h1 ; le sélecteur a va nous
permettre de mettre en forme nos liens, etc.
<!DOCTYPE html>
<html lang="fr">
<head>
</head>
<body>
</body>
</html>
/* Commentaire sur une ligne*/
p{
color:blue;
font-size: 14px;
}
/*Commentaire
sur
plusieurs
lignes
*/
body
{
}
h1{
color:green;
}
a{
font-weight: bold;
}
Ces sélecteurs de type élément sont également appelés des sélecteurs simples en CSS, car il suffit simplement
de reprendre le nom de l’élément HTML pour lui appliquer des styles.
Appliquer un style à différents types d’éléments

Le CSS va nous permettre de regrouper différents types d’éléments (par exemple h1 et p) afin de leur
appliquer le même style à tous d’un coup.Pour faire cela, c’est très simple, il suffit de séparer les différents
sélecteurs représentant les éléments auxquels on souhaite appliquer un style CSS particulier par une virgule.
p,a,h1{
color:blue;
font-size: 14px;
}
body
{
}
a{
font-weight: bold;
}
Ici, on applique une couleur bleue à tous nos paragraphes ainsi qu'à notre titre principal d'un coup.
Préférence et limitation des sélecteurs simples

L’utilisation de sélecteurs simples doit être favorisée tant que possible car ces sélecteurs consomment moins de
ressources que des sélecteurs plus complexes et car ils sont plus clairs.Le problème avec les sélecteurs de type
élément est que nous allons être vite limités :
par exemple, comment appliquer une couleur différente à deux paragraphes différents avec le sélecteur
simple p ? Ce n’est tout simplement pas possible, à moins de placer les déclarations CSS dans la balise ouvrante
des éléments, ce qui n'est pas recommandé.
Pour contourner ce problème, nous avons créé deux attributs HTML id et class qui vont nous aider à cibler du
contenu HTML de manière plus précise.
Les attributs id et class et les sélecteurs associés
Les sélecteurs #id et .class vont nous permettre de cibler un élément en particulier plutôt qu’un type
d’élément.Nous allons tout simplement écrire nos attributs id et / ou class à l’intérieur de la balise ouvrante d’un
élément HTML et leur attribuer une valeur.Nous allons ensuite cibler cet élément en CSS en réutilisant cette
même valeur.
Comme d’habitude, les valeurs indiquées pour les attributs id et class ne doivent contenir ni caractères spéciaux
ni espaces et commencer par une lettre.Regardons immédiatement comment cela va fonctionner en pratique à
l’aide d’exemples.
<!DOCTYPE html>
<html lang="fr">
<head>
</head>
<body>
<p id="p1">Mon premier paragraphe</p>
<p class="p1">Mon second paragraphe ?</p>
</body>
</html>
Comme vous pouvez le voir ci-dessus, j’ai attribué un attribut id à mon premier paragraphe et un attribut class à
mon deuxième paragraphe.Vous pouvez remarquer que j’ai donné la même valeur à mes attributs id et class. Ce
n’est pas un problème, car on va pouvoir les différencier en CSS.
En effet, pour cibler un élément possédant un attribut id, en CSS, il faudra préciser la valeur de l’attribut
précédée d’un dièse (#).Pour cibler un élément possédant un attribut class, en revanche, il faudra en CSS préciser
la valeur de l’attribut précédée d’un point (.).Ainsi, on peut tout à fait donner la même valeur à un attribut class
et id : il n’y a aucun risque de confusion en CSS si vous faites bien attention à bien faire précéder la valeur par le
dièse ou le point.
#p1
{
color:blue;
}
body
{
}
.p1
{
color:red;
}
Class et id : différences et utilisation avancée
Il existe une différence notable entre les deux attributs class et id : chaque id doit avoir une valeur unique tandis
que plusieurs attributs class peuvent posséder la même valeur.En effet, rappelez-vous de nos liens de type ancre.
Il s’agit bel et bien du même attribut id qu’on utilise aujourd’hui, avec des finalités différentes.
Il est donc strictement interdit de donner la même valeur à deux id différents dans une même page HTML. En
revanche, on peut tout à fait attribuer la même valeur à plusieurs attributs class appartenant à différents éléments
HTML.
Cette particularité de l’attribut class va notamment nous permettre d’appliquer le même style à différents (types)
d’éléments HTML d’un coup.
<!DOCTYPE html>
<html lang="fr">
<head>
</head>
<body>
<h1 class="p1">Que d'erreurs dans cette page !</h1>
<p id="p1">Mon premier paragraphe</p>
</body>
</html>
#p1
{
color:blue;
}
body
{
}
.p1
{
color:red;
}
Nous allons également pouvoir attribuer un attribut class et un attribut id à un même élément HTML afin de
pouvoir lui appliquer un style « semi-général » et un style particulier.
<!DOCTYPE html>
<html lang="fr">
<head>
</head>
<body>
<h1 >Que d'erreurs dans cette page !</h1>
<p id="p1" class="p1">Mon premier paragraphe</p>
</body>
</html>
#p1
{
font-weight: bold;
}
body
{
}
.p1
{
color:red;
}
Notez qu’en cas de conflit, c’est le style du sélecteur le plus précis qui va être appliqué. Par exemple, si vous
donnez une class et un id à un même élément HTML et que vous utilisez cette class et cet id pour définir deux
couleurs différentes, c’est la couleur de l’id qui va s’imposer car l'attribut id permet de cibler du code HTML
plus précisément que l'attribut class.
Notez également que toutes les propriétés CSS ne s’appliquent pas à tous les éléments HTML. Par exemple,
cela n’aurait pas de sens de donner une propriété color à un élément br puisque celui-ci ne représente pas un
contenu visible par l'utilisateur. Nous reparlerons de tout cela plus tard.
Qu’est-ce que l’héritage ?

L’héritage est une notion centrale et fondamentale en CSS.La notion d’héritage signifie que tout élément
HTML enfant va hériter, « en cascades », des styles de ses parents.C’est par ailleurs de là que vient le nom du
CSS : Cascading StyleSheets, ou Feuilles de Style en Cascades.
Par exemple, tous les éléments à l’intérieur de l’élément body sont des enfants de cet élément. Si l’on applique
un style à l’élément body, ses enfants en hériteront automatiquement.
Ici, les éléments h1, p et strong ont hérité des styles de leur parent body. Ainsi, nos différents textes s’affichent
en violet.
Priorité et ordre en CSS

Cette notion d’héritage est très puissante et très pratique en CSS.Cependant, il convient de bien comprendre dans
quel ordre et selon quelle priorité s’appliquent les différents styles à un élément afin de ne pas faire d’erreur.
En CSS, s’ il y a un conflit, c’est-à-dire si un élément reçoit plusieurs fois une même propriété avec des valeurs
différentes, le style qui va être prioritaire va être le style le plus proche de l’élément.
Voyons immédiatement un exemple ensemble afin de bien comprendre.
Comment interpréter l’exemple ci-dessus ? Tout d’abord, notez que nous appliquons à chaque fois la même
propriété color à nos différents éléments avec des valeurs différentes. Il va donc y avoir conflit.On applique une
couleur violette à notre élément body. Ainsi, tous les éléments contenus dans body vont hériter de cette couleur
par défaut sauf si une autre couleur est définie entre temps.
C’est le cas pour les éléments de type p, auxquels on attribue une couleur bleue. Ici, nous avons donc un
premier conflit : nos paragraphes doivent-ils hériter des styles définis avec le sélecteur body ou de ceux définis
avec le sélecteur p ?
La solution est simple : le sélecteur p cible de manière plus précise les paragraphes que le sélecteur body, et le
style défini dans le sélecteur p est donc plus proche de nos paragraphes que celui défini dans body; c'est donc
bien celui-ci qui sera appliqué.
Par défaut, tous nos paragraphes seront donc bleus, sauf si un style encore plus proche leur est appliqué. C’est le
cas pour notre paragraphe comportant la class="para3".Comme le ciblage est plus précis, les éléments
possédant cet attribut class vont récupérer les styles de l'attribut class s’il y a conflit.Pour le texte dans l’élément
strong, celui-ci récupère le style le plus proche de lui, c’est-à-dire celui qui lui est appliqué directement via le
sélecteur strong.
Quel ordre par rapport à l’emplacement du CSS ?

De même, il va y avoir un ordre de priorité selon où on va écrire notre code CSS.
Rappelez-vous que l’on peut écrire le code CSS à trois endroits différents :
 Au sein de la balise ouvrante de chaque élément HTML, dans un attribut style ;

 Dans un élément style placé dans l’élément head d’un fichier HTML ;
 Dans un fichier CSS séparé.
Si on écrit le CSS à différents endroits, et s’ il y a un conflit, le style appliqué à l’élément directement (grâce à
l’attribut style) sera prioritaire.
Ensuite, ce sera le style écrit dans l’élément HTML style qui sera retenu.
Finalement, le style écrit dans un fichier CSS séparé sera retenu en dernier.
Notez qu'on va pouvoir outrepasser cette notion d'ordre en ajoutant la mention "!important" à la fin d'une
déclaration CSS qu'on veut imposer.
Les types d’éléments HTML
En HTML, tout élément est soit de type « block » (bloc), soit de type « inline » (en ligne).
Par exemple, l’élément p est un élément de type block tandis que l’élément strong est un élément de type inline.
Connaître le type d’un élément HTML va être essentiel pour créer et mettre en forme nos pages web car les
éléments de type block et inline vont se comporter de façon radicalement différente dans une page et nous
n'allons pas forcément pouvoir leur appliquer les mêmes propriétés CSS.
Pour le moment, nous allons découvrir ensemble les différences entre les éléments de type block et inline. Nous
verrons plus en détail le côté pratique lorsque nous étudierons le modèle des boîtes.
Les éléments de type block

Un élément de type block va toujours commencer sur une nouvelle ligne et prendre toute la largeur disponible
dans la page.De plus, un élément de type block peut contenir d’autres éléments de type block ainsi que des
éléments de type inline.
Illustrons immédiatement visuellement cela en prenant un exemple avec un élément p :
Ici, nous nous sommes contentés de créer une bordure autour de nos éléments p grâce à la propriété CSS
border (que nous étudierons plus en détail plus tard).
Comme vous pouvez l’observer, en rajoutant des bordures autour de nos paragraphes on s’aperçoit bien que nos
éléments p occupent toute la largeur disponible dans notre page et commencent par défaut sur une nouvelle
ligne.
Les éléments HTML de type block les plus communs sont les suivants :
 L’élément p ;
 Les éléments h1 , h2 , etc. ;
 Les éléments ol et ul ;
 L’élément form (utilisé pour créer des formulaires) ;
 L’élément div (que nous étudierons dans la partie suivante).
Les éléments de type inline

Au contraire des éléments de type block, les éléments de type inline ne vont pas commencer sur une nouvelle
ligne mais s’insérer dans la ligne actuelle.
Les élément de type inline prennent uniquement la largeur qui leur est nécessaire (c’est-à-dire la largeur de
leur contenu).
Par exemple, l’élément HTML strong est un élément de type inline.
Les éléments HTML de type inline les plus communs sont les suivants :
 Les éléments strong et em ;

 L’élément a ;
 L’élément img ;
 L’élément span (que nous allons étudier dans la partie suivante).
Rappel sur l’importance de la connaissance des types d’éléments HTML
Une nouvelle fois, la connaissance du type d’un élément HTML et des différences de comportement entre les
éléments de type inline ou block va être essentielle pour créer une page web fonctionnelle.
En effet, nous n’allons pas pouvoir agir de la même manière en CSS pour manipuler les éléments de type block
et de type inline.
Retenez donc bien cette partie !
Valeur sémantique
Commençons par rappeler une nouvelle fois le rôle du HTML : structurer du contenu et lui donner du sens.
Les éléments HTML nous servent justement à donner du sens à un contenu en indiquant s’il doit être considéré
comme un paragraphe ou un titre, comme important ou non, etc.
A ce titre, les éléments HTML div et span sont un peu spéciaux puisqu’ils ne possèdent aucune valeur
sémantique, c’est-à-dire qu’ils ne servent pas à donner du sens à un contenu.
Le fait que ces deux éléments n’apportent pas de sens à un contenu peut faire penser qu’ils vont à l’encontre
même du rôle du HTML. C’est à moitié vrai, et c’est la raison pour laquelle on évitera tant que possible de s’en
servir généralement.
Toutefois, ces éléments, comme vous vous en doutez, n’ont pas été créés pour rien. Les éléments div et span
vont nous servir de conteneurs et grandement faciliter la mise en forme d’une page HTML à des niveaux
différents.
La différence entre ces deux éléments est que le premier est de type block tandis que le second est de type
inline.
Utilisation de l’élément HTML div

L’élément HTML div est un élément de type block. Cet élément va souvent être utilisé comme conteneur pour
plusieurs autres éléments HTML.Ainsi, nous pourrons appliquer des styles CSS directement à notre élément div
afin de faciliter la mise en forme de notre page.
Il est très commun d’attribuer un attribut class à un élément div afin de pouvoir le cibler plus facilement.
Prenons immédiatement un exemple pratique :
Ici, nous avons créé un div autour de nos deux paragraphes. Ensuite, nous appliquons les styles CSS directement
à notre div.
Utilisation de l’élément HTML span

L’élément HTML span est un élément de type inline.Cet élément va souvent servir de conteneur pour du
contenu textuel. Cet élément va s’avérer pratique dans certains cas où nous aimerions mettre en forme une
portion de texte à l’intérieur d’un élément sans pouvoir la cibler de façon simple.
L’élément span sera souvent utilisé avec un attribut class afin de pouvoir le cibler plus facilement en CSS.
Ici, nous appliquons une couleur de fond verte à notre élément div portant la valeur « green », puis une couleur
de fond bleue plus spécifiquement à notre élément span.

03 Les - Bases - en - CSS

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

03 Les - Bases - en - CSS

Titre original :

Transféré par

Droits d'auteur :

Les sélecteurs CSS simples

Les propriétés CSS

Sélecteurs, propriétés et valeurs en pratique

Les commentaires, le retour

/* Commentaire sur une ligne*/

Les sélecteurs de type élément

Appliquer un style à différents types d’éléments

Préférence et limitation des sélecteurs simples

Qu’est-ce que l’héritage ?

Priorité et ordre en CSS

Quel ordre par rapport à l’emplacement du CSS ?

 Au sein de la balise ouvrante de chaque élément HTML, dans un attribut style ;

Les éléments de type block

Les éléments de type inline

 Les éléments strong et em ;

Rappel sur l’importance de la connaissance des types d’éléments HTML

Utilisation de l’élément HTML div

Utilisation de l’élément HTML span

Centres d'intérêt liés

Vous aimerez peut-être aussi