Prérequis

Vous devez maîtriser les cours N° 1 à 3 avant de suivre ce cours

L'auteur

Aurélie ARROT

Html et Css

Cours suivants :

COURS 1 : Prise en main d'Html

COURS 2 : Les balises et attributs HTML

COURS 3 : Intégration multimédia en HTML

COURS 4 : Les feuilles de styles CSS

COURS 4 : Les feuilles de style CSS


en tete html cours 1

 

 

LES OBJECTIFS :
Connaître le fonctionnement général des balises, des identifiants et des classes.

PUBLIC VISE : Tout utilisateurs qui souhaitent se former sur CSS

 

 

PROGRAMME

 

Principe : La page HTML contient l'information et structure (Titre, sous-titre, paragraphes, ...etc.) et la page CSS contient quant à elle que le style ( police, couleur, ...etc.).

Bref le CSS est là pour rendre la page "jolie" !

Ci-dessous notre page d'accueil en html uniquement :



Maintenant la voici avec le HTML et le CSS (et aussi un peu de javascript, mais ça nous le verrons dans un autre cours):



Le CSS est un langage Balisé également.

Il faut savoir que les navigateurs n'interprètent pas toutes les fonctionnalités CSS qui existent. Plus la version du navigateur est ancienne, moins il connaît de fonctionnalités.

Pas de panique, si un navigateur ne connaît pas une fonctionalité CSS de votre page, au pire il ne l'affiche pas, mais cela n'impactera pas la page en elle-même qu'il chargera.

Certains sites, comme normansblog proposent des tables de compatibilité des fonctionnalités de HTML et CSS sur différents navigateurs. Nous vous invitons à aller les consulter.

Insérer du CSS :

Vous pouvez placer votre code CSS :
  • dans un fichier .css que l'on intègre dans la page HTML au niveau de la balise HEAD. Ce qui est la méthode la plus courante et la plus recommandée.
  • Directement dans les balises HTML avec l'attribut style, mais cela devient vite chargé et illisible donc moins utilisé.


  • Un exemple pour vous montrer comment intégrer un fichier CSS à votre page HTML :



    Vous pouvez remarquer que l'on utilise la balise LINK à laquelle nous lions notre fichier CSS.

    Creez un fichier "MyCSS.css" puis liez-le à votre page HTML CoursInitiationHtml.html

    Par exemple, nous voulons dire que :
    le grand titre (H1) sera en blanc, centré et en gras, sur un fond bleu claire
    les paragraphes (P) seront en police verdana, taille 14.

    Si vous avez fait du traitement de texte, comme Word par exemple, ce genre de mise en forme doit vous parler. Dans votre fichier "MyCSS.css" écrivez les lignes suivantes :

    Fichier CSS simple lié a une page HTML

    Toutes les balises HTML peuvent être modifiées.

    Synthétiquement, une feuille CSS ressemblera à cela :



    On remarque 2 zones importantes dans le CSS :

  • Avant les accolades : le nom de la balise HTML sur laquelle on veut mettre un style
  • Dans les accolades : on détermine le style en question à l'aide de propriété et de valeurs.


  • Appliquer un style :

    Pour l'instant, le code CSS que nous avons fait va s'appliquer à toutes les balises H1 et P de notre page.
    Mais dans certains cas nous voudrions peut-être que le style s'applique uniquement sur un paragraphe et pas tous.

    Pour ce faire, on peut utitliser 2 attributs :
  • l'attribut class
  • l'attribut id


  • Voyons comment l'intégrer dans la page html :

    Faire des classes en CSS

    Ici, nous avons associé le style contenu dans la classe ListeBleu (1) dans notre fichier CSS, aux éléments de la 1ère liste de notre page Html (2). Nous voyons bien dans le résultat que les élèment de la liste sont en bleu (3).

    Avec cette solution nous indiquons que nous souhaitons que seules les balises qui ont comme nom "listeBleu" soient affichées en bleu.

    Nous avons expliqué comment appliquer un style simplement. Pour aller plus loin, vous pouvez consulter Les propriétés CSS

     

    EXERCICES

    Les bases HTML

    EXERCICE : Faire un mini site exercices

    Contact

    SARL AAT's

    N° SIREN : 822580056 - N° TVA intracommunautaire : FR40822580056