3 - CSS - Débuter son site Web

3.1. La structure du CSS

Les styles CSS s'écrivent de la façon suivante :

Structure	Exemple avec la balise h1
balise{ style-A: caractéristiques; style-B: caractéristiques; }	h1{ color: red; font-size: 30px; border: 1px solid blue; }

Comme vous pouvez l'observer, on attribut les styles à un type de balises.

Pour notre exemple, ça signifie que toutes les balises h1 de la page auront les styles décrits dans le CSS.

Nous verrons plus tard comment faire pour donner un style différent à des balises du même type.

Tous les styles CSS peuvent s'appliquées sur presque tous les types balises.

Voyons maintenant les principaux styles CSS !

3.2. Les principaux styles

Pour chaque exemple de style CSS, vous pouvez :

• Cliquer sur les boutons pour voir différents exemples ;
• Modifier le code CSS pour tester en temps réel les différents styles CSS.

La couleur du texte

Exemple :

Codes CSS	HTML et affichage
Style de la balise p : color: blue; Style de la balise b : color: red;	<p>Un <b>groupe de mots</b> ...</p>
	Un groupe de mots coloré.

Les codes couleurs héxadécimaux et RVB sont équivalent, vous pouvez utiliser l'un comme l'autre (l'hexadécimal est plus court à écrire).

Exemple, le code #ce2361 équivaut au code rgb(206, 35, 97) (ce₁₆=206₁₀, 23₁₆ = 35₁₀ et 61₁₆ = 97₁₀).

Rappel :

• Le code RVB va de (0, 0, 0) à (255, 255, 255) (respectivement de noir au blanc).
• Le code hexédécimal va de #000000 à #ffffff (respectivement de noir au blanc).

La couleur du fond

Exemple :

Codes CSS	HTML et affichage
Style du fond : background-color: cyan; Style de la balise b : background-color: yellow;	<p>Un <b>groupe de mots</b> ...</p>
	Un groupe de mots coloré.

Les encadrements

Codes CSS	HTML et affichage
Style de la balise b : border: 2px solid red;	<p>Un <b>groupe de mots</b> ...</p>
	Un groupe de mots encadré.

Il est possible d'arrondir les angles des encadrements :

Codes CSS	HTML et affichage
Style de la balise p : border-radius: 0; border: 3px solid red;	<p>Le nombre de pixels...</p>
	Le nombre de pixels indique de rayon de l'arrondi. Plus il est grand, plus votre bordure sera arrondi. Bien sûr, il faut avoir mis une bordure à votre élément pour que cela fonctionne !

Les marges

Les marges internes

Codes CSS	HTML et affichage
Style de la balise b : padding: 0;	<p>Un <b>groupe de mots</b> ...</p>
	Un groupe de mots avec une marge interne.

Les marges externes

Codes CSS	HTML et affichage
Style de la balise b : margin: 0;	<p>Un <b>groupe de mots</b> ...</p>
	Un groupe de mots avec une marge externe.

La police d'écriture

Tout d'abord, il est possible de changer la taille de la police d'écriture.

Codes CSS	HTML et affichage
Style de la balise b : font-size: 10px;	<p>Un <b>groupe de mots</b> ...</p>
	Un groupe de mots avec une taille de police différente.

Il est également possible de changer la police d'écriture elle-même.

Toutefois, toutes les polices d'écriture ne sont pas prises en compte par les navigateurs. Il faut se renseigner si vous voulez une police d'écriture peu utilisée.

Codes CSS	HTML et affichage
Style de la balise b : font-family: sans-serif;	<p>Un <b>groupe de mots</b> ...</p>
	Un groupe de mots avec une police d'écriture différente.

La largeur et la hauteur

Codes CSS	HTML et affichage
Style de la balise img : width: 60px; height: auto;	<img src="lien" alt="...">

Les alignements

Codes CSS	HTML, affichage et explications
Style de la balise p : text-align: left;	<p>Il existe plusieurs...</p>
	Il existe plusieurs modes d'alignement : à gauche, à droit, au centre et justifier. Conseil : il est toujours préférable de justifier un texte plutôt que de l'aligner à gauche !

Les (dis)positions

Codes CSS	HTML, affichage et explications
Style de la 2ème balise img : position: static;	<img src="lien" alt="..."> <p>Voici... <ul>...</ul></p>
	Voici les différentes options du style position : static ; relative ; absolute ; sticky ; fixed.

Sans coordonnées :

Avec des coordonnées :

Voici comment marche des différentes options du style position :

• La position static est la valeur par défaut.
• La position relative permet de décaler l'élément, tout en concervant son emplacement.
• La position absolute permet de retirer l'élément de son emplacement et de le placer où l'on veut dans la page ou dans l'élément "parent" (si ce dernier est en position relative).
• La position sticky permet de retirer l'élément de son emplacement et de le fixer en haut de la fenêtre lorsque l'on déroule la page.
• La position fixed permet de retirer l'élément de son emplacement et de le fixer sur la fenêtre aux coordonnées indiquées. Il ne bougera pas, même en déroulant la page.

Pour mettre des éléments côtes à côtes, soit on utilise la balise table, soit on utilise le style float :

Codes CSS	HTML, affichage et explications
Style de la balise img : float: none;	<img src="lien" alt="..."> <p>Le style float permet...</p>
	Le style float permet de changer le flux de l'image au dessus du paragraphe pour la mettre à gauche ou à droite de celui-ci.

3.3. Créer un fichier CSS

Le CSS peut être mis à différents endroits dans une page Web :

• Directement dans une balise HTML, dans un attribut style="..." ;
• Dans une balise style placée dans la head d'un fichier HTML ;
• Dans un fichier à part, que l'on importe dans le fichier HTML.

Nous verrons ensemble uniquement la dernière version. Pourquoi ?

• Elle permet de différencier le HTML et le CSS, ce qui rend le programme plus lisible ;
• Elle permet à deux personnes de travailler en même temps (une personne travaille sur le HTML et l'autre sur le CSS) ;
• Elle permet d'utiliser le même code CSS pour plusieurs pages.

Comment importer un fichier CSS dans le fichier HTML ?

C'est tout simple ! Il suffit de placer la balise suivante dans la balise head d'un fichier HTML :

<link rel="stylesheet" type="text/css" href="fichier.css">

Si les deux fichiers ne sont pas dans le même dossier, il faut indiquer dans l'attribut href le chemin exacte du fichier HTML, vers le fichier CSS.

Tout comme le langage HTML, le langage CSS ne nécessite pas de logiciel particulier. En pratique, nous n'avons besoin que d'un navigateur et d'un logiciel de bloc-note (pré-installées sur les ordinateurs).

Je vous conseille tout de même les lgiciels Notepad++ et Bracket.

Le principal est de bien enregistrer le fichier au format ".css" pour que le style de la page puisse s'afficher sans problème dans n'importe quel navigateur.

3.4. Exercice

Le but est de s'exercer à utiliser les différents styles CSS vues précédemment.

La correction sera déposée dans le OneDrive.

Téléchargz le fichier HTML "fichier_exercice_CSS.html" dans le OneDrive (voir lien précédent).

Créez un fichier "style.css" dans le même dossier que le fichier HTML que vous avez téléchargez.

Importez maintenant ce fichier CSS dans le fichier HTML (voir la partie 3.3.), puis modifier le fichier CSS pour reproduire le style suivant :

Page à reproduire

Aides :

• Vous pouvez choisir les couleurs de votre choix.
• Le titre principal est mis en bleu et dans la police d'écriture "Papyrus".
• La liste numérotée est mise en vert.
• Les textes soulignés ont un marge interne plus grande et un fond rose.
• Les titres des parties sont encadrés en jaune et les angles sont arrondis. La police d'écriture est "fantasy". La marge externe au dessus de ces titres en plus grande.
• L'image est plus petite, encadrée en orange et mise à gauche des paragraphes.
• Toute la page a un fond vert clair.
• Voici un lien vers des codes couleurs : lien