HTML + CSS, sélecteurs

Le sélecteur permet de cibler les éléments dans le document. Les propriétés et valeurs permettent de définir l'habillage de ces éléments.

[SELECTEUR] {
[PROPRIETE]: [VALEUR];
}

Sélecteur

Pour viser les balises d'un type particulier, il suffit d'écrire son nom!

Exemple: p.

Pour viser les balises ayant une classe particulière, il suffit d'écrire le nom de la classe précédée d'un point.

Exemple: .nomdelaclasse

Pour viser les balises ayant un identifiant particulier, il suffit d'écrire le nom de l'identifiant précédé d'un dièse.

Exemple: #nomdelidentifiant

Il est possible de combiner les sélecteurs : Séparés par des virgules pour cumuler les éléments (“et”).

Exemple: h1, p, .article

Séparés par des espaces pour cibler l'enfant d'une hiérarchie (“dans”).

Exemple: div .article h2

Propriétés

Il existe de nombreuses propriétés, quelques exemples.

commentaire: /* commentaire */

background:

image d'arrière-plan: background-image: url(nom.jpg);

taille arrière-plan: background-size: 100% , 100%;

défilement arrière-plan: background-attachment: fixed;

font:

taille de font: font-size: 30px;

famille de font: font-family: arial, sans-serif;

text:

text-align: center justify left right;

marge extérieure:

margin: margin: 30px;

marge intérieure:

padding: 20px;

bordure:

border: 4px solid black;

/* commentaire */
background-image: url(nom.jpg);
background-size: 100% , 100%;
background-attachment: fixed;
font-size: 30px;
font-family: arial, sans-serif;
text-align: center justify left right;
margin: 30px;
padding: 20px;
border: 4px solid black;

Mémento CSS

http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-proprietes-css

http://www.css-faciles.com/proprietes-css-liste-alphabetique.php