WEB design with CSS: WIDTH AND HEIGHT



1. Cliquer-ici pour regarder la vidéo sur les "dimensions"

Cliquer-ici pour regarder la vidéo sur les "dimensions"


2. Adjust in your "mystyle.css" the dimensions of one of your bloc elements  ( <p> ou <h1> ou <h2>, etc..).

Régler dans votre fichier "mystyle.css" les dimensions d'un de vos éléments de type bloc ( <p> ou <h1> ou <h2>, etc..).


3. As shown in the video, set in your "mystyle.css" file a gradient color background for one of your block-type elements (<p> or <h1> or <h2>, etc.).
Comme montré dans la vidéo, régler dans votre fichier "mystyle.css" un fond de couleur dégradé pour un de vos éléments de type bloc ( <p> ou <h1> ou <h2>, etc..).


4. Then move on to the "styled links" part. Those interested can read what is below this text before moving on to the next chapter.
Passez ensuite à la partie "styled links-liens décorés". Les personnes intéressées peuvent lire ce qui est en dessous de ce texte avant de passer au chapitre suivant.



Chapter summary

Résumé du chapitre:



A block type element ( paragraph: p , headings: h , image: img , division: div ) has adjustable dimensions. It has adjustable width and height, we have two CSS properties to specify the dimensions in code:


Un élément de type block ( paragraphe: p , titres: h , image: img , division: div )  a des dimensions réglables. Il possède une largeur et une hauteur réglables, on dispose de deux propriétés CSS pour spécifier les dimensions dans le code:



- width: it is the width of the block, expressed in pixels (px) or in percentage (%) compared to its container (the body or another block if the element is in another element, a paragraph in a division For example)


width : c'est la largeur du bloc, exprimée en pixels (px) ou en pourcentage (%) par rapport à son conteneur ( le body ou un autre block si l'élément est dans un autre élément, un paragraphe dans une division par exemple)

- height: it is the height of the block, expressed in pixels (px) or in percentage (%) compared to its container (the body or another block)


height : c'est la hauteur du bloc, exprimée en pixels (px) ou en pourcentage (%) par rapport à son conteneur ( le body ou un autre block)


Exemple: code qui règle les dimensions d'un bloc de type paragraphe:


p {

    width: 500px; /* signifie: largeur du bloc */

    height: 80px; /* signifie: hauteur du bloc */

    padding-top: 10px; /* signifie: marge intérieure par rapport au sommet du bloc */

    padding-left: 10px; /* signifie: marge intérieure par rapport au côté gauche du bloc */

    padding-right: 10px; /* signifie: marge intérieure par rapport au côté droit du bloc */

    color: red; /* signifie:couleur du texte en rouge */

    background-color:black; /* signifie: couleur de fond du bloc en noir */

    border: 3px solid red; /* signifie: bordure de 3 pixels en ligne pleine de couleur rouge */

}



Créé avec HelpNDoc Personal Edition: Générer des livres électroniques EPub facilement