Blog
Aller au contenu

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. Propriété background-color
    2. Propriété background-image
    3. Propriété background-position
    4. Propriété background-repeat
      1. Valeur repeat-x
      2. Valeur repeat-y
      3. Valeur repeat
      4. Valeur no-repeat
    5. Propriété background-attachment
    6. Propriété color
  2. Propriétés de boîte
    1. Propriété border
    2. Propriété height
    3. Propriété width
    4. Propriété margin
    5. Propriété padding
  3. Propriétés des polices
    1. Propriété font
    2. Propriété font-style
    3. Propriété font-variant
    4. Propriété font-weight
    5. Propriété font-size
    6. Propriété font-family
    7. Propriété vertical-align
  4. Propriétés de texte
    1. Propriété letter-spacing
    2. Propriété line-height
    3. Propriété text-decoration
    4. Propriété text-align
    5. Propriété text-indent
    6. Propriété white-space
    7. Propriété word-spacing
    8. Propriété quotes
  5. Propriétés de positionnement
    1. Propriété clear
    2. Propriété display
    3. Propriété float
    4. Propriété overflow
    5. Propriété position
    6. Propriétés top, right, bottom, left
    7. Propriété z-index
Télécharger ce cours en pdf

👉 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 avec la valeur repeat-x :


/*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 avec la valeur repeat-y :


/*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 avec la valeur repeat :


/*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 avec la valeur no-repeat :




body { 

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

} 


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


Propriété background-attachment :

Il existe trois valeurs possibles :

  • scroll
  • fixed
  • 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
Propriété 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 :

  • Soit en utilisant le nom des couleurs
  • Soit en utilisant une valeur hexadécimale.
  • Soit en utilisant une valeur décimale.
  • Soit en utilisant les coordonnées cylindriques HSL.
Exemple color

Pour connaître la différence entre RGB et HSL.

👉 Propriétés de boîte

Propriété border :

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

  • border-color
  • border-style
  • border-width

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

  • border-left
  • border-bottom
  • border-right
  • border-top
Exemple propriété border
Propriété height :

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

Exemple :



.class{

height: 50px

}



Propriété width :

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

Exemple :



.class{

width: 200px

}


Propriété 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 lui-même dans un élément div (entouré 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.


Propriété 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 à l'élément 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 (FR).

Mais heureusement, avec le troisième niveau, est arrivée la propriété box-sizing (voir rubrique CSS3). 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 :



*{

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.

👉 Propriétés des polices

Propriété 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 :

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

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



.class{

font: 12px/14px

}



Propriété 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 :

  • italic
  • normal
  • oblique

Voici un exemple classique :

Exemple propriété font-style


.class{

font-style: italic

}



Propriété font-variant :

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

Voici un exemple :

Exemple propriété font-variant


.class{

font-variant: small-caps

}



Propriété 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 :

Exemple propriété font-weight


.class{

font-weight: 500

}


Exemple propriété font-weight


.votre_class{

font-weight: 700

} 

/*ou*/

.votre_class{

font-weight: bold

}


Propriété 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 :

  • smaller
  • larger
  • pourcentage

Tailles absolues :

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

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


Propriété 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.


Propriété vertical-align :

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

Elle regroupe de nombreuses valeurs :

  • baseline (valeur par défaut)
  • sub
  • super
  • text-top
  • text-bottom
  • middle
  • top
  • 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

Propriété 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.

Exemple propriété letter-spacing


.class{ 

letter-spacing: .5rem 

}


Exemple propriété letter-spacing


.class{ 

letter-spacing: -.1rem 

}



Propriété 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 l'élément 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)


Propriété 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 :

Exemple avec propriété text-decoration


.votre_class{

text-decoration: underline

}


Exemple de surlignement :

Exemple avec propriété text-decoration


.votre_class{

text-decoration: overline

}


Exemple de texte barré :

Exemple avec propriété text-decoration


.votre_class{

text-decoration: line-through

}


Exemple sans soulignement :

Exemple avec propriété text-decoration


.votre_class{

text-decoration: none

}


Exemple avec plusieurs valeurs :

Exemple avec propriété text-decoration


.votre_class{

text-decoration: underline line-through

}


Aller plus loin : un article sur le sujet


Propriété text-align :

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

  • center
  • justify
  • left
  • right
  • inherit
Exemple propriété text-align
Propriété 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.


Propriété 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 :

  • normal (autorise le retour à la ligne)
  • nowrap (pas de retour)
  • pre (similaire à la balise html <pre>)
  • pre-line
  • pre-wrap
  • 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.


Propriété word-spacing :

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

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

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


Propriété 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 :

Exemple élément html q


<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%,.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 :

  • none : par défaut.
  • left : l'élément va se positionner à gauche.
  • right : l'élément va se positionner à droite.
  • both : l'élément va se positionner en dessous de tous les éléments en position float.
  • 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 :

  • Type <display-outside> :
    • valeur block
    • valeur inline-block
    • valeur run-in
  • Type <display-inside> :
    • valeur flow
    • valeur flow-root
    • valeur table
    • valeur flex
    • valeur grid
    • valeur subgrid
    • valeur ruby
  • Type <display-listitem>
  • Type <display-internal>
  • Type <display-box>
  • Type <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 comprend deux valeurs :

  • flex : correspond à la valeur block
  • 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 :

  • grid
  • 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 (EN)


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 :

  • none : pas de flottement, remet l'élément à sa valeur initiale.
  • left : positionnement à gauche.
  • right : positionnement à droite.
  • 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 :

  • visible : par défaut. Le contenu n'est pas rogné et peut dépasser le bloc.
  • hidden : le contenu est rogné. Il n'y a pas de barre de défilement.
  • scroll : le contenu est rogné. Des barres de défilement apparaissent sur le bloc.
  • 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 :

  • static : valeur par défaut.
  • absolute : permet à un élément de sortir du flux et de se positionner n'importe où sur la page.
  • 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.
  • relative : permet de décaler l'élément par rapport à sa position initiale.
  • sticky : spécificité CSS niveau 3. Permet de fixer un élément. Voir un exemple de la propriété sticky sur ce blog.
  • 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) :

  • absolute
  • fixed
  • relative
  • 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).