COURS CSS |1

Introduction à CSS

La première démarche a engagé dans la stylisation d’une page web,

c’est de lier la page HTML au CSS. Et pour ce faire, il suffit de
mettre la balise ci-dessous dans la partie dans la page HTML juste
avant l’attribut titre.

<link rel = ‘stylesheet’ href = ‘nomdufichiercss.css’/>

De manière basique la stylisqtion d’une page web s’articule autour des

points ci-après :

 Fil rouge (sélecteur, dimension, couleur, commentaire)

 Texte
 Background
 Boxes
 Positionning
 Flex
 Grid
 Pseudo class
 Responsive

1. Fil rouge

Sélecteur : il sert à référencer une balise ou un attribut HTML dans

laquelle on veut modifier le style. Dont le sélecteur peut référencer
une balise, une classe ou un identifiant.

Une classe : c’est un attribut HTML qui peut ramener dans plusieurs
balises dans le but d’affecter un même style à plusieurs éléments du
dom. L’identifiant quant à lui, il est unique. C’est-à-dire qu’on ne peut
pas retrouver un même identifiant dans une balise HTML.

Dimension : c’est le volume que peut prendre un élément dans le dom.

On peut avoir de valeur en px, em, rem, vh.

Couleur : comme cela l’indique il fait référence à la couleur. On peut

avoir de valeur directement en affectant le nom de couleur par
 COURS CSS |2

exemple red, green, yellow,etc. on peut également avoir des valeurs

en rgb ( red, green, blue) ou en encore de valeurs hexadécimal
(ffffff).

Commentaire : il sert à inscrire une note pour expliquer une suite

d’instruction. En CSS pour commenter un code il suffit de mettre
/*commentaire*/ ou prendre le raccourcis ctrl + /.

2. Texte

Dans la pratique

h1{

text- transform : uppercase ;

letter-spacing : 2px ;

font-size : 2.5rem ;

color : darkblue ;

text-shadow : 5px 2px 0px #20115c

text-align : right ;

font-family : ‘police télécharger’, autre police ;

Explication

h1 : c’est un sélecteur HTML en CSS dont un élément du DOM

text- transform ; permet de changer former d’un texte. Il peut être

en majuscule ou minuscule ou encore mettre la première lettre
seulement en majuscule.

letter-spacing : permet de mettre de l’espace entre les lettres. Il

prend des valeurs en px.

font-size : il sert à dimensionner la taille d’une police.

1 rem = 16px
 COURS CSS |3

color : permet de modifier la couleur d’un texte

text-shadow : permet de mettre l’ombre sur un texte. Il accepte 4

valeurs. La première défini la propagation dans le X, la deuxième
dans Y, le troisième défini le niveau du floue (blur) et la dernière
c’est la couleur.

text-align : il sert à définir l’emplacement du texte soit à droit

(right) soit à gauche (left) ou le centré (center) par exemple.

font-family : pour prendre la police sur internet, il suffit d’aller sur

Google et taper Google font et on importer la police directement
dans les ccs ou encore on peut carrément la télécharger dans notre
projet en le mettant le dossier asset. La deuxième permet de
substituer si la première ne passe pas.

Lorsqu’on télécharge la police, il est conseillé de mettre de cette

façon dans CSS

@font-face{
Font-family : font-1 ;
Src : url(./asset/’liendufont’)
}
Comme on peut appeler notre police ne porte ou dans le projet et si
l’on veut le modifier, on le fera que dans un seul endroit.

3. Background

Dans la pratique

Body{
Backgroud : url(./asset/image) no-repeat fixed (left,right,
center)/over
Height : 100vh ;
Overflow : hidden ;
}
 COURS CSS |4

Explication

Backgroud : il permet de mettre un arrière-plan il peut être un

colleur ou image ou encore une vidéo. Cette propriété css possède
d’autre propreté qu’on pourra bien préciser par exemple backgroud-
color. Mais en mettant simplement backgroud, il permet d’ajouter
dans une seule ligne plusieurs valeurs de cette propriété :
url(./asset/image) : permet de mettre l’image avec son chemin dans le
projet
no-repeat : il arrêt la redondance de l’image
fixed : il va figer l’image
(left,right, center)/over : oriente l’image
Height : vh signifie vitual heignt si on le met à 100 cela veut dire que
l’image fait le 100% de l’ecram de l’utilisateur. Dans la pratique, le
navigateur laisse certaine espace et pour l’enlever il suffit de faire :
Overflow : hidden ;

Boxes

Dans la pratique
Main{
Width : 85% (100vh) ;
Min-height : 95px ;
Margin : 10px 20px ; (10px 20px 10px 20px)
Margin-top : 100px
Margin-left :150px ;
Margin : 0 auto ;
Padding ; 25px ;
Border-radius : 15px ;
Box-shadow : 0 0 0 12px blue ;
}
 COURS CSS |5

Explication

Main : c’est une balise HTML

Width : il veut dire largeur, il permet de définir la largeur de notre
boite par rapport à notre page il peut prendre des valeurs en vh mais
il est conseillé d’aller sur le %.
Min-height : height veut dire longueur il définit la largeur de notre
page. Lorsqu’on ajoute min il veut dire hauteur minimum. Il est
conseillé de le donner des valeurs en pixel.
Margin : c’est l’espace extérieur de notre boite. Il définit de valeur
dans à haut, droit bas et gauche en suivant la trajectoire de l’aiguille
d’une montre. Il peut se présenter comme ceci :
Margin : 1px 1px (défini les valeurs en haut et bas pour la première
dimension et gauche et droit pour la seconde)
Margin : 1 px 1px 1px 1px (Il définit de valeur dans à haut, droit bas
et gauche)
Margin-top : 100px (ici c’est lorsqu’on veut être précisé sur la
direction que l’on veut modifier. Il est valable pour toutes les
directions)
Margin : 0 auto ; (pour centrer la boite dans la page, il suffit de
donner une valeur haut et bas pour ce cas ce 0 et laisser la gauche et
droit se mettre en automatique)
Padding ; c’est l’espacement intérieur d’une boite. Il fonctionne
comme le margin
Border-radius : il permet d’arrondir le bord
Box-shadow : il sert à mettre des ombres sur notre boite. Il
fonctionne comme text-shadow.

Positionning
Dans la pratique
h2{
margin : 0
}
 COURS CSS |6

Ou
*{
margin : 0
}

.positionning{
Border : 2px solid blue ;
.
.
.
Position : relative
}

#cercle{
.
.
.
Position : absolute ;
Top : 0 ;
Right : 0 ;
}

#rectangle{
.
.
.
Position : absolute ;
Bottom : 2px ;
Left : 50% ;
Transform : translate(-50%, -50%)
}
 COURS CSS |7

Explication

Par défaut le navigateur affecte un margin et padding à nos

éléments. Pour l’enlever il suffit de mettre *{ } qui veut dire all à tous
nos éléments pour l’enlever dans tous le dom. Ou carrément l’enlever
sur la balise concernée.

Pour rendre élément libre de se placer n’importe où dans la page il

suffit de le mettre en position absolute. Et si l’on veut restreindre
son comportement intérieur de son élément parent, il suffit
d’affecter à ce dernier la position relation.

Pour centré un élément dans une boite, il suffit de le mettre comme

ceci :

Left : 50% ;
Transform : translatex(-50%) ;

Ceci est valable pour centré des éléments de gauche à droit

top : 50% ;
Transform : translateY(-50%) ;

Ceci est valable pour centré des éléments de haut en bas

Et pour le mettre directement sur les deux axes :

Transform : translateY(-50%, - 50%) ;

Pour mettre élément dernier tout

z-index : - 1 on peut une valeur positive pour le faire passer avant

flex

N.B : lorsqu’on veut mettre un même style dans plusieurs sélecteurs il

suffit de le séparer par une virgule.
 COURS CSS |8

Dans la pratique

Ul{
Display : flex ;
Justify-content : space-around ;
Padding :0 ;
}

Li{
List-style-type : none ;
.
.
.
Display : flex ;
Align-items : center ;
Justify-content : center ;
}

Grid

Dans la pratique

Form{

Display : grid ;

Grid-template-columns : 1fr 1fr ;

Grid-templete-rows : 1fr 1fr 1fr ;

Grid-template-areas :

‘ i1 i2 ‘

‘ta ta’

‘bt bt’
 COURS CSS |9

Textareas{

Grid-area : ta ;

Resize : none ;

Imput(type : ‘submit’) {

Grid-area : bt ;

Cursor : pointer

Transition : 0,4s ;

Imput(type : ‘submit’) : hover{

Grid-area : bt ;

Cursor : pointer

responsive

Dans la pratique

@media screen end (max-width : 1000px){

Balise{

Intruction

Transform : scale(1.05)