Les langages du Web : le CSS

Patrick Jayet

Description

Comment créer une page externe pour appliquer du CSS sur une page HTML.

Informations

• Publié par: Force_IT
• Nombre de lectures: 13
• Licence : En savoir +
  Paternité, pas d'utilisation commerciale, partage des conditions initiales à l'identique
• Langue: Français

Extrait

Les langages du Web

Le CSS – Module 4

1

Dans les modules prcdents, nous avons vu comment faire pour insrer du code .CSS directement dans du code-source HTML. Ce n’est pas la mthode la plus recommande car elle provoque un phnomne de redondance. Le meilleure mthode consiste  crer du code .CSS dans un logiciel spcialis, puis  l’insrer dans le HTML au moyen d’un lien (<link> ……..</>) - (Cours CSS Module 1 page 1).

Les logiciels gratuits que nous pouvons utiliser sontTopstyleouNotepad++

OuvronsNOTEPAD++ Dans l’onglet  Langage  choisissons .CSS Puis entrons notre code : * { Text-align : center ; }

Voici l’interface :

Explications : le * indique que mon code .css va s’appliquer  l’ensemble de la page. Text-align :center ;…… Je veux centrer toute la texte de la page Attention : Espace aprs : et ne pas oublier ; aprs center. { ]} …. Le code sera insr entre ces parenthses. Je vais enregistrer mon fichier en prenant bien soin de lui donner une extension .css

Appelons le :monstyle.css Je vais maintenant ouvrir Kompozer : J’ouvre un fichier HTML existant ; je constate que ma page Web est cale sur la gauche.

Multiactivits de Villers-Bocage – Les bases du CSS Module 4 – Cours Patrick JAYET

Voici le code-source de cette page :

<link rel=stylesheet media=  screen type=”text/css” title=”Design” href=”monstyle.css” /> Explications : link …… pour crer le lien entre ses balises < /> title …… Mettez ce que vous voulez href ……(rappel : HTML module : il s’agit d’un attribut) monstyle.css ….. le fichier css que je viens de crer

Multiactivits de Villers-Bocage – Les bases du CSS Module 4 – Cours Patrick JAYET

2

Voyons maintenant le rsultat en visuel :

…… Et voil !

…… Comment ?  ne vous semble pasassez clair ?

…… Bon, alors reprenons notre code css dans le fichier  monstyle.css  que vous venons de crer. Et ajoutons lui une nouvelle proprit et une nouvelle valeur. Proprit :Color Valeur ; red Ce qui donnera color :red ;

Enregistrons la modification sous le mme fichier  monstyle.css  Retournons maintenant dans Kompozer et ouvrons notre fichier  Les langages du Web  Rappel : le lien link existe toujours et il fait toujours rfrence au fichier  monstyle.css 

Multiactivits de Villers-Bocage – Les bases du CSS Module 4 – Cours Patrick JAYET

3

Donc, il est inutile d’apporter des modifications dans le code source HTML

Voyons tout de suite le rsultat :

Multiactivits de Villers-Bocage – Les bases du CSS Module 4 – Cours Patrick JAYET

4

Une dernire vrification, revenons sur NOTEPAD++

Fichier .css  monstyle.css 

5

Regardez dans les onglets : Notepad++ a dtect la prsence d’un fichier HTML  Les langages du Web  Nous retrouvons notre lien <link /> avec le fichier  monstyle.css 

….. Voil, ….. Nous savons maintenant crer un lien entre un fichier .csset du code-source .html

Multiactivits de Villers-Bocage – Les bases du CSS Module 4 – Cours Patrick JAYET