Blog

Guillaume Duverger

Développement & graphisme


Accueil» Développement» Apprendre CSS» Propriétés CSS

Sommaire
  1. Propriétés de couleur et de fond
    1. background-color
    2. background-image
    3. background-position
    4. background-repeat
      1. repeat-x
      2. repeat-y
      3. no-repeat
    5. background-attachment
    6. color
  2. Propriétés de boîte
    1. border
    2. height
    3. width
    4. margin
    5. padding
  3. Propriétés des polices
    1. font
    2. font-style
    3. font-variant
    4. font-weight
    5. font-size
    6. font-family
    7. vertical-align
  4. Propriétés de texte
    1. Letter-spacing
    2. Line-height
    3. Text-decoration
    4. Text-align
    5. Text-indent
    6. White-space
    7. Word-spacing
    8. Quotes
  5. Propriétés de positionnement
    1. Clear
    2. Display
    3. Float
    4. overflow
    5. Position
    6. Top, right, bottom, left
    7. z-index

1-Propriétés de couleur et de fond

La propriété background sert, entre autres, à définir l'arrière-plan d'un site web ou encore une image dans un conteneur.

Elle peut être associée avec les propriétés suivantes :


Propriété background-color :

Ci-dessous, un fond bleu ciel :

Exemple background-color

body {background: SkyBlue}  /*expression raccourcie*/
body {background-color: SkyBlue} /*expression recommandée*/

Par défaut, si vous ne renseignez pas de couleur, le background est transparent. Il est possible de renseigner une couleur de différentes manières (voir plus bas la propriété color).


Propriété background-image :

/*expression raccourcie*/

body{

background: url('dossier/votre-image.jpg') no-repeat

}   


/*expression recommandée*/

body{

background-image: url('dossier/votre-image.jpg') no-repeat

} 


On constate qu'une image apparaît en arrière-plan (haut à gauche par défaut ; top left). La valeur initiale est none.

Exemple background-image

Il faut impérativement renseigner correctement le chemin de l'image via l'url. Par ailleurs, il est possible de placer des images au format gif, jpg, png, svg...


Propriété background-position :

body { 

background: url( "dossier/votre-image.jpg" ) bottom right no-repeat 

} /*expression raccourcie*/

body { 

background-image: url( "dossier/votre-image.jpg" );
background-position: bottom right;
background-repeat: no-repeat 

}/*expression recommandée*/

body { 

background: url( "dossier/votre-image.jpg" ) 100% 100% no-repeat 

}
/*variante : on indique la position à l'aide de chiffres*/

Exemple background-position

En appliquant le code ci-dessus, l'image se trouve bien en bas à droite du cadre.


Propriété background-repeat :

Répéter une image :


body{

background: url('dossier/votre-image.jpg') repeat

}   /*expression raccourcie*/

body{

background-image: url('dossier/votre-image.jpg') repeat

} /*expression recommandée*/

Image originale :

Motif exemple background-repeat

Comme vous pouvez le constater, l'image originale se répète en arrière-plan dans le cadre ci-dessous :

Exemple background-repeat

Répéter une image horizontalement :


/*horizontale*/

body { 

background: url( 'dossier/votre-image.jpg' ) repeat-x 

}   /*expression raccourcie*/

body { 

background-image: url( 'dossier/votre-image.jpg' ) repeat-x 

} /*expression recommandée*/


Répéter une image verticalement :


/*verticale*/
body { 

background: url( 'dossier/votre-image.jpg' ) repeat-y

}   /*expression raccourcie*/

body {

background-image: url( 'dossier/votre-image.jpg' ) repeat-y

} /*expression recommandée*/




Répéter une image horizontalement et verticalement :


/*horizontale et verticale*/

body { 

background: url( 'dossier/votre-image.jpg' ) 

} /*expression raccourcie*/

body { 

background-image: url( 'dossier/votre-image.jpg' ) repeat 

}/*expression recommandée*/


Ne pas répéter une image :




body { 

background: url( 'dossier/votre-image.jpg' ) no-repeat

} 


NB : X = axe horizontal. Y = axe vertical.


Background-attachment :

Il existe trois valeurs possibles :

  1. scroll
  2. fixed
  3. inherit

La propriété background-attachment sert à déterminer si une image de fond suit le déroulement du contenu ou bien si elle reste fixe. Par défaut, la valeur est scroll, ce qui signifie que l'image suivra le déroulement de la page.

Exemple avec la valeur fixed
Color :

La propriété color permet de définir tout simplement une couleur.


.votre_class{color:black}

Dans le code ci-dessus, la couleur sera donc noire (pour être précis, elle sera de valeur noire, le noir comme le blanc étant des valeurs et non des couleurs)

Il est possible d'écrire de différentes manières la couleur d'un élément :

  1. -Soit en utilisant le nom des couleurs
  2. -Soit en utilisant une valeur hexadécimale.
  3. -Soit en utilisant une valeur décimale.
  4. -Soit en utilisant les coordonnées cylindriques HSL.
Exemple color

Pour connaître la différence entre RGB et HSL. Voir également la rubrique CSS3 de ce blog.

2-Propriétés de boîte

Border :

La propriété border (bordure en français) permet de placer une bordure autour d'un élément. Elle regroupe différentes propriétés :

  1. border-color
  2. border-style
  3. border-width

Par ailleurs, on peut renseigner la propriété border avec :

  1. border-left
  2. border-bottom
  3. border-right
  4. border-top
Exemple propriété border
Height :

La propriété height désigne la hauteur d'un élément.

Exemple :


.votre_class{height:50px;}


Width :

La propriété width désigne la largeur d'un élément.

Exemple :


.votre_class{width:200px;}


Margin :

Il est possible de définir l'espacement d'un élément qui le séparera des autres éléments avec la propriété margin.

Pour exemple, on souhaite mettre une marge de 20 pixels sur chaque bord à l'élément <p> qui se trouve dans la div (entourée d'une ligne noire) ci-dessous :

Exemple avec propriété margin

Nous aurons une marge de 20 pixels en haut, en bas, à droite et à gauche de la balise <div>.

On peut par ailleurs spécifier une marge différente pour chaque côté, comme par exemple :


/*nous obtenons une marge de 20 pixels en haut et en bas, et de 10 pixels à gauche et à droite.*/
p{margin:20px 10px 20px 10px}

La propriété margin est surtout très pratique pour centrer un élément.


Padding :

La propriété padding se différencie de margin en ceci que le padding permet un espacement à l'intérieur même d'un élément et non à l'extérieur comme le fait la propriété margin.

Reprenons l'exemple plus haut et ajoutons à l'élément <p> un padding de 10px sur chaque côté.

Nous avons donc défini une marge extérieure de 20 pixels et une marge intérieure de 10 pixels à l'élément <p> par rapport à la <div> dans lequel il se trouve.

Dans le cas où vous allez définir une largeur et une hauteur à un élément de type block, pensez bien que les marges vont diminuer la taille originale. C'est ce qu'on appelle le box model.

Mais heureusement, avec le CSS3, est arrivée la propriété box-sizing. L'espacement ainsi que la bordure d'un élément n'augmentent plus sa largeur.

A noter qu'il peut y avoir des rendus différents selon les navigateurs, c'est pourquoi il est recommandé de mettre ce code dans votre feuille de style via le sélecteur universel symbolisé par une astérisque :


/*On met ainsi les compteurs à zéro et on travaille sur une base saine et vierge.*/
*{margin:0;padding:0}

/*OU*/

*{box-sizing:border-box}
body{margin:0}

Notez bien que l'ensemble de votre feuille de style va être affectée par ce bout de code. Chaque propriété va hériter des valeurs que vous allez appliquer via le sélecteur universel.

3-Propriétés des polices

Font :

La propriété font (police de caractères en français) permet de définir une police au sein d'un document web.

Elle est associée aux propriétés suivantes :

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size
  5. line-height
  6. font-family

On peut définir la taille de la police ainsi que la taille du line-height dans sa version raccourcie comme ceci :


.votre_class{font:12px/14px}


Font-style :

La propriété font-style permet de définir l'orientation de la police.

On distingue trois valeurs à la propriété font-style :

  1. italic
  2. normal
  3. oblique

Voici un exemple classique :

Ceci est un texte en italique

.votre_class{font-style:italic}


Font-variant :

La propriété font-style permet de définir la police en petites majuscules.

Voici un exemple :

ceci est un texte en petites majuscules

.votre_class{font-variant:small-caps}


Font-weight :

La propriété font-weight permet de définir la graisse de police d'un élément.

On peut aussi écrire en valeurs numériques : entre 100 et 900, 500 correspond à la graisse par défaut et 700 à gras.

Par défaut, voici ce que l'on obtient :

Ceci est un texte avec graisse par défaut

.votre_class{font-weight:500}

Ceci est un texte en gras


.votre_class{font-weight:700} 

/*ou*/

.votre_class{font-weight:bold}


Font-size :

La propriété font-size permet de définir la taille de la police.

Elle peut s'écrire avec différentes unités de longueur comme em, rem, px, % (pourcentage)... (voir unités de longueur)

On différencie deux types de taille : taille relative et taille absolue.

Tailles relatives :

  1. smaller
  2. larger
  3. pourcentage

Tailles absolues :

  1. xx-small
  2. x-small
  3. small
  4. medium
  5. large
  6. x-large
  7. xx-large

Les tailles absolues dépendent du navigateur et de l'OS (système d'exploitation).


Font-family :

La propriété font-family permet de définir une ou plusieurs polices de caractères. Elle s'écrit de cette manière :


body{font-family:"Roboto",Helvetica,sans-serif}

Si l'on indique plusieurs polices, c'est au cas où l'internaute ne possèderait pas la police spécifiée (ici "Roboto") sur son ordinateur, il aura alors à la place la police Helvetica. La police que l'on met entre guillemets est celle qui est prioritaire.


Vertical-align :

La propriété vertical-align désigne comment doit se positionner un élément verticalement à l'intérieur d'une boîte en ligne (<span> par exemple) ou à l'intérieur d'une cellule d'un tableau (table) mais pas dans un élément de type block.

Elle regroupe de nombreuses valeurs :

  1. baseline (valeur par défaut)
  2. sub
  3. super
  4. text-top
  5. text-bottom
  6. middle
  7. top
  8. bottom

Elle peut être associée avec des unités de longueurs (valeurs positives ou négatives) telles que : px, %, ex, rem, em ...

Dans le cas d'un tableau :

Exemple propriété vertical-align dans un tableau

Dans le cas d'un bloc en ligne :

Exemple propriété vertical-align

Propriétés du texte

Letter-spacing :

La propriété letter-spacing permet de définir un espacement entre chaque lettre d'un mot.

Vous pouvez renseigner l'espacement en px, en em, en rem... mais pas en pourcentage. Les valeurs négatives sont acceptées.

Letter spacing

.votre_class{ 

letter-spacing: .5rem 

}

Letter spacing

.votre_class{ 

letter-spacing: -.1rem 

}


Line-height :

La propriété line-height sert à définir la hauteur d'un élément. Elle peut s'appliquer à toute les balises XHTML de type inline.

Exemple sans line-height : (le texte se trouve en haut de la div)

Exemple sans propriété line-height

Exemple avec line-height :

Exemple avec propriété line-height

.votre_class{height:60px;line-height:60px}

/*ou*/

.votre_class{line-height:60px}

Vous constatez que le texte est désormais centré verticalement.

Comprendre line-height (FR)


Text-decoration :

La propriété text-decoration permet de personnaliser l'apparence d'un texte, d'un titre, d'un lien.

On utilise souvent cette propriété pour enlever le trait sur un lien hypertexte.

Exemple de soulignement :

texte souligné

.votre_class{text-decoration:underline}

Exemple de surlignement :

texte surligné

.votre_class{text-decoration:overline}

Exemple de texte barré :

texte barré

.votre_class{text-decoration:line-through}

Exemple sans soulignement :

texte sans soulignement

.votre_class{text-decoration:none}

Exemple avec plusieurs valeurs :

texte avec plusieurs valeurs

.votre_class{text-decoration:underline line-through}

Aller plus loin : un article sur le sujet


Text-align :

La propriété text-align permet l'alignement d'un texte. Elle regroupe cinq valeurs :

  1. center
  2. justify
  3. left
  4. right
  5. inherit
Exemple propriété text-align
Text-indent :

La propriété text-indent permet de définir le retrait à appliquer à la première ligne d'un bloc de texte. Elle sera uniquement appliquée à la première ligne de texte :

Exemple propriété text-indent

.class { 

  text-indent: valeur; 
 
}

Vous pouvez utiliser une valeur négative pour appliquer un retrait à la première ligne, comme par exemple si vous souhaitez masquer un texte en le remplacant par une image par exemple.

Cette propriété permet également de personnaliser l'apparence d'un texte. Il est possible de définir plusieurs décorations en énumérant et séparant d'un espace.


White-space :

La propriété white-space permet de gérer les espaces et les retours à la ligne d'un bloc de texte par rapport à son conteneur.

Elle regroupe les valeurs suivantes :

  1. normal (autorise le retour à la ligne)
  2. nowrap (pas de retour)
  3. pre (similaire à la balise html <pre>)
  4. pre-line
  5. pre-wrap
  6. inherit

Les propriétés word-break et word-wrap peuvent également être employées pour déterminer comment s'effectuent les retours à la ligne d'un texte au sein d'un élément.


Word-spacing :

La propriété word-spacing peut prendre une valeur :

  1. numérique positive ou négative suivie de px ou % ou pt ou em. Le pixel est la valeur par défaut.
  2. normal, valeur par défaut, dépend du navigateur.
  3. inherit, hérite de son parent.

L'espace va dépendre du navigateur et de la justification du texte (text-align).


Quotes :

La propriété quotes permet de modifier le rendu visuel des guillemets dans les éléments HTML de citations.

Pour cela, une ou plusieurs paires de guillemets doivent être précisées. De base, cette propriété se présente de cette manière :


q {
quotes: " « "  " » ";
}

L'élément HTML <q> (quote, à ne pas confondre avec la propriété quotes) indique que le contenu d'un élément est une citation courte, ne necessitant pas plusieurs paragraphes.

Voici par défaut le rendu de l'élément <q> dans les navigateurs :

Rien ne sert de courir, il faut partir à point.

<q>Rien ne sert de courir, il faut partir à point</q>

La propriété quotes peut prendre quatre valeurs via la propriété content :

  1. open-quote
  2. close-quote
  3. no-open-quote
  4. no-close-quote

Pour une citation plus longue, il vous faudra utiliser l'élément HTML <blockquote> :

Exemple propriété Quotes

<blockquote cite="http://www.citation-celebre.com/citations/15912">
<p>Le jour viendra où les personnes comme moi regarderont le meurtre des animaux comme ils regardent aujourd'hui le meurtre des êtres humains.</p>
</blockquote>  


q:before{
content:open-quote
}
q:after{
content:close-quote
}
q{
font-family:Georgia,serif;
font-style:italic;
color:#7A5FFF
}
blockquote{
color:hsla(0, 0%, 15%, 0.8);
padding:1rem;
font-style:italic;
background:#ddd;
max-width:50%;
margin:1.25rem auto;
position:relative
}
blockquote p{
max-width:90%;
margin-left:5%
}
blockquote:before,
blockquote:after{
font-family:Georgia,serif;
font-size:4rem;
position:absolute
}
blockquote:before{
top:0;
left:10px;
content:'\201C'
}
blockquote:after{
bottom:0;
right:10px;
margin-bottom:-1.25rem;
content:'\201D'
}


Ressources sur le sujet :

Propriété CSS quotes (FR)

Attribut <cite> et élément <blockquote> (EN)

Quelques exemples pour personnaliser <blockquote> (EN)

Propriété de positionnement :

Propriété Clear :

La propriété clear fonctionne sur des éléments flottant (de type block) et permet à un élément de se positionner en dessous par rapport à un élément précédent (une sorte de retour à la ligne forcée). Elle comporte plusieurs valeurs telles que :

  1. none : par défaut.
  2. left : l'élément va se positionner à gauche.
  3. right : l'élément va se positionner à droite.
  4. both : l'élément va se positionner en dessous de tous les éléments en position float.
  5. inherit : même valeur que celle de l'élément parent.
Exemple clear
Propriété display :

La propriété display définie dans le premier niveau CSS, puis revue dans le deuxième (ajout de la valeur inline-block), en module dans le troisième, permet de définir le type de rendu que pourra avoir un élément.

La propriété display est répartie en six catégories, chacune ayant ses propres valeurs :

  1. <display-outside>
    1. valeur block
    2. valeur inline-block
    3. valeur run-in
  2. <display-inside>
    1. valeur flow
    2. valeur flow-root
    3. valeur table
    4. valeur flex
    5. valeur grid
    6. valeur subgrid
    7. valeur ruby
  3. <display-listitem>
  4. <display-internal>
  5. <display-box>
  6. <display-legacy>

Dans le module Flexible Box Layout, qui se présente comme un mode de mise en page permettant la disposition d'éléments de manière dynamique (flexible) en deux dimensions, la propriété display qui comprend deux valeurs :

  1. flex : correspond à la valeur block
  2. inline-flex : correspond à la valeur inline-block

Dans le CSS Grid layout Module Level 1 (EN), les deux valeurs de la propriété display sont :

  1. grid
  2. inline-grid

Dans le CSS Display Module Level 3, de nouvelles valeurs ont été ajoutées telles que run-in, contents, flow, flow-root.

Article sur display contents


Propriété Float :

En utilisant la propriété float sur un élément, on indique à celui-ci qu'il doit être retiré du flux pour se positionner selon la valeur qu'on lui aura attribuée.

La propriété float peut prendre les valeurs suivantes :

  1. none : pas de flottement, remet l'élément à sa valeur initiale.
  2. left : positionnement à gauche.
  3. right : positionnement à droite.
  4. inherit : hérite de son parent.
Exemple float

Article (EN) complet sur la propriété float.


Propriété Overflow :

La propriété overflow permet de gérer le cas où un contenu dépasse et atteint la limite fixée en hauteur ou en largeur d'un bloc. Elle comprend les valeurs suivantes :

  1. visible : par défaut. Le contenu n'est pas rogné et peut dépasser le bloc.
  2. hidden : le contenu est rogné. Il n'y a pas de barre de défilement.
  3. scroll : le contenu est rogné. Des barres de défilement apparaissent sur le bloc.
  4. auto : les barres de défilement sont affichées uniquement si le contenu dépasse la taille du bloc.

Propriété Position :

Comme son nom l'indique, la propriété position permet de positionner un élément. Elle peut prendre des valeurs telles que :

  1. static : valeur par défaut.
  2. absolute : permet à un élément de sortir du flux et de se positionner n'importe où sur la page.
  3. fixed : permet la même chose que la valeur absolute, à la différence que l'élément va suivre le défilement de la page.
  4. relative : permet de décaler l'élément par rapport à sa position initiale.
  5. sticky : spécificité CSS3 (support Firefox, Chrome, Opera et Safari). Permet de fixer un élément. Voir un exemple de la propriété sticky sur ce blog.
  6. inherit : hérite de son parent.

Propriétés Top, right, bottom, left :

Ces quatre propriétés fonctionnent avec ces valeurs (définitions ci-haut) :

  1. absolute
  2. fixed
  3. relative
  4. sticky

Ainsi, allons-nous placer des éléments comme sur cet exemple :

Exemple float


<div class=exemple>
<div class="haut-gauche image"></div>
<div class="haut-droite image"></div>
<div class="centre image"></div>
<div class="bas-gauche image"></div>
<div class="bas-droite image"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque dignissim mattis ligula. 
Donec dictum lectus eu magna vehicula, sed euismod arcu ultrices. 
Phasellus commodo enim sed gravida facilisis. Nunc vitae augue lorem. 
Vestibulum eleifend ipsum pulvinar quam volutpat ornare. 
Nunc iaculis ligula ac semper tempus. 
Donec id tortor nec libero laoreet dapibus a eget tellus. 
In vitae neque enim. 
Vivamus vulputate, neque ut facilisis dignissim, leo dolor vulputate tortor, molestie condimentum ex nisi non leo.</p>
</div>




.exemple {

display: grid;
place-items: center;
height: 500px;
position: relative

}

.exemple div{position: absolute}

.image{

background: url(image);
height: 73px;
width: 100px

}

.haut-gauche {

left: 0;
top: 0;

}

.haut-droite{

top: 0;
right: 0

}


.centre{

left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto}

.bas-droite{

bottom: 0;
right: 0

}

	
.bas-gauche{

left: 0;
bottom: 0

}
	


Propriété z-index :

Cette propriété permet l'empilement d'éléments et ne fonctionne que sur des éléments positionnés (voir la propriété position plus haut), soit :

  • -relative
  • -absolute
  • -fixed
  • -sticky

La propriété z-index repose également sur le principe du contexte d’empilement.

On parle d'empilement car dans un document HTML les éléments sont disposés les uns après les autres dans le flux. Aucun élément n'empiète sur l'autre. Mais avec la propriété z-index, il est possible de contrôler comment un élément va se positionner sur l'axe Z.

Pour information, un élément HTML est généré en trois dimensions : axe X, axe Y et axe Z.

Avec le grid layout, dont la disposition est bidimensionnelle, l'utilisation de cette propriété semble plus appropriée.

Exemple z-index


<div class=exemple>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
</div>




.exemple {
	
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr
	
}
	
.a { 
	
background-color: crimson;	
height: 80px;
grid-column: 1 / span 2; 
grid-row: 2;
align-self:end
	
}

.b { 
	
height: 80px;
width: 300px;
background-color: cornflowerblue;	
grid-column: 1; 
grid-row: 1; 
z-index: 1;
place-self: center
	
}
	
.c { 
height: 80px;	
background-color: coral;
grid-column: 2; 
grid-row: 1; 
align-self: start; 
margin-left: -20px
	
}
	
.d { 
	
height: 100px;
width: 100px;
background-color: limegreen;
margin-left: -30px;
grid-column: 2; 
grid-row: 2; 
place-self: center; 
}
	
.e { 

height: 100px;
width: 200px;
background-color: orchid;
grid-column: 1 / span 2; 
grid-row: 1 / span 2;
place-self: center
	
}

Le fonctionnement de cette propriété peut paraître relativement simple à comprendre de prime abord mais il existe des subtilités que je vous invite à connaître en lisant cet article (FR).