Le Web

Cours

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.

C'est pour cela que l'on utilise une feuille de style.

Créez un fichier monstyle.css à la racine de votre page web
Rajoutez dans votre page web le lien vers ce fichier : à imbriquer dans l'élément head : <link rel="stylesheet" href="monstyle.css">

Méthode : Comment 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

#p1{
  color:brown;
}
#p2{
    color:red;
}

#p1{
  color:brown;
}

#p2{
    color:red;
}

Dans la page web on écrit :

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="monstyle.css">
  <title> ma première page web</title>
 </head>
 <body>
 <h1 id="p1"> Ceci est un titre avec les attributs 'p1' </h1>
 <p id="p1"> Ceci est un texte dans un paragraphe avec le style "p1" </p>
 <p id="p2"> Ceci est un texte dans un paragraphe avec le style "p2" </p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="monstyle.css">
  <title> ma première page web</title>
 </head>
 <body>
 <h1 id="p1"> Ceci est un titre avec les attributs 'p1' </h1>
 <p id="p1"> Ceci est un texte dans un paragraphe avec le style "p1" </p>
 <p id="p2"> Ceci est un texte dans un paragraphe avec le style "p2" </p>

 </body>
</html>

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

#p1{
  color:brown;
}
#p2{
    color:red;
    background-color: aqua;
    font-size: 15px;
    text-indent: 100px;
}

#p1{
  color:brown;
}

#p2{
    color:red;
    background-color: aqua;
    font-size: 15px;
    text-indent: 100px;
}

Vous trouverez les attributs possibles en 'css' sur de nombreux sites web dont celui-ci .

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

p{
color: red;
}

p{
color: red;
}

Complément : Des sites pour créer des styles en css

Pour les plus courageux, voilà l'un des nombreux sites qui proposent de créer des styles css en ligne de façons assez simple...

Simulation :

Créer une page web sur un sujet original qui vous intéresse.

Les seules contraintes sont d'ordres techniques .

il devra y avoir :

Des liens
Des images
Un tableau
Une feuille de style
Du texte écrit par vous (attention à l'orthographe)
Un design réfléchi....

Accueil

Imprimer Stéphan Van Zuijlen