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]; 
}

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

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;

• 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