Ressources du Congo

Demandez à Notepad++ de concevoir vos Sites Web (15/350): Premiers pas avec le CSS

19 Novembre 2014 , Rédigé par Zamba Synkin Publié dans #Tech' Net & Code, #e-Learning

HTML5 & CSS3: Premiers pas avec le CSS
HTML5 & CSS3: Premiers pas avec le CSS

Pour rappel, dans le billet précédent, nous avons appris comment faire un titre (de 1er niveau d'un document web), via la balise h1.

Le hic, c'est que ledit titre et le texte correspondant étaient en noir et de plus la police de caractère était différente de celle affichée !

Comment ça se fait, vous demandez-vous ? Eh bien, cela s'explique tout simplement par le fait nous n'avions dans notre code source rien demandé à Notepad++!

Pour avoir avoir le titre et le texte associé en couleur, il suffit de le demander à notre éditeur de code source préféré. Pour ce faire, il faut relancer Notepad++ et recharger titre-article.html et y insérer une ligne de code (dans le code du même nom) pour faire appel au CSS (feuille de style).

Demandez à Notepad++ de concevoir vos Sites Web (15/350): Premiers pas avec le CSS

Voilà donc, ce que nous allons insérer à ligne 5:

<link rel="stylesheet" href="feuille-style.css" />

Je parie que certains d'entre vous l'ont déjà deviné, feuille-style.css est le nom du fichier (pensez toujours à choisir un nom suffisamment parlant) qui va contenir le code CSS, et le .css est simplement l'extension du fichier feuille-style, qui en précise le type.

Mais, pour l'heure, il n'existe pas encore. Il faut donc bien évidement le créér et surtout le mettre dans le même dossier où se trouve le fichier titre-article.html (cf. la capture d'écran ci-dessous).

Demandez à Notepad++ de concevoir vos Sites Web (15/350): Premiers pas avec le CSS

Voilà le code source (capture d'écran ci-dessous) de la feuille de style que j'ai nommée feuille-style.css ! À noter que les 4, 6 et 12 relèvent des commentaires. Et pour écrire un commentaire dans le CSS, il suffit de faire: /* texte du commentaire */

HTML5 & CSS3: Premiers pas avec le CSS
HTML5 & CSS3: Premiers pas avec le CSS

L'écriture du code source du CSS ne pose de problème particulier. Il vous suffit, d'une part, de lancer Notepad++. Et, d'autre part, de:

  • saisir, à l'identique les lignes de codes ci-dessus;
  • de le sauvegarder comme recommandé;
  • puis d'en tester le rendu avec votre navigateur préféré.

Qu'en est-il justement du rendu ? Le voilà sous Firefox.

Demandez à Notepad++ de concevoir vos Sites Web (15/350): Premiers pas avec le CSS

Je vous invite vivement à faire le test avec Internet Explorer, Google Chrome et Safari.

Que remarquez-vous ? Eh bien, nous avons reproduit presque la même chose que le texte initial, excepté le titre qui s'affiche en grande taille. Cela s'explique simplement par le fait que nous n'avons pas encore abordé les notions de formatage de texte.

Lire la suite: Demandez à Notepad++ de concevoir vos sites Web (16/350).

________________________________

Tutoriels précédents:

Partager cet article

Retour à l'accueil

Commenter cet article

==== De vous à nous ====

Pour être alerté de la publication de nouveaux articles, en temps réel, pensez à vous inscrire, au préalable, à la Newsletter en saisissant votre adresse-mail (valide) dans la zone dédiée, ci-dessous.

 

Après quoi, un mail de confirmation sous forme de lien vous sera envoyé pour s’assurer que vous êtes bien le titulaire de l’adresse-mail saisie. Et, il vous suffira simplement de valider ce lien (en cliquant dessus) pour que votre inscription devienne effective.

 

Du reste, pour nous faire une suggestion, signaler une erreur, un lien inactif ou nous faire part d’une information précise en rapport avec le Congo, cliquez ici.

 

Merci et à bientôt.

 

L'Equipe RdC.   

 

 Météo de la ville de Kinshasa

 

Catégories

Archives

==============================

Nos Tutoriesl

 

 

Algorithmique & programmation :

=================================

 

Convertisseur de devises
 

 

Météo de la ville de Lille

 

 

 

 

Theme: Classical © 2012 - Hébergé par Overblog

GoTop