Développement Web

HTML / CSS

IV Du style avec CSS !

1) Créer un fichier CSS et le lier à un fichier HTLM

Pour intégrer le CSS dans le document HTML, nous allons créer une feuille de style externe que l’on va lier au fichier HTML en utilisant la balise orpheline <link/>. Cette balise est à écrire dans la partie <head> du document HTML.

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>

la balise orpheline <meta charset="UTF-8"> permet de gérer correctement les caractères accentués nous reviendrons sur cette balise ultérieurement.

3) La syntaxe

La syntaxe de base de CSS est composée de 3 parties  écrites sous la forme :

sélecteur { propriété : valeur ; } ( ne pas oublier le point-virgule ! )

Un sélecteur correspond à une balise HTML (<p>, <h1>, etc…) et la propriété est un attribut dont on veut changer la valeur.

Exemple :

p {color : blue ;}

Il est possible de définir plusieurs attributs pour un même sélecteur. :

sélecteur
{
Propriété 1 : valeur ;
Propriété 2 : valeur ;
}

Exemple : (remarque :on peut écrire les attributs sur une ou plusieurs ligne, au choix)

p { color : blue; font-size : 24 px; }

4) Grouper les sélecteurs

Si certaines propriétés s’appliquent à plusieurs sélecteurs, il est possible de les grouper. Ainsi, on écrit :

sélecteur 1, sélecteur 2
{
Propriété 1 : valeur1 ;
Propriété 2 : valeur2 ;
}

Exemple :

h1,h2 {color : blue ; font-size : 24 px ; }

4) Des commentaires dans du CSS

Comme en HTML, il est possible (et important) de mettre des commentaires.

Pour cela, il faut taper :  /* Mon commentaire */

5) Le sélecteur basé sur l'attribut « class »

Pour l’instant, l’inconvénient est que tous les éléments HTML d’un même type ont le même style. Il existe une solution pour appliquer un style différent à un élément donné. Pour cela, on utilise l'attribut spécial class qui fonctionne sur toutes les balises HTML (titre, paragraphe, images, etc…)

HTML

CSS

<p class="intro"> Bienvenue sur mon site </p>

.intro { Propriété : valeur ; }

Notre paragraphe est donc référencé par l'attribut "intro" que nous utilisons dans le fichier CSS pour donner un style particulier à ce paragraphe.

/* Vous noterez le . (point) devant le nom de la classe .intro */

5) Le sélecteur basé sur l'attribut «id»

Même principe que pour class mais en utilisant l'attribut id. Logiquement plusieurs éléments peuvent être de la même « class », par contre un id définit un élément bien précis et un seul.

HTML

CSS

<p class="intro"> Bienvenue sur mon site </p>

#intro1 { Propriété : valeur ; }

/* Vous noterez le # devant le nom de l'id #intro */



7) Formatage du texte

→ Changer la taille du texte.

h1 { font-size : 24 px ; Text-decoration : underline ; }

Dans l’exemple, les titres avec la balise <h1> auront une taille de 24 pixels.

Au lieu de spécifier la taille d’un texte à l’aide de px, correspondant au nombre de pixels, on peut également utiliser l’unité em. 1em vaut la taille de police par défaut dans un navigateur (en général, 16 px). Par exemple, si l’on décide que les titres principaux valent 1 fois et demi la taille standard des caractères, on donne la valeur 1.5em à la propriété font-size.

→ Changer la police du texte.

balise
{
font-family : police1, police2, police3, police4 ;
}

Le navigateur essaiera d’abord d’utiliser la police1, s’il ne l’a pas, il essaiera la police 2, etc Cela évite des problèmes si l’internaute n’a pas la même police que vous. Les polices les plus courantes sont Arial, Arial Black, Comic Sans MS, Courrier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana.

→ Mettre en italique, gras, souligné .

La propriété CSS qui permet de mettre en italique est font-style qui prend trois valeurs :

La propriété CSS qui permet de mettre en gras est font-weight qui prend deux valeurs :

La propriété CSS qui permet de souligné (ou de faire d’autres décorations) est text-decoration qui prend cinq valeurs :

underline : souligné

line-through : barré

blink : clignotant

none : normal

overline : ligne au-dessus

→ Changer l'alignement .

La propriété CSS qui permet d’aligner le texte est text-align qui prend quatre valeurs :





→ Changer la couleur du texte.

La propriété CSS qui permet de définir la couleur du text est color. Il existe plusieurs variantes permettant de définir la couleur :

méthode 1

balise { color : blue ; }

méthode 2

balise { color : rgb(240,96,204) ; }

méthode 3

balise { color : #F060CC ; }

→ Changer la couleur du fond.

La propriété CSS qui permet de définir la couleur du fond est background-color. Elle s’utilise de la même manière que la propriété color.

Exemple (dans le code CSS) :

body { background-color : #F060CC ; }

Positionnement des éléments sur une page (voir site w3schools HTML Layouts)

CSS

HTML

#nav {
height:300px;
width:100px;
float:right;
padding:5px;
}

<div id="nav"> … </div>



Pour aller plus loin avec le css





Auteurs de ce document : Christelle BRIEC – Lycée Sainte-Thérèse Quimper

inspiré largement du site (http://fr.openclassrooms.com/)

Modifications : Christophe Béasse – Lycée Saint-Jo Lamballe – Sept 2014/ sept 2015 / Août 2016