Support De Cours Css

sentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, les positionnements évolués et bien d'autres choses. HTML peut être (mal) utilisé pour la présentation des sites Web. Mais CSS offre plus d'options et se montre plus précis et sophistiqué. CSS est pris en charge par tous les navigateurs actuels.

Quelle est la différence entre CSS et HTML ?

HTML sert à structurer le contenu, CSS sert à formater un contenu structuré. Retour au bon vieux temps où un type nommé Tim Berners Lee inventait le World Wide Web, le langage HTML était seulement utilisé pour structurer du texte. Un auteur pouvait marquer son texte en déclarant "voici un titre" ou "voici un paragraphe", avec les balises HTML , ou . La popularité du Web croissant, les concepteurs se mirent à rechercher des moyens pour ajouter de la présentation aux documents en ligne. Pour satisfaire à cette demande, les éditeurs de navigateurs (en ce temps-là, Netscape et Microsoft) inventèrent de nouvelles balises HTML, comme par exemple , qui différaient des éléments originaux en cela qu'ils définissaient une présentation et non une structure. Cela conduisit aussi à une situation où les balises de structure originales, telle que , étaient de plus en plus utilisées à tort pour présenter les pages et non pour ajouter une structure au texte. Beaucoup de nouvelles balises de présentation, telle que , n'étaient reconnues que par un type de navigateur. "Vous devez utiliser le navigateur X pour voir cette page" devint un avertissement courant sur les sites Web.

M. Rachid TATIYA

Page 2

I N I A

Feuilles de style CSS

CSS fut inventé pour remédier à cette situation en offrant aux concepteurs Web des possibilités de présentations sophistiquées, gérées par tous les navigateurs. En même temps, séparer le style de présentation des documents de leur contenu rend leur entretien beaucoup plus facile.

Quels sont les avantages de CSS ?

CSS fut une révolution dans l'univers de la conception Web. Les avantages concrets de CSS sont les suivants : √ Le contrôle de la présentation de plusieurs documents par une seule feuille de style ; √ Un contrôle plus précis de la présentation ; √ Des présentations différentes appliquées à des types de médias différents (à l'écran, à l'impression, etc.) ; √ De nombreuses techniques évoluées et sophistiquées.

M. Rachid TATIYA

Page 3

I N I A

Feuilles de style CSS

LEÇON 2 : COMMENT CSS FONCTIONNE-T-IL ?

Dans cette leçon, vous apprendrez à fabriquer votre première feuille de style. Vous saurez ce qu'est le modèle CSS de base et quels sont les codes nécessaires pour utiliser CSS dans un document HTML. Beaucoup de propriétés des feuilles de style en cascade (CSS) sont similaires à celles de HTML. Si vous avez l'habitude d'utiliser HTML pour la présentation, vous reconnaîtrez donc beaucoup de ces codes. Voyons un exemple concret.

La syntaxe CSS de base

Supposons que nous voulions que le fond d'une page Web soit en rouge : Avec HTML, nous l'aurions fait comme ceci : Avec CSS, on peut obtenir le même résultat comme cela : body { background-color: #FF0000; } Comme vous l'aurez remarqué, les codes sont plus ou moins identiques pour HTML et CSS. Cet exemple illustre également le modèle fondamental de CSS :

Mais où place-t-on le code CSS ? C'est précisément ce que nous allons voir maintenant. M. Rachid TATIYA Page 4

I N I A Appliquer CSS à un document HTML

Feuilles de style CSS

Il y a trois façons d'appliquer le style CSS à un document HTML. Elles sont toutes expliquées ci-dessous. Nous vous recommandons d'examiner la troisième méthode, c'est-à-dire celle externe.

Méthode 1 : Dans la ligne (l'attribut style)

Une façon d'appliquer du style CSS à HTML est celle avec l'attribut HTML style. En reprenant l'exemple précédent avec l'arrière-plan rouge, on peut l'appliquer ainsi : Exemple Cette page est rouge

Méthode 2 : Interne (l'élément style)

Une autre méthode consiste à inclure le code CSS avec la balise HTML . Par exemple, comme ceci : Exemple body {background-color: #FF0000;} Cette page est rouge

Méthode 3 : Externe (un lien vers une feuille de style)

La méthode recommandée est celle avec un lien vers ladite feuille de style externe. Pour le reste de ce cours, nous utiliserons cette méthode pour tous les exemples. Une feuille de style externe est simplement un fichier texte ayant l'extension « .css ». Comme n'importe quel fichier, la feuille de style peut être rangée sur un serveur Web ou sur un disque dur. Par exemple, disons que votre feuille de style se nomme « style.css » et se trouve dans un dossier appelé « style ». On peut illustrer cette situation comme ceci : M. Rachid TATIYA Page 5

I N I A

Feuilles de style CSS

L'astuce consiste à créer un lien depuis le document HTML (default.htm) vers la feuille de style (style.css). Ce lien peut être créé en une ligne de code HTML : Remarquez comment on indique le chemin de la feuille de style avec l'attribut href. La ligne de code doit s'inscrire dans la section d'en-tête du code HTML, c'est-à-dire entre les balises et . Comme ceci : Mon document ... Ce lien instruit le navigateur d'utiliser la présentation du fichier CSS pour afficher le fichier HTML. Ce qui est vraiment malin, c'est que plusieurs documents HTML peuvent être reliés à la même feuille de style. En d'autres termes, on peut utiliser un seul fichier CSS pour contrôler la présentation de plusieurs documents HTML.

M. Rachid TATIYA

Page 6

I N I A

Feuilles de style CSS

Cette technique est susceptible d'économiser beaucoup d'efforts. Par exemple, si vous voulez changer la couleur d'arrière-plan d'un site Web contenant 100 pages, une feuille de style peut vous épargner la modification manuelle des 100 documents HTML. Avec CSS, le modification peut intervenir en quelques secondes en changeant juste une seule ligne de code de la feuille de style centrale. Mettons donc en pratique ce que nous venons d'apprendre.

Essayez vous-même

Lancez Bloc-notes (ou votre éditeur de texte habituel) et créez deux fichiers, un fichier HTML et un fichier CSS, avec les contenus suivants : default.htm Mon document Ma première feuille de style style.css body { background-color: #FF0000; } Placez maintenant les deux fichiers dans le même dossier. Songez à sauvegarder les fichiers avec les bonnes extensions (respectivement « .htm » et « .css ») Ouvrez « default.htm » dans votre navigateur et constatez le fond rouge de la page. Félicitations ! Vous avez fabriqué votre première feuille de style !

M. Rachid TATIYA

Page 7

I N I A

Feuilles de style CSS

LEÇON 3 : LES COULEURS ET LES ARRIERE-PLANS

Dans cette leçon, vous apprendrez comment appliquer des couleurs et des couleurs d'arrière-plan à vos sites Web. Nous étudierons également des méthodes évoluées pour positionner et contrôler les images d'arrière-plan. Les propriétés CSS suivantes seront expliquées : √ color √ background-color √ background-image √ background-repeat √ background-attachment √ background-position √ background

La couleur d'avant-plan : la propriété 'color'

La propriété color décrit la couleur d'avant-plan d'un élément. Par exemple, supposons que nous voulions tous les titres du document en rouge foncé. Les titres sont tous balisés avec l'élément HTML . Le code suivant donne aux éléments une couleur rouge. h1 { color: #ff0000; } On peut définir les couleurs avec des valeurs hexadécimales comme dans l'exemple précédent (#ff0000), ou avec les noms des couleurs ("red"), ou avec des valeurs RGB (rgb(255,0,0)).

La propriété 'background-color'

La propriété background-color décrit la couleur d'arrière-plan des éléments.

M. Rachid TATIYA

Page 8

I N I A

Feuilles