s dessus, on doit écrire notre CSS comme ceci :
<code css>
a:hover {
// Insérer ici les propriétés CSS à appliquer
}
</code>
D'où il sort ce ''a'' qu'on a mis avant la pseu... va s'appliquer au sélecteur ====
Dans le bout de code ci-dessous, on va appliquer une couleur différent... element .
On a la structure suivante en HTML :
<code html>
<body>
<div class="mon-element">
<h1>Ma
esoin de déclarer la propriété display: grid; :
<code css>
.conteneur {
display: grid;
}
</code>
Ensuite, il faut préciser quelques éléments supplémenta... nts déclarés côté HTML de la manière suivante :
<code html>
<div class="conteneur">
<div class="box... >
<div class="box">🐋 Élément 9</div>
</div>
</code>
La classe CSS ''.box'' permet d'ajouter un peu
la structure de base d’un formulaire en HTML :
<code html>
<p>Texte avant le formulaire</p>
<form... </form>
<p>Texte après le formulaire</p>
</code>
Je donne la valeur "get" à l'attribut ''method... ction ?
Si notre projet comportait également du code en backend(confère note ci-dessous), c'est là qu'... s'agit d'une zone de texte d'une seule ligne :
<code html>
<input type="text">
</code>
Ensuite, il fa
e <link> doit être insérée sous <head></head> :
<code html>
<head>
<meta charset="utf-8">
<titl... link href="style.css" rel="stylesheet">
</head>
</code>
===== Appliquez une propriété CSS à une balise ... présents dans un fichier CSS est la suivante :
<code css>
h1 {
color: blue;
}
</code>
Dans un code CSS comme ci-dessus, on distingue 2 parties :
* Le
e'') d'apparaître sous forme de type ''block'':
<code css>
a {
display: block;
}
</code>
À ce moment-là, les liens vont se positionner les uns en dessou... ents qui ont la classe secret, je vais écrire :
<code css>
.secret {
display: none;
}
</code>
''none'' est très pratique lorsqu'il faut cacher certains
ste au-dessus.
On écrit dans le fichier HTML :
<code html>
<p class="element">Élément</p>
</code>
Puis dans le CSS:
<code css>
.element {
border-top: 3px #EB5353 dotted;
border-right: 3px #F9D923... E7C dashed;
border-left: 3px #187498 solid;
}
</code>
Ce qui nous donnerait :
{{exemple_bordures.png}
sont les balises %%<div> et <span>%%.
</note>
<code html>
<div class="container">
<div class="element... class="element element3">Élément 3</div>
</div>
</code>
Mais si je fais ça, par défaut, mes éléments vo... c'est ''flex'' et on l'applique au conteneur :
<code css>
.container {
display: flex;
}
</code>
... alors les blocs se placent par défaut côte à côte. Ma
ne (donc trois colonnes), je devrai taper ceci :
code html>
<table>
<tr>
<td>Carmen</td>
...
<td>États-Unis</td>
</tr>
</table>
</code>
Bon, le résultat est un peu déprimant : Cela ne... ur créer des bordures à nos cellules, on fait :
<code css>
td {
border: 1px solid black; /* auront une bordure de 1px */
}
</code>
Et voici le résultat juste en dessous :
{{sche
modifier la couleur du texte, c'est ''color''.
<code css>
h1 {
color: blue;
}
</code>
De nombreux [[https://developer.mozilla.org/fr/docs/Web/CSS/color_v... changera la couleur d'arrière-plan de la page :
<code css>
body {
background-color: black; /* Le fond... : white; /* Le texte de la page sera blanc */
}
</code>
On a demandé à ce que le texte de la balise ''<
s aient une largeur de 50 %, on écrira en CSS :
<code css>
p {
width: 50%;
}
</code>
Le résultat est visible juste en dessous :
{{exemple_largeur_bloc_... prendre un design très précis. Essayez le bout de code suivant pour voir :
<code css>
p {
width: 250px;
}
</code>
Les images sont un cas un peu particul
la balise ''<legend>''. Regardez cet exemple :
<code html>
<form method="get" action="">
<fieldset>
... "4"></textarea>
</p>
</fieldset>
</form>
</code>
On ajoute un peu de CSS pour avoir un style sur... t par défaut dans le champ "prenom", on écrit :
<code html>
<input type="text" name="prenom" id="prenom" autofocus>
</code>
===== Rendez un champ obligatoire avec required
ne media query ?
Voilà à quoi cela ressemble :
<code css>
@media screen and (max-width: 1200px) {
/*... vos propriétés CSS ici, avec vos sélecteurs*/
}
</code>
Les tailles que nous indiquons avec ''min-width... e ''<head>'' de notre site) la ligne suivante :
<code html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</code>
</note>
Ici on demande a ce que le "viewport" d
16 pixels de hauteur, vous devez donc écrire :
<code css>
p {
font-size: 16px;
}
</code>
Il y a plusieurs moyens d'indiquer une valeur relative. Une des ... it avec une valeur inférieure à 1, comme 0.8em.
<code html>
<p class="elem1">Élément 1 : 1em</p>
<p cla... 1.3em</p>
<p class="elem3">Élément 3 : 2em</p>
</code>
<code css>
.elem1 {
font-size: 1em;
}
.elem2
place, pour des raisons de cohérence, en tête du code, donc au début de la balise ''<body>'' :
<code html>
<body>
<header>
<!-- Placez ici le contenu d... l'en-tête de votre page -->
</header>
</body>
</code>
L'en-tête peut contenir tout ce que vous voulez... .
Ici on pourrait avoir, de façon simplifiée :
<code html>
<nav>
<ul>
<li>
<a
