Tutoriel CSS

CSS

Découvez les bases du CSS dans ce tutoriel.

HTML HTML5 Dreamweaver Bootstrap PHP

Les blocs en CSS

L'écart entre les mots

word-spacing : 10px;

La taille peut être exprimée en px, pt, in, cm, mm, pc, em, ex %

Exemple

Ecart entre les mots de 20 px

Code CSS

.ecart-entre-les-mots{
  word-spacing : 20px; 
 }

Code HTML

<p class="ecart-entre-les-mots">Ecart entre les mots de 20px</p>

L'écart entre les lettres

letter-spacing : 10 px;

La taille peut être exprimée en : px, pt, in, cm, mm, pc, em, ex %

Exemple

Ecart entre les lettres de 10 px

Code CSS

.ecart-entre-les-lettres{
  letter-spacing : 10px; 
 }

Code HTML

<p class="ecart-entre-les-lettres">Ecart entre les lettres de 10px</p>

L'alignement du texte

text-align : center;

text-align peut prendre ces différentes valeurs : left, center, right, justify

Exemple

Texte aligné au centre

Code CSS

.texte-aligne-au-centre{
  text-align : center;
}

Code HTML

<p class="texe-aligne-au-centre">Texte aligné au centre</p>

Le décalage de la premiére ligne d'un texte dans un bloc

text-indent : 50 px;

La propriété de feuille de style css text-indent permet de spécifier le décalage la premiére ligne d'un texte.

La propriété de feuille de style text-indent css peut pendre une valeur

  • numérique positive ou négative suivie de px ou % ou pt ou em. 0 est la valeur par défaut.
  • inherit, hérite de la propriété de son parent (css 2)

La propriété de feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".

Exemple

La propriété de feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".La propriété de feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".

Code CSS

.decalage-texte-bloc{
  text-indent : 50px;
}

Code HTML

<p class="decalage-texte-bloc">La propriété de feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".La propriété de feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".</p>

L'affichage d'un élément (disposition)

display : inline;

La propriété de feuille de style css display permet de spécifier la maniére dont un élément est affiché.

La propriété de feuille de style display css peut prendre la valeur de :
- none, le bloc ne sera pas affiché.
- inline, le bloc sera considéré comme étant un seule ligne (sauf nets version <6)
- block, spécifie un bloc.
- inline-block correspond à un élément inline avec un comportement bloc (non w3c). Compatible avec Internet Explorer, Opéra et Safari pour FireFox < 2 utiliser -moz-inline-box.
- list-item le bloc sera affiché sous forme de liste, attention les versions netscape <6 font un décalage
- run-incrée un bloc ou une ligne, selon le contexte, ne semble pas implémenté sauf pour le navigateur opéra et safari.
- compact crée un bloc ou une ligne, selon le contexte, ne semble pas implémenté sauf pour le navigateur opéra et safari.
- marker crée un marqueur pour les listes par exemple ou les feuilles de styles auditives peut être considéré comme inline
- table correspond à 'table'
- inline-table correspond à 'table'
- table-row-group correspond à 'tboby'
- table-header-group correspond à 'thead'
- table-footer-group correspond à 'tfoot'
- table-row correspond à 'tr'
- table-column-group correspond à 'colgroup'
- table-column correspond à 'col'
- table-cell correspond à 'td', 'th'
- table-caption correspond à 'caption'

Exemple avec 2 blocs de paragraphe sur la même ligne

Texte 1

Texte 2


Code CSS

.bloc-inline{
  display:inline;
  margin:5px;
  background-color: #FCF
}

Code HTML

<p class="bloc-inline">Texte 1</p> <p class="bloc-inline">Texte 2</p>