Scribd
Importer
15 vues3 pages

Cours Pratique HTML5 & CSS3

Ce document décrit l'utilisation des styles CSS pour modifier la mise en forme d'une page web. Il présente différentes façons d'ajouter du CSS, notamment en ligne, dans la balise <head>, ou dans un fichier externe. Des exemples de code sont fournis.

Transféré par

yarfa763
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
15 vues3 pages

Cours Pratique HTML5 & CSS3

Ce document décrit l'utilisation des styles CSS pour modifier la mise en forme d'une page web. Il présente différentes façons d'ajouter du CSS, notamment en ligne, dans la balise <head>, ou dans un fichier externe. Des exemples de code sont fournis.

Transféré par

yarfa763
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

HTML5 & CSS3 Mr. BEDOUI M.

CSS3
Qu'est-ce que CSS?
 CSS : Cascading Style Sheets
 CSS décrit la mise en forme appliquée dans une page web.

Ajouter le style dans la balise

Activité 01 : Saisir le code suivant:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Premiers tests du CSS</title>
</head>
<body>
<h1> site web: HTML 5 et CSS3 </h1>
<p style="color: blue;">site web: HTML 5 et CSS3</p>
</body>
</html>
Ajouter le style dans la partie head
Activité 02 :Saisir le code suivant:
<html>
<head><meta charset="UTF-8">
<title>CSS3</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p >site web: HTML 5 et CSS3</p>
</body>
</html>

1
2023/2024 2ème TI
HTML5 & CSS3 Mr. BEDOUI M.
Saisir le code suivant:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>titre 2</h2>
<p> paragraphe</p>
</body>
</html>
Saisir le code suivant:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: right;
color: green;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>titre 2</h2>
<p> paragraphe</p>

</body>
</html>

Utiliser un identifiant pour le style dans la partie head

Activité 03 :Saisir le code suivant:

<html>
<head><meta charset="UTF-8">
<title>CSS3</title>
<style>
#para {
color: green;
}
</style>
</head>
<body>
<p id='para' >site web: HTML 5 et CSS3</p>
</body>
</html>

2
2023/2024 2ème TI
HTML5 & CSS3 Mr. BEDOUI M.
Utiliser un fichier style

 Lancer VS Code et créer un nouveau fichier.


 Enregistrer ce fichier par le nom [Link]
 Activité 04: Saisir le code suivant:

p {
color: blue;
}
 Dans le fichier [Link], sisir le code savant:

<html>
<head><meta charset="UTF-8">
<title>CSS3</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<p >site web: HTML 5 et CSS3</p>
</body>
</html>

3
2023/2024 2ème TI

Vous aimerez peut-être aussi