Skip to main content

Box - basic

Jouer sur les espacements

Pour bien comprendre la notion de boxes en CSS (avec margin, padding, border), voici quelques exercices pratiques :

Crée box​

Html​

On va donc crée une structure html de base ( voir doctype html)
On va crée ce fichier index.html dans un repertoire spécifique par exemple box.
Le fichier va avoir pour nom index.html.
index.html permet au serveur web de savoir quelle est le fichier à utiliser.

info

La structure de base qu'on va retrouver sur w3c est une super base.
Mais on peut l'améliorer un peu:

  • html <html lang="fr">: Indique que notre contenu serat écrit en français
  • html <meta charset="UTF-8">: Indique le type d'encodage de notre code source ( UTF-8 est devenu la norme )
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Box basic</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>

On a une page html avec sa stucture de base et un lien vers une ressources styles.css.
Style.css est le fichier css qui se trouve à la racine de notre projet ( c'est à dire au même niveau que notre index.html ).

diretory 01 diretory 02

Reste à ajouter une balise html qui va nous servir de box

html <div class="box">Ceci est une boîte</div>

Pour le moment notre box ne ressemble à rien.
Afin de lui donnée un peu de style on va ajouter du css.

Css​

On va crée un css de base pour nos boxes.
Le but étant de simplement les rendres plus visible.

  • Ajouter une largeur (width) et une hauteur (height).
  • Ajouter un couleur de fond (background-color)
.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}

Boxes​

Maintenant qu'on à une classe css pour notre box standard on va en crée 4 autres.
Pour celà il suffit de faire un copier coller de notre balise html ayant la class .box
On se retrouve logiquement avec 4 nouvelles boxes similaires.

Comme l'on va travailler sur chaque boxes séparement on va leur ajouter une second class. Par exemple .box1, .box2, .box3, .box4

Margin et padding​

Le margin et l'espace qu'on met entre notre element html et les autres.
Le padding lui est l'espace intérieur, au sein de notre element.
Border et la bordure, la frontière entre l'intérieur de notre élément et son extérieur.

Box1​

On va ajouter un peux d'espacement interne afin d'améliorer la lisbilité de notre texte. Il faut l'écarter du haut et l'écarter de la gauche. Pour la distinquer on va lui donner une nouvelle couleur de fond: lightcoral

Box2​

Sur box2 on désire crée de l'espace entre notre box et le reste de la page.
L'espace à ajouter se situe en haut et sur le coté gauche.

Box3​

Maintenant on va crée un border sur notre box.
Le border peut avoir différent style par défaut.
Pour rendre la bordure bien visible on va lui donner une largeur de 5px et une couleur noir.
On rajoute une nouvelle couleur de fond: lightyellow

Box4​

Sur cette boxe on va tout mélanger.
On rajoute un espacement interne vers le haut pour faire descendre notre titre.

Ensuite on va ajouter une bordure de 5px mais cette foix ci en bleu.

Maintenant on va améliorer le positionnement de notre box au sein de la page.
Elle doit s'écarter du bord gauche de 30px et pareil pour l'espace audessus d'elle.

Comme pour les autres on lui ajoute une nouvelle couleur de fond ( cette foix ci avec une valeur hexadecimale #4169E1 ) En plus de ça on va jouer sur le placement du titre avec un regle css spécique au texte text-align

info

La couleur de fond est souvent indiquer sour forme de noms.
Il existe une série de couleur ayant un nom, chaque nom coorespond à une valeur hexadecimale.
On peut aussi indiquer la couleur par une valeur RGB, RGBA, HSL mais hexadecimale reste le plus courament utilisé.

Box5​

Pour finir on va utiliser la positionnement exterieur afin de centré notre box au milieu de la largeur de notre page. Afin de réaliser ça on va jouer sur l'espace à droite et à gauche et ne pas donner de valeur fixe mais utiliser auto comme valeur.

Pour casser le coté très carré de nos boxes on va donner des arrondies à celle ci. Arrondire les angles revient à jouer sur la forme du border.
Actuellement on à définit un border classique. On va venir le modifier en utilisant border-radius

Résutat​

demo

solution

info

On voit l'effet cascade de CSS ( cascade style sheet).
Notre class .box définit un background-color rouge mais .box1 définit une autre couleur.
Du coup là regle css background color de .box est écrasé par celle de box1.
Si maintenant on crée css .box6 { border: 5px solid black; } que va t'il se passé ?
Et si on modifie .box pour changer background-color: red !important ?