LES BASES DU CSS
### Cours de CSS : Maîtrisez le Style de vos Pages Web
#### Description du cours :
Ce cours vous guide à ...
Voir plus
- Description
- Curriculum
- FAQ
- Notice
- Examens
Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. Les bases des CSS présentent ce qu’il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l’écran ? Comment décorer ma page web avec une image ou une couleur d’arrière-plan ?
Donc, que sont les CSS, réellement ?
De la même façon que HTML, CSS n’est pas vraiment un langage de programmation. C’est un langage de feuille de style, c’est-à-dire qu’il permet d’appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d’une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :
p { color: red; }Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nomstyle.cssdans votre répertoirestyles.
Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n’affectera pas l’affichage de la page HTML dans la navigateur (si vous n’avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l’article Gérer les fichiers et Les bases du HTML pour savoir par où commencer).
- Ouvrez votre fichier
index.htmlet copiez la ligne suivante quelque part au sein de l’élémenthead(c’est-à-dire entre les balises<head>et</head>) :
[/vc_column_text]
<link href="styles/style.css" rel="stylesheet" type="text/css">- Sauvegardez
index.htmlpuis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :
Si le texte de votre paragraphe s’affiche en rouge, félicitations ! Vous venez d’écrire votre premier CSS fonctionnel !
Anatomie d’une règle CSS
Regardons un peu plus en détails ce que nous avons écrit en CSS : 
Cette structure s’appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment :
Cette structure s’appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment :
- Sélecteur
- C’est le nom de l’élément HTML situé au début de l’ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l’occurence, les éléments
p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur. - Déclaration
- C’est une règle simple comme
color: red;qui détermine les propriétés de l’élément que l’on veut mettre en forme. - Propriétés
- Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas,
colorest une propriété des élémentsp). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS. - Valeur de la propriété
- À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d’autres pour une propriété donnée (par exemple, il y a d’autres couleurs que
redpour la propriétécolor).
Les autres éléments importants de la syntaxe sont :
- chaque ensemble de règles, à l’exception du sélecteur, doit être entre accolades (
{}). - pour chaque déclaration, il faut utiliser deux points (
:) pour séparer la propriété de ses valeurs. - pour chaque ensemble de règles, il faut utiliser un point-virgule (
;) pour séparer les déclarations entre elles.
Ainsi, si on veut modifier plusieurs propriétés d’un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :
p {
color: red;
width: 500px;
border: 1px solid black;
}
color: red;
width: 500px;
border: 1px solid black;
}
Sélectionner plusieurs éléments
Il est aussi possible de sélectionner plusieurs types d’éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :
p,li,h1 {
color: red;
}
color: red;
}
Les différents types de sélecteurs
Il y a différents types de sélecteurs. Dans les exemples précédents, nous n’avons vu que les sélecteurs d’élément qui permettent de sélectionner les éléments HTML d’un type donné dans un document HTML. Mais ce n’est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents :
FAQ 1
Faq Content 1
FAQ 2
Faq Content 2
Productivity Hacks to Get More Done in 2018
— 28 February 2017
- Facebook News Feed Eradicator (free chrome extension) Stay focused by removing your Facebook newsfeed and replacing it with an inspirational quote. Disable the tool anytime you want to see what friends are up to!
- Hide My Inbox (free chrome extension for Gmail) Stay focused by hiding your inbox. Click "show your inbox" at a scheduled time and batch processs everything one go.
- Habitica (free mobile + web app) Gamify your to do list. Treat your life like a game and earn gold goins for getting stuff done!
Étoiles 5
3
Étoiles 4
0
Étoiles 3
3
Étoiles 2
0
Étoiles 1
0
Payement une fois / Durée de la formation 1 mois / 2 fois par Semaine en Présentiel
Course details
Durée
10 hours
Conférences
5
Vidéo
9 hours
Quizz
1
Niveau
Avancé
Accès complet à vie
Accès sur le mobile et la télévision
Popular courses
