Le CSS pour le style

Il est probable que nous souhaitions que certains paragraphes soient en bleu d'autres en vert, de même pour les titres, les contours d"images etc....

Comme vous l'avez sans doute remarqué, il est assez fastidieux d'imbriquer des éléments dans un fichier HTML.

C'est pour cela que l'on utilise une feuille de style (langage CSS : Cascading Style Sheets => feuilles de style en cascade).

  • Créer un fichier monstyle.css à la racine de votre page web

  • Rajouter dans votre page web le lien vers ce fichier : à imbriquer dans l'élément head : <link rel="stylesheet" href="monstyle.css">

MéthodeLa syntaxe

  • La syntaxe de base de CSS est composée de 3 parties écrites sous la forme :

    sélecteur { propriété : valeur ; } (ne pas oublier le point-virgule ! )

    Un sélecteur correspond à une balise HTML (<p>, <h1>, etc...) et la propriété est un attribut dont on veut changer la valeur.

1
p {color : blue ;}

Il est possible de définir plusieurs attributs pour un même sélecteur :

1
selecteur
2
{
3
Propriete 1 : valeur ;
4
Propriete 2 : valeur ;
5
}

  • Remarque : on peut écrire les attributs sur une ou plusieurs ligne, au choix.

1
p { color : blue; font-size : 24 px; }

ComplémentGrouper les sélecteurs

  • Si certaines propriétés s'appliquent à plusieurs sélecteurs, il est possible de les grouper. Ainsi, on écrit:

1
selecteur1, selecteur 2
2
    {
3
    propriété 1 : valeur 1 ;
4
    propriété 2 : valeur 2 ;
5
    }
1
h1,h2 {color : blue ; font-size : 24 px ; }

ComplémentComplément:Commentaires

  • Des commentaires dans du CSS

    Comme en HTML, il est possible (et important) de mettre des commentaires.

    Pour cela, il faut taper:

1
/* Mon commentaire */

FondamentalLes sélecteurs

  • Le sélecteur basé sur l'attribut "class"

    Pour l'instant, l'inconvénient est que tous les éléments HTML d'un même type ont le même style. Il existe une solution pour appliquer un style différent à un élément donné. Pour cela, on utilise l'attribut spécial "class" qui fonctionne sur toutes les balises HTML (titre, paragraphe, images, etc...).

    HTML

    CSS

    <p class="intro"> Bienvenue sur mon site </p>

    .intro { Propriété : valeur ; }

    Notre paragraphe est donc référencé par l'attribut "intro" que nous utilisons dans le fichier CSS pour donner un style particulier à ce paragraphe.

    /* Vous noterez le . (point) devant le nom de la classe .intro */

  • Le sélecteur basé sur l'attribut "id"

    Même principe que pour class mais en utilisant l'attribut id. Logiquement plusieurs éléments peuvent être de la même « class », par contre un id définit un élément bien précis et un seul.

    HTML

    CSS

    <p id="intro"> Bienvenue sur mon site </p>

    #intro1 { Propriété : valeur ; }

    /* Vous noterez le # devant le nom de l'id #intro */

FondamentalFormatage de texte

  • Changer la taille du texte :

    Dans l'exemple qui suit, les titres avec la balise <h1> auront une taille de 24 pixels.

    Au lieu de spécifier la taille d'un texte à l'aide de px, correspondant au nombre de pixels, on peut également utiliser l'unité em. 1em vaut la taille de police par défaut dans un navigateur (en général, 16 px). Par exemple, si l'on décide que les titres principaux valent 1 fois et demi la taille standard des caractères, on donne la valeur 1.5em à la propriété font-size.

1
h1 { font-size : 24 px ; Text-decoration : underline ; }

  • Changer la police du texte :

    Dans l'exemple qui suit, le navigateur essaiera d'abord d'utiliser la police1, s'il ne l'a pas, il essaiera la police 2, etc Cela évite des problèmes si l'internaute n'a pas la même police que vous. Les polices les plus courantes sont Arial, Arial Black, Comic Sans MS, Courrier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana.

1
balise
2
    {
3
    font-family : police1, police2, police3, police4 ;
4
    }

  • Mettre en italique, gras, souligné :

    • La propriété CSS qui permet de mettre en italique est font-style qui prend trois valeurs :

      italic, oblique ou normal

    • La propriété CSS qui permet de mettre en gras est font-weight qui prend deux valeurs :

      bold ou normal

    • La propriété CSS qui permet de souligné (ou de faire d'autres décorations) est text-decoration qui prend cinq valeurs :

      underline : souligné

      line-through : barré

      blink : clignotant

      none : normal

      overline : ligne au-dessus

  • Changer l'alignement :

    La propriété CSS qui permet d'aligner le texte est text-align qui prend quatre valeurs :

    left , center , right ou justify

  • Changer la couleur du texte :

    La propriété CSS qui permet de définir la couleur du texte est color. Il existe plusieurs variantes permettant de définir la couleur :

    méthode 1 : balise { color : blue ; }

    méthode 2 : balise { color : rgb(240,96,204) ; }

    méthode 3 : balise { color : #F060CC ; }

  • Changer la couleur du fond :

    La propriété CSS qui permet de définir la couleur du fond est background-color. Elle s'utilise de la même manière que la propriété color.

    body { background-color : #F060CC ; }

SyntaxeComment faire ?

  • Dans le fichier monstyle.css on écrit le code suivant :

    Vous pouvez mettre autre chose que p1 ou p2 ce ne sont que des identificateurs

1
#p1{
2
    color:brown;
3
}
4
5
#p2{
6
    color:red;
7
}

  • Dans la page web on écrit :

    Les styles sont identifiés avec l'attribut : id="nom de l'identificateur"

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <link rel="stvlesheet" href="monstyle.css">
6
        <title> ma première page web </title>
7
    </head>
8
    <body>
9
        <h1 id="p1"> Ceci est un titre avec les attributs 'p1' </h1>
10
        <p id="p1"> Ceci est un texte dans un paragraphe avec le style 'p1' </p>
11
        <p id="p2"> Ceci est un texte dans un paragraphe avec le style 'p2' </p>
12
    </body>
13
</html>

On peut ajouter autant d'attributs que l'on souhaite, s'ils existent bien sûr....

1
#p1{
2
    color:brown;
3
}
4
5
#p2{
6
    color:red;
7
    background-color:aqua;
8
    font-size: 15px;
9
    text-indent: 100px;
10
}

Vous trouverez les attributs possibles en 'css' sur de nombreux sites web.

On peut modifier le style par défaut des éléments :

Ci-dessous le code css pour l'élément p , il n'y a pas besoin de l'identifier avec id

1
#p{
2
    color:red;
3
}