Introduction

WEB design with CSS

Introduction to web design web with CSS

1. Click on this link to watch the video "présentation et de mise-en-place d'un projet avec CSS"

Cliquer-ici pour regarder la vidéo de présentation et de mise-en-place d'un projet avec CSS

2. Like shown in the video, add a css file named mystyle.css to you web project.

Comme montré dans la vidéo, ajouter à votre projet web un fichier css appelé mystyle.css

3. Link the CSS file with your web pages by adding the tag below (as shown in the video)

Lier le fichier CSS avec vos pages web en ajoutant la balise ci-dessous (Comme montré dans la vidéo):

4. you can then move on to the next chapter "Colors". Those interested can read what is written below this text before moving on to the color chapter.

vous pouvez ensuite passer au chapitre suivant "Colors". Les passionnés peuvent lire ce qui est en dessous de ce texte avant de passer au chapitre sur les couleurs.

A retenir sur CSS:

Vous avez déjà rencontré le HTML (HyperText Markup Language). C'est en HTML que vous avez écrit le code du site web.

Vous avez aussi pu voir que l'on peut configurer l'attribut style d'une balise pour ajouter des décorations comme de la couleur, par exemple :

<p style="color:red"> va permettre d'obtenir un texte en rouge. Cette méthode présente l'inconvénient qu'en cas de volonté de changements de design, il faut intervenir dans chaque balise ce qui peut devenir pénible si les changements à opérer sont nombreux.

Le CSS (Cascading Style Sheets) vient compléter le HTML, il permet de remplacer l'attribut style des balises.

La syntaxe du CSS

L’exemple ci-dessous vous montre comment mettre le texte des paragraphes d’une page HTML en rouge et centré avec CSS, ce code sera placé dans un fichier qui sera lié au document html que l'on veut décorer.

p {

color: red;

text-align: center;

}

On trouve trois éléments différents :

- Le noms des éléments à décorer: on écrit le nom des balises HTML dont on veut modifier le style. Par exemple, si on veut modifier l'apparence des paragraphes <p>, on écrit p mais sans les chevrons (< >)

- Des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. La propriété color permet d'indiquer la couleur du texte, font-size permet d'indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS et vous n'avez à les connaître par cœur

- Les valeurs que l'on donne aux propriétés : pour chaque propriété CSS, on doit indiquer la valeur choisie après deux points (:). Par exemple, pour la propriété color, on indiquera la valeur red pour que le texte soit rouge. Après la valeur, on clôture le réglage avec un point virgule (;) ce qui indique la fin de l'instruction.

Lien entre CSS et HTML

On écrit ( en général) le code CSS dans un fichier différent du fichier HTML. Le fichier qui contient le code css porte l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html). Le lien entre le fichier CSS et la page HTML se place dans la partie <head> de la page HTML avec la balise <link>. Voir l'exemple ci-dessous :

<!DOCTYPE html>

<html>

<head>

< !-- ci-dessous la balise link lie le HTML au fichier mystyle.css-->

</head>

<body>

<p> Bonjour et bienvenue sur mon site </p>

</body>

</html>

ici le fichier css s'appelle « mystyle.css », il est lié à la page HTML grâce à la balise <link/> :

Créé avec HelpNDoc Personal Edition: Créer des sites web d'aide facilement