Principaux attributs CSS

CSS Teaching
  • 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;
    }