On a besoin parfois d’affecter un ensemble de  styles à chaque fois qu’on a besoin ! Pour répondre à cette nécessité  on utilise ce qu’on appelle les classes. Le rôle d’une classe est de stocker  une quantité de codes CSS pour être réutilisée par la suite.

Déclaration d’une classe css

Une classe est déclarée à l’aide de son nom précédé d’un point  “.”

Exemple :

.maClass { font-family: arial ;
font-size: 28 ;
font-weight: bold ;
color:red ;
}

Exemple :

C’est une classe permettant d’ecrire avec la police arial, en gras taille=18 et en couleur rouge. Mais comment peut – on appliquer cette classe ? Le problème est simple : il suffit d’ajouter à l’interieur de la balise à laquelle on veut appliquer la classe :

 class=”nom de la classe”

dans notre cas c’est :

class=”maClasse”

Exemple :

<H1 class="maClass">

Et dans ce cas le code de la classe alise maClass sera appliqué à la balise H1

En appliquant cette classe à un titre on obtient :

2 – Les ID CSS

Les ID en CSS sont semblables aux class CSS, la seule différence c’est que les class sont utilisable autant de fois qu’on en a besoin, tandis que les ID ne sont utilisable qu’une seule fois. La déclaration d’un ID en CSS se fait à l’aide de son nom précédé du symbole  ” # “

Exemple :

#myID{
width: 300px;
border-style:solid;
border-width: 5px;
border-color: red ;
}

Pour appliquer cet ID CSS à une balise il suffit d’introduire l’expression id=”myID” à l’intérieur de la balise en question

Exemple:

<p id="myID">
Voici un paragraphe<br /> 
dont la mise en forme est gérée  <br />
à l'aide de l'id <b>"myID "<b>!
</p>

Ce qui va afficher au navigateur :

1 – Propriétés height & width (hauteur et largeur)

Les propriétés height et width permettent de définir la hauteur et la largeur d’un élément en CSS.

La hauteur et la largeur peuvent être définies sur auto (valeur par défaut. Indique que le navigateur calcule la hauteur et la largeur) spécifiées en valeurs de longueur, telles que px, cm, etc. ou en pourcentage (%) du bloc qui le contient.

Exemple

div {
//élément div css de hauteur 150 pixels et une largeur 450px;
    height: 150px;
    width: 450px;
    background-color: blue;
}

2- Propriété max-width

La propriété max-width est utilisée pour définir la largeur maximale d’un élément.

La largeur maximale peut être spécifiée en valeurs de longueur, telles que px, cm, etc., ou en pourcentage (%) du bloc conteneur, ou définie sur aucune (valeur par défaut. Indique qu’il n’y a pas de largeur maximale).

Le problème avec la balise div ci-dessus se produit lorsque la fenêtre du navigateur est inférieure à la largeur de l’élément (450px). Le navigateur ajoute ensuite une barre de défilement horizontale à la page.

Dans ce cas, l’utilisation de max-width améliorera la gestion des petites fenêtres par le navigateur.

Remarque : faites glisser la fenêtre du navigateur sur une largeur inférieure à 450 pixels pour voir la différence entre les deux div!

L’exemple suivant introduit un élément <div> avec une hauteur de 120 pixels et une largeur maximale de 450 pixels:

Exemple

div {
    max-width: 450px;
    height: 120px;
    background-color: blue;
}

3 – Récapitulation des propriétés des dimensions CSS

1. height             : Définit la hauteur d’un élément
2. max-height  : Définit la hauteur maximale d’un élément
3. max-width   : Définit la largeur maximale d’un élément
4. min-height  : Définit la hauteur minimale d’un élément
5. min-width   : Définit la largeur minimale d’un élément
6. width            : Définit la largeur d’un élément

Margin represente la marge externe d’un élément, elle est doté des propriétés :

-margin-right       :  définit la marge à droite
-margin-left          :  définit la marge à gauche
-margin-top          :  définit la marge en haut
-margin-bottom :  définit la marge en bas

Exemple :

Voici un exemple qui détérmine une marge de 150 pixel de touts les cotés :

p {
margin-top: 150px ;
margin-right: 150px ;
margin-bottom : 150px ;
margin-left : 150px ;
}

2 – La propriété  padding

Contrairement à la propriété margin, la propriété padding définit la marge interne à élément ,  la syntaxe de cette dernière est similaire à la première  :

-padding-right         :    définit la marge à droite
-padding-left            :    définit la marge à gauche
-padding-top            :    définit la marge en haut
-padding-bottom     :    définit la marge en bas

Exemple  :

Voici un exemple de marge à l’interieur des bordures

p {
width: 250px; 
border-style:outset;
border-width:15px; 
border-color:black;
padding-left: 75px;
padding-right: 75px;
padding-top: 75px;
padding-bottom: 75px;
}

Ce qui va afficher :

3 – La propriété Float

La propriété float fait flotter un objet à droite ou à gauche.

Exemple :

Pour faire flotter un paragraphe à droite on utilise le code :

p { float: right;
width: 200px;
border-style: solid;
border-width: 5px;
}

La propriété border-style est utilisé pour détérminer le type des bordures elle est doté des propriétés suivantes :

Exemple 1 :

p { border-style:solid;
border-width: 5px;
border-color: red ; }

Il s’agit  d’un type de bordure continue en rouge :

Exemple 2 :

p { 
border-style: dashed;
border-width: 2px;
border-color: blue ; }

Exemple 3 :

p { 
border-style: inset;
border-width: 5px;
border-color: black ; }

Remarque

On peut aussi spécifier les bordures à droite différemment de  celle à gauche, top et bottom, on utilise dans ce cas la commande border-left-width, border-right-width, border-top-width, border-bottom-width, et de même pour les autres propriétés border-left-style, border-left-color…

Exemple :

<html>
<head>
<title> Background CSS </title>
</p>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Ap%20%7B%20%0Aborder-left-style%3A%20inset%3B%0Aborder-left-color%3A%20red%20%3B%0Aborder-top-style%3A%20solid%3B%0Aborder-top-color%3A%20blue%20%3B%0Aborder-bottom-style%3A%20dashed%3B%0Aborder-bottom-color%3A%20black%20%3B%0Aborder-width%3A%205px%3B%0A%20%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<p>
</head>
<body>

Voici un exemple simple
 de bordures css
</body>
</html>

Ce qui va afficher à l’exécution :

Cette propriété permet de determiner le type de police d’un sélécteur

Exemple

h1 {
font-family: arial ;
}

Remarque :

On peut utiliser plusieur type de police en même temps

Exemple :

p {
font-family: Arial , Verdana, Tahoma ;
}  

le paragraphe sera afficher avec la police arial si cette dernière n’est pas disponible, le paragraphe sera afficher à l’aide de la police Verdana …

2 – font-style

Cette proprièté est utilisé pour appliquer le style italique à un sélécteur

Exemple :

p { font-style: italic ; } ( paragraphe en italique )
p { font-style: normal ; } (paragraphe normal )

3 – font-size

Cette propriété permet de determiner la taille du texte

Exemple :

p { font-size: 36px ; }  ( ecriture avec la taille de la police 36 )

4 – font-weight

Cette proprièté est utilisé pour appliquer le style gras à un sélécteur

Exemple :

p { font-weight: bold ; } écriture en gras

1 – background-color

Cette propriété s’utilise pour modifier la couleur de l’arrière plan d’un élément.

Exemple : coloration de l’arrière plan en rouge :

body { background-color: red ; }

2 – background-image

Cette propriété est utilisé pour mettre une image en arrière plan d’un élément. L’image est automatiquement répété pour recouvrir la totalité de l’élément en question.

Exemple :

body { backgroun-image: url(adresse) ; }    //adresse = adresse url de l'image 

3 – background-repeat

Cette proprièté définit la façon suivant laquelle l’image doit se répéter.

Exemple : background sans répétition de l’image

body { backgroun-image: url(adresse) ; background-repeat: no-repeat ; }  // pas de répétition d'image 

Exemple : background avec répétition horizontale de l’image ( repeat-x)

body { backgroun-image: url(adresse) ; background-repeat: repeat-x ; }  // répétition d'une façon horizontale 

Exemple : background avec répétition verticale de l’image ( repeat-y)

body { backgroun-image: url(adresse) ; background-repeat: repeat-y ; }  // répetition d'une façon verticale 

4 – background-position

Cette propriété est utilisé pour détérminer la position de l’image sur l’arrière plan en utilisant Les mots-clés suivants :

top           =   image au centre/haut de la page ou du bloc.
center     =   image au centre/centre de la page ou du bloc.
bottom   =   image au centre bas de la page ou du bloc..
right       =   image au centre/droit de la page ou du bloc.
left          =   image au centre/gauche de la page ou du bloc.

Exemple : background avec  une image palcée en haut à gauche

body { backgroun-image: url(adresse) ;
background-repeat: no-repeat ;
background-position: left top ; }
 l'image dans cet exemple se positionne en haut à gauche 

Remarque : On porra aussi utiliser le % pour le positionnement de l’image

Exemple : Pour positionner l’image en haut à droite on utilise le code :

body { backgroun-image: url(adresse) ;
background-repeat: no-repeat ;
background-position: 100% 0% ; } 

Exemple : Pour positionner l’image au milieu de la page on utilise le code :

body { backgroun-image: url(adresse) ;
background-repeat: no-repeat ;
background-position: 50% 50% ; }

5. Tutoriel Vidéo

Cette propriété permet de définir l’aligement d’un texte

Exemple  :

//Ce code permet d'aligner tous les paragraphes à droite.

p { text-align:right ; } 

2 – Text-color

C’est une propriété qui sert à personnaliser la couleur du texte

Exemple :

//cet exemple permet d'écrire toutes les balises h1 en bleu

h1 { color : blue ; }  

3 – text-decoration

Cette commande permet de décorer un texte avec une ligne en bas, au dessus, barré…

{ text-decoration: valeur ; }
    valeur = none                   //aucune décoration
    valeur = underline        //texte souligné
    valeur = overline           // ligne au dessus
    valeur = line-through  // texte barré
    valeur = blink              

//texte clignottant ( fonctionne avec Mozilla et Netscape et non pas avec Internet explorer )   

 4 – text-indent

C’est une propriété permettant de spécifier le décalage de la première ligne de chaque paragraphe.

Exemple :

p { text-indent: 30px ; }

5 – letter-spacing

Cette propriété permet de spécifier l’espacement entre les caractères.

Exemple :

// espacement normal entre les caractères

p { letter-spacing: normal ; }  

Exemple :

//espacement de 3px entre les caractères

p {
letter-spacing: 3px ;
}

6 – line-height

Cette propriété permet de définir l’espace entre les lignes d’un paragraphe

Exemple :

p{ line-height: 20px ; }

7 – Text-shadow

Cette commande permet de décorer du texte avec un ombre, la syntaxe est :

{
text-shadow: valeur1 valeur2 valeur3 couleur;
}

où :

• valeur1 :  mesure le décalage  de l’ombre horizontalement à droite en pixels
• valeur2 : mesure le décalage  de l’ombre en bas verticalement en pixels
• valeur3 : mesure l’épaisseur de l’ombre
• couleur : couleur de l’ombre

Exemple :

p{
text-shadow:7px 5px 3px black;
}

Ce qui affiche à l’execution :

8 – Text-transform

Cette commande permet de modifier la casse d’un texte elle a pour valeurs :

• lowercase : transforme tout le texte en miniscule
• capitalize : transforme la première lettre de chaque mot en majuscule
• uppercase : transforme tout le texte en majuscule
• inherit : hérite des parents

Exemple :

<html>
<head>


<style>
p{
text-transform:uppercase;
}
</style>

</head>
<body>

Voici un exemple de texte transformé en majuscule
à l'aide de la commande CSS text-transform

</body>
</html>

Ce qui affiche à l’exécution :

9 – Tutoriel Vidéo

Avant de de parler des propriétés d’un sélecteur,  prenons un exemple simple :

Exemple pour mettre les balise de titre <h1> en rouge on utilise le code  :

h1{ color:#FF0000 ; }

Ici dans cet exemple :

– h1 s’appelle le sélécteur de balise ( il sélectionne ici la balise titre h1) ,

– color designe ici  la propriété du sélecteur qui dans ce cas rouge ) 

à partir de cet exemple, on peut déduire la syntaxe générale d’un code CSS :

Selecteur de balise{ propriéteé:valeurs;}

2 – Exemple de sélecteurs de balises CSS

Exemple :

Si on veut par exemple que les balises de titre soit en rouge avec la taille 22px, et les balises de sous titre soient en bleu avec la taille 18px, on utilise le code CSS :

h1{color:red;
  }
  h2{color:blue;
  }

Voici le code complet de la page Web :

<html>
<head>
<style>
h1{color:red;
  }
  h2
{color:blue;
}
</style>
<title>Sélecteur de balises</title>
</head>
<body>
<h1>Voici le titre en rouge !</h1>
<h2>Voici le sous titre en bleu !</h2>
</body>
</html>

Et voici maintenant l’aperçu de la page :

Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web. CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage qui consiste à regrouper dans un même document des caractéristiques de mise en forme associées à des groupes d’éléments. Il suffit de définir par un nom un ensemble de définitions et de caractéristiques de mise en forme, et de l’appeler pour l’appliquer à un texte. Un codes css est inséré entre les balises <head> et </head> tandis que son effet s’applique à toute la page web en question.

2 – Syntaxe générale d’un code css

La syntaxe d’un code css se declare de la manière suivante :

Selecteur de balise{ propriete:valeurs;}

Le sélécteur : C’est généralement l’élément ou la balise html auquelle on veut appliquer le style.

La propriété  : est l’attribut qu’on souhaite modifier en introduisant une valeur.

Exemple  :

Voici le code css permettant de mettre toutes les balises H1 en rouge et centrée :

H1 { color : red; text-align : center;}   

3 – Insertion du code CSS

3.1 – Méthode interne à la page

Cette méthode encadre le code css entre les balises <style> et </style> et l’integre directement entre les balise <head> et </head>

3.2 – Méthode externe à la page

Cette méthode emagazine le code css dans un fichier dont l’extension est .css par exemple style.css et introduit dans les pages html entre les balises <head> et </head> un lien du type :

<link rel="stylesheet" type="text/css" href="style.css"/>

3.4 Tutoriel Vidéo