Les propriétés CSS les plus utilisées
Les principales propriétés CSS
Propriétés CSS les plus utiles
Introduction
Le CSS ne peuvent etre évité, d’ailleurs concevoir un site en HTML et CSS est maintenant devenu un standard.
Elles vous permettrons de donner à votre site, maintenant codé en HTML5, une mise en forme, pour le comportement de vos liens texte par exemple.
Il est donc important de réfléchir en amont à l’allure générale de votre site et de vous reporter à votre chartre graphique afin de conserver une uniformité.
Afin de vous faciliter l’établissement de celle-ci et vous donner un aperçu des possibilités offerte par le CSS, voici un récapitulatif des propriétés CSS les plus courantes et compatibles avec tous les navigateurs.
Font-family :
Elle définit la police de caractère utilisée. Lors du chargement de la page, le navigateur cherche sur votre ordinateur la police déclarée. Cette propriété possède un ordre de déclaration. Par exemple pour « font-family: Verdana, Geneva, sans-serif » le navigateur cherchera la police Verdana, s’il ne la trouve pas, il affichera le paramètre 2, soit la police Geneva, ainsi de suite.
Font-size :
Elle définit la taille de la police de caractère. Elle prend comme paramètre un nombre et une unité qui représenteront une taille.
Elle s’exprime en %, em (taille relative, 1.0 étant le normal), un nom (medium, large, …) ou en pixels (la plus utilisée).
Font-weight :
Elle définit l’épaisseur de la police. 4 possibilités : bold, bolder, lighter et normal (par défaut).
Font-style :
Elle détermine l’orientation de la police. 3 valeurs aux choix : italic, oblique, normal (par défaut).
Font-variant :
Elle permet la mise en petites capitales du texte en lui attribuant la valeur small-caps. Cette modification ne fonctionne pas sur les lettres avec accents, comme « é ».
Text-decoration :
Habille le texte d’une ligne placée, selon la valeur attribuée, en dessous (souligné), au dessus ou en travers (rayé).
Text-transform :
Elle permet d’appliquer des propriétés de capitalisation du texte. Les valeurs possibles sont uppercase, lowercase, capitalize et none (par defaut).
Text-align :
Elle définit l’alignement du texte dans son conteneur. Elle peut avoir comme paramètre left (par defaut), right, center ou justify (prend toute la largeur du conteneur).
Line-height :
Elle définit la hauteur occupée par une ligne dans votre texte. Sa valeur s’exprime généralement en px et permet, notamment, de centrer un texte dans un bouton à hauteur fixe (en affectant une valeur line-height identique à la hauteur du bouton).
White-space :
Cette propriété permet de définir la hauteur du renvoi à la ligne, l’unité employée étant le pixel (px).
Text-indent :
Permet aux paragraphes de commencer avec un retrait indiqué par une valeur exprimée en px ou %.
Text-shadow :
Propriété nouvelle du CSS3, elle permet de définir un effet d’ombrage au texte concerné. Les valeurs s’exprime en pixels et doivent etre entrées dans un ordre précis : Text-shadow : décalage horizontale / décalage verticale / adoucissement / couleur ce qui donnerait par exemple Text-shadow : 2px 2px 3px #000000
Color :
Cette propriété définit la couleur du texte. Pour indiquer celle-ci, 3 méthodes aux choix : le nom complet, en anglais, mais n’est possible que pour les couleurs de bases (black, blue, red, pink, white, …), le code hexadécimal du type #91c225 (permet toutes les couleurs) ou le code RGB rgb(145,194,37).
Background-color :
Incontournable, cette propriété permet d’attribuer une couleur de fond à un élément, texte, div, table, … . L’indication de couleur se fait de la meme façon que pour la propriété Font. Pour un texte, son uilisation permet de donner un effet de surligné à celui-ci. En fond d’élément, cette propriété peut aussi etre couplé à background-image.
Background-image :
Permet d’attribuer une image de fond à un élément. Cette utilisation du CSS permet, par exemple, d’écrire du texte par dessus une image, possibilité souvent demandé sur les forums. L’indication de l’image se fait par son URL (local ou web). En fond d’élément, cette propriété peut aussi etre couplé à background-color.
Background-repeat :
Elle est utilisée pour la répétition d’une image intégrée en background. 4 possibilités sont possibles : repeat-x (répétition horizontale), repeat-y (répétition verticale), repeat (par défaut, répétition sur les 2 axes), no-repeat (aucune répétition).
Background-position :
Définit un décalage de l’image de fond dans l’élément concerné. Le point de référence est le coin supérieur gauche de l’élément et les valeurs se définissent en px ou en % ou par des designation de position (left, center, right, top et bottom).
Background-attachement :
Définit si une image de fond est fixe ou défile avec le reste de la page. 2 valeurs : fixed ou scroll.
Width et Height :
Ces propriétés sont utilisées pour attribuer des valeurs de largeur et hauteur à un élément. S’il elle permettent de déterminer une dimensions fixe, elle sont aussi utilisées pour appliquer des limites de dimensions. Un bloc ayant des valeurs « auto » (il se dimensionne automatiquement par rapport à son contenu) peut etre complété par des indications de dimensions minimales et maximales. Ces dimensions sont généralement exprimées en px ou % et ces propriétés se déclinent en 6 combinaisons : width, min-width, max-width, height, min-height et max-height.
Border-radius :
Cette propriété vous permettra d’arrondir les angles de vos blocs. Sa valeur s’exprime en px et correspond au rayon d’arrondi appliqué. Les valeurs peuvent etre différentes d’un angle à l’autre, il vous suffit pour cela de saisir les 4 valeurs souhaitées (ex: border-radius: 2px 2px 5px 5px;) en respectant l’ordre de lecture du navigateur (haut-gauche, haut-droit, bas-droit, bas-gauche).
Display :
On utilise cette propriété pour modifier le comportement de l’élément.
5 valeurs sont attribuables : none (l’élément n’est pas affiché), block (l’élément est de type block, comme un paragaphe), inline (l’élément est de type inline), inline-block (l’élément est de type inline mais redimmensionnable comme un block), list-item (l’élément devient liste à puces). Les éléments de type block s’affiche les ns en dessous des autres alors que les éléments inline s’affichent les uns à coté des autres.
Position :
Propriété qui spécifie le type de procédé utilisé pour le positionnement d’un élément. 4 valeur lui sont attribuables : Static (par defaut), absolute (position de l’élément par rapport au coin supérieur gauche de son conteneur), fixed (l’élément ne défile pas avec la page), relative (l’élément garde une position relative à sa position normale).
Float :
Défini le positionnement d’un élément dans le conteneur. La valeur left placera l’élément à gauche dans le conteneur, la valeur right à droite, la valeur none annule ce positionnement.
Z-index :
Cette propriété est utilisée en cas de chevauchement d’élément. Sa valeur, exprimée en chiffre, permet d’indiquer quel élément doit etre affiché au dessus de l’autre. l’ordre de priorité d’affichage respect la valeur de chiffre, le plus élévé étant le premier affiché. Ex : un élément avec un Z-index=10 sera au dessus d’un élément ayant un Z-index=2.
Propriétés CSS les plus utiles
Font :
Cette super-propriété regroupe en une seule les propriétés font-family, font-size, font-weight, font-style, text-decoration, font-variant et text-transform. Elle vous permet d’indiquer à la suite les valeurs de chacune de ses propriétés. Exemple :
.montext {
font: italic bold 14px verdana; }
A savoir : le nom de police (font-family) doit toujours etre placé en dernier et vous n’êtes pas obligé de mettre une valeur pour chaque propriétés intégrées dans cette super-propriété.
Background :
Elle vous permettra de regrouper les propriétés de background, à savoir color, image, repeat, position, attachement. Exemple :
#element {
background: #f30 url(monimage.png) no-repeat top center; }
Ici, mon élément aura un fond rouge assortie d’une image placée en haut au centre, non répétée. L’ordre des valeurs n’influent pas sur le résultats et vous n’êtees pas obligé de mettre une valeur pour chaque propriété regroupée dans cette super-propriété.
Margin :
Cette super-propriété applique des marges extérieures à l’élément concerné, c’est à dire un décalage de sa position par rapport au conteneur selon des valeurs déterminées.
Elle remplace les 4 propriétés margin, à savoir margin-top, margin-right, margin-bottom et margin-left. On peut définir une valeur pour chaque coté en respectant l’ordre de lecture du navigateur (haut, droite, bas, gauche).
Une seule valeur saisie applique une marge identique à celle-ci sur chaque coté. Deux valeurs saisie applique une marge bas et haut identique à la première valeur et gauche et droite à la seconde.
Ne saisissez pas 3 valeurs, le résultat sera aléatoire, saisissez les 4 en remplaçant la valeur du coté sans marge par un 0. Les valeurs de marges sont exprimées en px ou em. Exemple :
.element {
margin: 10px 50px 5px 80px; }
Mon élément décalé des éléments qui l’entourent de 10px en haut, 50px à droite, 5px en bas et 80px à gauche.
Padding :
Cette super-propriété est identique à la précédente, margin, mais cette fois les marges sont appliquées à l’intérieur de l’élément concerné.
Ce style est très souvent utilisé pour permettre un décalage du contenu (texte, tableau, …) avec les bords de l’élément concerné.
Exemple :
.blocdetexte {
padding : 20px; }
Ici, le contenu de cette élément sera décalé de 20px de ses 4 bords. La super-propriété border vous permettra de déterminer le style appliqué aux bordure d’un élément. Plusieurs paramètres sont applicables :
- l’épaisseur de la bordure, exprimée en px
- la couleur de celle-ci, exprimé en hexadécimal, RGB ou texte
- le style de bordure (hidden, dashed, solid, double, dotted, inset, outset)
Exemple :
.bordure {
border: solid 2px red; }
Il existe bien d’autres propriétés CSS mais le but de ce dossier est de vous initier à ce langage, j’ai donc fait le choix de ne vous parler que des plus utilisées et surtout indispensables. Cela vous donne déjà un aperçu des nombreuses possibilitées offertes par l’utilisation de feuilles de style en cascade.
Le CSS en 3 questions/réponses – en bref
🖥️ C'est quoi HTML et CSS ?
Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l’aspect graphique d’une page en HTML
🤔 Qu'est-ce que le CSS ?
CSS est l’acronyme de « Cascading Style Sheets » c’est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).
📆 Différence entre CSS et CSS3 ?
CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.