Scribd
Importer
11 vues4 pages

Lier CSS à HTML : Guide Pratique

Ce document présente un TP sur l'apprentissage du CSS, visant à comprendre son rôle et à lier un fichier CSS à une page HTML. Il décrit la création d'un projet CSS, la structure de base du fichier CSS, et propose des exercices pratiques pour expérimenter avec le stylage des éléments HTML. Les utilisateurs apprendront à modifier les styles de divers éléments tels que le corps de la page, les titres, les paragraphes et les boutons.

Transféré par

Ange Sery
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
11 vues4 pages

Lier CSS à HTML : Guide Pratique

Ce document présente un TP sur l'apprentissage du CSS, visant à comprendre son rôle et à lier un fichier CSS à une page HTML. Il décrit la création d'un projet CSS, la structure de base du fichier CSS, et propose des exercices pratiques pour expérimenter avec le stylage des éléments HTML. Les utilisateurs apprendront à modifier les styles de divers éléments tels que le corps de la page, les titres, les paragraphes et les boutons.

Transféré par

Ange Sery
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

TP : Mes premiers pas en CSS

Objectif :

• Comprendre le rôle du CSS

• Apprendre à lier un fichier CSS à une page HTML

• Découvrir les principales propriétés CSS

• Expérimenter le stylage des éléments HTML

1. Création du projet CSS

1. Reprendre le dossier HTML :

o Si vous avez suivi le TP HTML précédent, ouvrez le dossier MonPremierSite dans VS


Code.

o Si non, créez un nouveau dossier et ajoutez un fichier [Link].

2. Créer un fichier CSS :

o Dans VS Code, créez un fichier nommé [Link] dans le dossier.

2. Lier CSS à HTML

Ajoutez cette ligne dans la section <head> de [Link] pour connecter [Link] :

<link rel="stylesheet" href="[Link]">

3. Structure de base du fichier CSS

Ouvrez [Link] et ajoutez ce code :

/* Changer la couleur du fond */

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

/* Styliser le titre */

h1 {

color: blue;

text-align: center;
}

/* Styliser les paragraphes */

p{

font-size: 18px;

color: #333;

/* Styliser les liens */

a{

color: red;

text-decoration: none;

a:hover {

text-decoration: underline;

/* Styliser les images */

img {

width: 300px;

border-radius: 10px;

/* Styliser les listes */

ul {

list-style-type: square;

padding: 10px;

/* Styliser le formulaire */
input {

padding: 8px;

border: 1px solid #ccc;

border-radius: 5px;

4. Expérimenter avec les styles CSS

Ajoutez ces éléments à [Link] pour voir l'effet du CSS :

Modifier le style du corps de la page

body {

background-color: lightgrey;

font-family: "Verdana", sans-serif;

Changer l’apparence des titres et paragraphes

h1 {

color: darkblue;

text-align: center;

text-transform: uppercase;

p{

font-size: 16px;

line-height: 1.6;

Créer un bouton stylisé

Ajoutez ceci dans [Link] :

<button class="bouton">Cliquez ici</button>

Ajoutez ce style dans [Link] :

.bouton {

background-color: green;

color: white;
padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

.bouton:hover {

background-color: darkgreen;

5. Exercices

1. Changer la couleur du fond en bleu clair.

2. Augmenter la taille du texte des paragraphes à 20px.

3. Styliser les liens pour qu'ils changent de couleur au survol.

4. Créer une classe .boite et l’appliquer à une div avec un texte à l’intérieur.

5. Ajouter un bouton stylisé qui change de couleur au survol.

Vous aimerez peut-être aussi