Il vaut mieux avoir lu d'abord l'article suivant : http://iv-oam.blogspot.fr/2012/10/le-code-html-les-bases.html

Qu'est-ce que "CSS" ?

Le code CSS est le code qui détermine le design du blog. C'est un langage compris par tous les navigateurs

Le CSS se présente comme une succession de lignes et chaque ligne dit au navigateur comment afficher un élément. Le CSS doit respecter une syntaxe (comme tout langage informatique ou non).

Les éléments

Chaque élément est identifié par un nom ou plusieurs noms. On mettre entre accolades le style.

Éléments HTML génériques : ils sont présent sur toutes les pages HTML.

  • body{} : la page en entier
  • a{} : les liens
  • a:hover{} : les liens survolés
  • p{} : les paragraphes
  • h1{} - h2{} - h3{} - h4{} : les sous-titres de niveau 1, 2, 3, 4

Élément avec une classes de style ou identifiant

Pour mettre en forme un élement, on utilise les classes de style. Par exemple pour un bloc html "div", on va utiliser la classe "menu" : <div class = 'menu'></div>

Côté CSS, il faudra mettre un point devant le nom de la classe :

.menu{}

On peut aussi utiliser un identifiant. <div id = 'menu'></div>. Il faudra utiliser le signe dièse dans le CSS :

#menu{}

La virgule

Il est courant de mettre deux éléments à la suite si un élément se trouve dans un autre. Exemple : les liens du menu :

#menu a{}

Il est possible aussi de déclarer le style de plusieurs éléments différents en les séparant par une virgule :

#menu, a{}

La virgule est très important : dans le premier cas, on modifie le style des liens dans le menu, dans le second cas, on modifie le style de tous les liens sur la page et celui de tout le menu (texte simple et liens)

Règles d'écriture

  • Ne pas oublier le point (pour les classes) ou le signe dièse en début de ligne (pour les identifiants)
  • Ne pas oublier les accolades (ouvrantes et fermantes)
  • Ne pas faire de fautes d'orthographe ou de frappe : le code ne serait plus reconnu
  • Insérer des commentaires libres entre les lignes ainsi :
  • /* Commentaire */

Les propriétés

Modifier le style d'un élément, c'est changer sa taille, sa couleur, etc. La couleur et la taille sont des propriétés. Pour chaque propriété, on détermine une valeur : le rouge pour la couleur, 15 pixels pour la taille par exemple. Au niveau du code, il faut connaître le nom standardisé de la propriété (en anglais). La règle d'écriture est la suivant

.maclasse{propriete1:valeur;propriete2:valeur;}

Quelques propriétés usuelles :

A

B

background. Fond. Couleur ou image. ex : background:red ou background-image:url(http://hebergeur.com/image.jpg) ou background-image:url(http://hebergeur.com/image.jpg) red

background-color. Fond de type couleur. Code couleur #CCCCCC ou couleurs de base en anglais : gray, black, blue, green, white, yellow, red. exemple de valeur : red

background-image. Lien de l'image choisi comme fond. ex : url(http://hebergeur.com/image.jpg)

border. Bordure. Dans l'ordre : épaisseur en pixels, style et couleur. Ex : 2px solid red

border-width. Epaisseur de la bordure en pixels

border-style. Style de la bordure. Solid (trait continu), dotted (pointillé), dashed (trait discontinu), double (double)

border-top. Bordure haut // border-right. Bordure droite // border-bottom. Bordure bas // border-left. Bordure gauche

C

color. Couleur (du texte généralement). Code couleur #CCCCCC ou couleurs de base en anglais : gray, black, blue, green, white, yellow, red

F

font-style. Effet sur le texte. Normal / italic / oblique

font-weight. Epaisseur du texte. 100, lighter, 200, 300, 400, 500, 600, 700, bold, 800, 900, bolder.

font-size. Taille du texte en pixels ou %. ex : 12px / 110%

font-family. Police du texte. ex : georgia / 'Police perso'

H

height. Hauteur en pixels ou %

L

line-height. Hauteur de la ligne en pixels. Ex : 16px

list-style. Style de la liste.

M

margin. Marges extérieures haut, droite, gauche et bas en pi. Ex : 16px 2% 5px 1%

margin-top : marge haut // margin-right : marge droite // margin-bottom : marge bas // margin-left : marge gauche

O

overflow. Gestion des dépassements. hidden (cacher), scroll (barre de défilement), visible (ce qui est dépasse est visible)

P

padding. Marges intérieures haut, droite, gauche et bas en pixels. Ex : 16px 2% 5px 1%

padding-top : marge haut // padding-right : marge droite // padding-bottom : marge bas // padding-left : marge gauche

T

text-decoration. Décoration du mot. Underline (soulignement) ou none (rien)

text-transform. Transformation du texte. Capitalize (première lettre en capitales), uppercase (majuscules), none (normal)

W

width. Largeur en pixels ou %

Move your body

Le body c'est tout le blog. Exemple :

body {color: #232323; font-family:Georgia; font-size: 13px; line-height: 20px;background-color:white;}
  • color : couleur par défaut soit en toutes lettres (white, black, red, blue, yellow) soit avec un code (voir http://code-couleur.com/index.html)
  • font-family : la police des textes
  • font-size : la taille du texte
  • line-height : la hauteur des lignes
  • background-color : fond du blog

Personnalisation

Pour éviter de surcharger le blog en couleurs et polices différentes et pour gérer plus facilement le CSS, le mieux est de s'en tenir à une police et une couleur principale dans le body et les éléments principaux comme les liens.

Liens en rouge partout, sans surlignement :

 a{color:red;text-decoration:none;}

Ensuite, on personnalise certains éléments. Exemple :

Titre d'un article affiché seul :

 .article h1 {font-family:'book antiqua';text-align:center;color:#232323; font-size: 25px;}

text-align : alignement (center pour centre, left pour gauche, right pour droite)

Avec ces quelques bases, on peut déjà modifier beaucoup de choses. Dans le CSS, vous trouverez de nombreuses lignes et il est souvent difficile de savoir à quoi elles correspondent surtout dans la nouvelle version. Exemple :

 .articles .meta {text-align:right;border-bottom:1px solid #667882; padding-bottom:3px;margin-bottom:25px;}

Le mieux est d'utiliser l'option "examiner l'élément" sur le navigateur Mozilla ou "inspecter l'élément" sur Chrome, outil simple qui donne le nom de chaque élément.

Voir l'exemple suivant :