HOME

Principaux attributs CSS

Dans nos CSS, nous allons utiliser plusieurs choses, d'une part des id et des class mais aussi des attributs dont voici une liste avec pour chaque attribut un exemple.

font-family : permet de déterminer une liste de police que l’on veut voir utiliser pour un élément :

.text {
font-family:arial, geneva, sans-serif;
}

font-size : permet de déterminer la taille de la police. En px, en em, en pt ou en %, souvent.

.text {
font-size:24px;
}

font-weight : determine la graisse de la police.

.text {
font-weight:bold;
}

font-style : permet de mettre la police en italique.

.text {
font-style:italic;
}

color : définit la couleur de la police. En hexadécimal (#ffcc00 par exemple) ou en rgb, ou encore par des noms pour certaines couleurs (blue, green, silver par exemple).

.text {
color:red;
}

width : permet de déterminer la largeur des éléments de type "bloc". En pixel, pourcentage, em...

#bloc {
width:500px;
}

height : même chose pour la hauteur.

#bloc {
height:500px;
}

margin : la marge autour d’un bloc. En px, en em, en % par exemple.

#bloc {
margin:50px;
margin-left:20px;
}

padding : la marge entre le bord du bloc et le texte.

#bloc {
padding:20px;
padding-right:10px;
}

border : le bord du bloc. On déclare souvent dans la foulée la couleur, l’épaisseur et le style : "1px #000000 dotted" par exemple pour un bord pointillé d’un pixel de hauteur et noir. On peut déclarer séparement le style du bloc (border-style:solid par exemple).

#bloc {
border:1px solid black;
border-bottom:1px solid blue;
}

text-align : l’alignement du texte (left, right, justify).

.text {
text-align:right;
}

text-decoration : souligné, une ligne en travers, ou rien. Souvent utilisé pour enlever le soulignement des liens : a { text-decoration:none; }.

.text {
text-decoration:underline;
}

text-transform : permet de changer la casse des textes notamment : text-transform:uppercase par exemple.

.text {
text-transform:uppercase;
}

display : permet de modifier le comportement d’un élément : il peut passer de type "en ligne" (inline) à "bloc", mais aussi devenir invisible (display:none ;). utile pour la manipulation javascript.

#bloc {
display:none;
}

background-color, background-image, background-repeat : permettent de gérer les couleur et motif d’arrière-plan.

#bloc {
background-color:yellow;
}