Ecrire un document css qui permet de changer

- La couleur du texte en rouge

- la taille du texte 16px

- la police du texte

- Souligner le texte

- Avec alignement du texte centrer

- Citer les types de spécification de couleurs possibles en CSS.

- border-style: dotted solid double dashed;

- ajouter une bordure ronde

- border: 5px solid red; // expliquer cette ligne de code

- rendre le texte en minuscule

- ajouter un espace de 5px au debut de chaque paragraphe du code html

- ajouter un espacement entre les caractères de 2px

- ajouter un espace de 1.8 entre les lignes

- rendre la police du texte en "Times New Roman"

Voici le document CSS qui permet de répondre aux exigences mentionnées :

css

/* Couleur du texte en rouge */

color: red;

/* Taille du texte 16px */

font-size: 16px;

/* Police du texte */

font-family: Arial, sans-serif;

/* Souligner le texte */

text-decoration: underline;

/* Alignement centré */

text-align: center;

/* Types de spécification de couleurs possibles en CSS */

/* Nom de la couleur : par exemple, red */

/* Code hexadécimal : par exemple, #FF0000 */

/* Code RGB : par exemple, rgb(255, 0, 0) */

/* Code RGBA : par exemple, rgba(255, 0, 0, 0.5) */

/* Ajouter une bordure ronde */

border-radius: 10px;

/* border-style: dotted solid double dashed; */

border-style: dotted solid double dashed;

/* border: 5px solid red; // expliquer cette ligne de code */

/* Cette ligne de code ajoute une bordure de 5 pixels avec une couleur solide rouge. */

/* Les autres propriétés de la bordure ne sont pas définies, ce qui signifie qu'elles prendront les valeurs
par défaut (par exemple, le style de la bordure sera "solid" par défaut). */

/* Rendre le texte en minuscule */

text-transform: lowercase;

/* Ajouter un espace de 5px au début de chaque paragraphe du code HTML */

/* Note : cette règle s'applique aux éléments <p> uniquement */

padding-left: 5px;

/* Ajouter un espacement entre les caractères de 2px */

letter-spacing: 2px;

/* Ajouter un espacement de 1.8 entre les lignes */

line-height: 1.8;

/* Rendre la police du texte en "Times New Roman" */

font-family: "Times New Roman", serif;

Notez que les règles de style peuvent être appliquées à différents éléments HTML en utilisant des
sélecteurs CSS appropriés. Par exemple, pour appliquer ces règles à tous les éléments <p> de la page
HTML, vous pouvez utiliser le sélecteur CSS suivant :

css

p{

/* Ajouter les règles de style ici */

}
Exercice css Marges :

Ajouter une marge de :

- Gauch 20%, droite 5px, en haut 5px, en bas 2px

- margin: 25px 50px 75px; // commenter cette ligne

- ajouter des marge automatique

- margin-left: inherit; // commenter cette ligne

Voici le document CSS qui permet de répondre aux exigences mentionnées :

css

/* Ajouter une marge de : Gauche 20%, droite 5px, en haut 5px, en bas 2px */

margin: 5px 5px 2px 20%;

/* margin: 25px 50px 75px; // commenter cette ligne */

/* Cette ligne ajoute une marge de 25 pixels en haut, 50 pixels à droite et 75 pixels en bas. */

/* La marge à gauche n'est pas spécifiée, ce qui signifie qu'elle prendra la valeur par défaut de "auto". */

/* Ajouter des marges automatiques */

margin: auto;

/* margin-left: inherit; // commenter cette ligne */

/* Cette ligne force la valeur de la marge gauche à hériter de la valeur de la marge gauche de l'élément
parent. */

/* Si la valeur de la marge gauche de l'élément parent est "auto", cela signifie que la marge gauche de
l'élément en question sera également "auto". */

Notez que les marges peuvent être définies en utilisant différentes unités de mesure, telles que les
pixels, les pourcentages ou les em. Vous pouvez également utiliser la valeur "auto" pour définir une
marge automatique, ce qui permet de centrer un élément horizontalement ou verticalement. Les marges
peuvent être définies individuellement en utilisant les propriétés de marge spécifiques, telles que
margin-top, margin-right, margin-bottom et margin-left. Vous pouvez également utiliser la propriété
margin pour définir toutes les marges en une seule fois en utilisant une syntaxe abrégée.

Exercice les liens en css :

ajouter un lien à la balise html et commenter le résultat en appliquant le code css suivant :

a:link { color: red; }

a:visited { color: green; }

a:hover { color: hotpink; }

a:active { color: blue; }

a:link { text-decoration: none;}

a:visited { text-decoration: none;}

a:hover { text-decoration: underline;}

a:active { text-decoration: underline;}

a:link { background-color: yellow; }

a:visited { background-color: cyan; }

a:hover { background-color: lightgreen; }

a:active { background-color: hotpink;}

Voici un exemple de code HTML avec un lien :

html

<a href="https://www.example.com">Cliquez ici pour visiter Example.com</a>

Et voici le code CSS qui modifie l'apparence du lien en fonction de son état :

css

/* Lien non visité */

a:link {

color: red; /* Couleur du texte en rouge */

text-decoration: none; /* Pas de soulignement */

background-color: yellow; /* Fond jaune */

/* Lien visité */

a:visited {

color: green; /* Couleur du texte en vert */

text-decoration: none; /* Pas de soulignement */

background-color: cyan; /* Fond cyan */

}
/* Lien survolé */

a:hover {

color: hotpink; /* Couleur du texte en hotpink */

text-decoration: underline; /* Soulignement */

background-color: lightgreen; /* Fond vert clair */

/* Lien activé */

a:active {

color: blue; /* Couleur du texte en bleu */

text-decoration: underline; /* Soulignement */

background-color: hotpink; /* Fond hotpink */

Lorsque le lien est non visité, le texte est rouge, sans soulignement et le fond est jaune.

Lorsque le lien est visité, le texte est vert, sans soulignement et le fond est cyan.

Lorsque le lien est survolé, le texte est en hotpink, souligné et le fond est vert clair.

Lorsque le lien est activé (clic), le texte est en bleu, souligné et le fond est hotpink.

Exercice Les listes en css :

ajouter une liste ordonnée et non ordonnée dans HTML et commenter le code CSS suivant :

ul{list-style-type: circle;} // remplacer circle par square

ol{list-style-type: upper-roman;} // remplacer upper-roman par lower-alpha

ul{list-style-image: url(“icon4.png”);}

ul{list-style-type: none;}

Voici un exemple de liste ordonnée et non ordonnée en HTML :

html

<ul>

<li>Pommes</li>

<li>Poires</li>
 <li>Bananes</li>

</ul>

<ol>

<li>Premier élément</li>

<li>Deuxième élément</li>

<li>Troisième élément</li>

</ol>

Et voici le code CSS qui modifie l'apparence des listes :

css

/* Liste à puces */

ul {

list-style-type: circle; /* Style de puce en cercle */

list-style-image: url("icon4.png"); /* Image de puce */

/* list-style-type: none; */ /* Pour supprimer les puces */

/* margin-left: 20px; */ /* Ajouter une marge à gauche */

/* Liste à numéros */

ol {

list-style-type: upper-roman; /* Style de numérotation en chiffres romains majuscules */

/* list-style-type: lower-alpha; */ /* Style de numérotation en lettres minuscules */

/* margin-left: 20px; */ /* Ajouter une marge à gauche */

/* Modifier le style de la puce */

/* ul {

list-style-type: square; /* Style de puce en carré */

/* list-style-image: url("icon4.png"); /* Image de puce */

} */

La première règle CSS modifie le style de la liste à puces en remplaçant le cercle par un carré grâce à la
propriété ‘list-style-type’. On peut également utiliser d'autres valeurs comme ‘disc’ (disque), ‘square
‘(carré), ‘none’ (aucune puce) etc. Ici, on peut remplacer’ circle ‘par ‘square’ pour changer le style de la
puce en carré.

On peut aussi ajouter une image de puce personnalisée en utilisant la propriété ‘list-style-image’.

La deuxième règle CSS modifie le style de la liste ordonnée en utilisant la numérotation en chiffres
romains majuscules grâce à la propriété ‘list-style-type’. On peut également utiliser d'autres valeurs
comme ‘decimal’ (chiffres arabes), ‘lower-alpha’ (lettres minuscules) etc. Ici, on peut remplacer ‘upper-
roman’ par ‘lower-alpha’ pour utiliser la numérotation en lettres minuscules.

La troisième règle CSS ajoute une image de puce personnalisée à la liste à puces grâce à la propriété ‘list-
style-image’. Ici, on utilise l'image ‘icon4.png’ pour remplacer la puce par défaut.

La quatrième règle CSS supprime les puces de la liste à puces en utilisant la valeur ‘none’ pour la
propriété ‘list-style-type’. On peut également ajouter une marge à gauche en utilisant la propriété
‘margin-left’.

Exercice les tableaux en css :

Ajouter un tableau en html et commenter le code suivant

table { width: 100%; }

td { height: 50px; }

td { text-align: left;}

td { padding: 15px; text-align: left; }

tr:hover {background-color: #f5f5f5;}

Le code CSS ci-dessus est utilisé pour appliquer des styles à un tableau HTML.

‘table { width: 100%; }‘: Cela rend la table occuper 100% de la largeur de son conteneur.

‘td { height: 50px; }’ : Cela définit la hauteur de chaque cellule de tableau à 50 pixels.

‘td { text-align: left;}’ : Cela aligne le contenu de chaque cellule de tableau à gauche.

‘td { padding: 15px; text-align: left; }’ : Cela ajoute un espacement de 15 pixels à l'intérieur de chaque
cellule de tableau et aligne le contenu de chaque cellule de tableau à gauche.

‘tr:hover {background-color: #f5f5f5;}’ : Cela ajoute un fond de couleur gris clair à une ligne de tableau
lorsque la souris passe dessus.

Ces styles peuvent être ajustés en fonction des besoins de conception.

Exercice Background, Border, width et height :

- Ajouter une image comme arrière-plan fixe avec une répétition vertical

- Ajouter la couleur red comme arrière-plan

Ajouter une bordure double et verte à gauche et à droite de taille 5px à l’élément p du document html

- padding: 25px 50px;

- border: 1px solid red; // commenter cette ligne

Ajouter une image et une division en html

- Changer la largeur de l’image et de la division

- Changer la longueur de l’image et de la division

Voici les codes HTML et CSS pour les différents exercices :

« Ajouter une image comme arrière-plan fixe avec une répétition vertical :

css

body {

background-image: url("background.jpg");

background-repeat: repeat-y;

background-attachment: fixed;

Ajouter la couleur red comme arrière-plan :

css

body {

background-color: red;

Ajouter une bordure double et verte à gauche et à droite de taille 5px à l’élément p du document html :

css

p{

padding: 25px 50px;

border-left: 5px double green;

border-right: 5px double green;

Ajouter une image et une division en html :

html

<div>

<img src="image.jpg" alt="image">

<div>Contenu de la division</div>

</div>

Changer la largeur de l’image et de la division :

css

img {

width: 200px;

div {

width: 50%;

Changer la longueur de l’image et de la division :

css

img {

height: 300px;

div {

height: 50%;

Commenter la ligne border: 1px solid red; :

css

/* Cette ligne ajoute une bordure solide de 1 pixel de couleur rouge autour de l'élément. */

Ces styles peuvent être ajustés en fonction des besoins de conception.

Exercice Color :

Ecrire un document html contenant des titres

- Mettre les titres en bleu

- Mettre le titre principal en italique ;

- Changer la couleur de fond de la page, tout en gardant un fond blanc pour les paragraphes.

- Ajouter une marge de 5px en haut et 2px en bas de page pour le contenu du document html

Voici les codes HTML et CSS pour les différents exercices :

HTML avec des titres :

html

<!DOCTYPE html>

<html>

<head>

<title>Exercice Color</title>

</head>

<body>

<h1>Titre 1</h1>

<h2>Titre 2</h2>

<h3>Titre 3</h3>

<p>Paragraphe</p>

</body>

</html>

Mettre les titres en bleu :

css

h1, h2, h3 {

color: blue;

Mettre le titre principal en italique :

css

h1 {
 font-style: italic;

Changer la couleur de fond de la page, tout en gardant un fond blanc pour les paragraphes :

css

body {

background-color: lightgray;

p{

background-color: white;

Ajouter une marge de 5px en haut et 2px en bas de page pour le contenu du document html :

css

body {

margin: 5px 0 2px;

Ces styles peuvent être ajustés en fonction des besoins de conception.

Travail à faire :

- Réaliser un menu déroulant utilisant HTML et CSS

- Réaliser un exposé sur le bootstrap 4 : https://getbootstrap.com/

- Diaporama en html et css

Menu déroulant en HTML et CSS

Voici un exemple de menu déroulant en HTML et CSS :

html

<!DOCTYPE html>

<html>

<head>

<title>Menu déroulant</title>
<style>

nav {

background-color: #333;

color: #fff;

padding: 10px;

nav ul {

list-style: none;

margin: 0;

padding: 0;

nav ul li {

display: inline-block;

margin-right: 10px;

position: relative;

nav ul li ul {

display: none;

position: absolute;

top: 100%;

left: 0;

background-color: #333;

padding: 10px;

nav ul li:hover ul {
 display: block;

nav ul li ul li {

display: block;

margin: 0;

nav ul li ul li a {

color: #fff;

text-decoration: none;

</style>

</head>

<body>

<nav>

<ul>

<li><a href="#">Accueil</a></li>

<li><a href="#">Produits</a>

<ul>

<li><a href="#">Ordinateurs</a></li>

<li><a href="#">Smartphones</a></li>

<li><a href="#">Tablettes</a></li>

</ul>

</li>

<li><a href="#">Services</a>

<ul>

<li><a href="#">Support technique</a></li>

<li><a href="#">Assistance</a></li>
 </ul>

</li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</body>

</html>

Ce menu déroulant utilise une liste non ordonnée pour la structure du menu, et utilise des sélecteurs CSS
pour appliquer des styles différents aux éléments du menu. Les sous-menus sont affichés en position
absolue lorsqu'un élément parent est survolé.

Bootstrap 4

Bootstrap est un framework front-end populaire qui permet de créer des sites Web réactifs rapidement
et facilement. Bootstrap 4 est la dernière version de ce framework et propose de nombreuses
fonctionnalités utiles pour les développeurs Web.

Bootstrap 4 utilise des classes prédéfinies pour appliquer des styles à différents éléments HTML. Par
exemple, vous pouvez utiliser la classe btn pour créer un bouton, ou la classe container pour créer une
grille réactive.

Voici quelques fonctionnalités clés de Bootstrap 4 :

Grille réactive : Bootstrap 4 propose une grille réactive qui permet de créer des mises en page réactives
et adaptables pour différents appareils.

Composants : Bootstrap 4 propose de nombreux composants prêts à l'emploi, tels que des boutons, des
formulaires, des cartes, des modales, etc.

Typographie : Bootstrap 4 propose des styles de typographie prédéfinis pour les titres, les paragraphes,
les listes, etc.

Thèmes : Bootstrap 4 propose des thèmes personnalisables pour personnaliser l'apparence de votre site
Web.

Bootstrap 4 est largement utilisé dans l'industrie pour créer des sites Web réactifs et professionnels.