{{tag>dev web html css}}
====== Allez plus loin ======
Notes et transcriptions du cours [[https://op... age plus interactive, un langage comme JavaScript devient indispensable.
**JavaScript est un langage d... ainsi arriver aujourd'hui à créer des **sites qui deviennent littéralement des applications web**, l'éq... tre, n'hésitez pas à consulter le site de Mozilla Developer pour connaître les spécificités de [[https:
{{tag>dev web html css}}
====== Changez l'apparence du texte ======
Notes et transcriptions du cours ... Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :
<code css>
p {
font-size: 16px... regardez ma page web depuis votre smartphone vous devriez pouvoir le lire. Maintenant, si mon site web ... es de plus. Le lien suivant présente un [[https://developer.mozilla.org/fr/docs/Web/CSS/@font-face|exem
{{tag>dev web html css}}
====== Ajoutez de la couleur et un fond ======
Notes et transcriptions du co... {
color: blue;
}
</code>
De nombreux [[https://developer.mozilla.org/fr/docs/Web/CSS/color_value#les... e à aller tester en direct sur le site de Mozilla Developer les différents effets possibles des proprié... oir plus, vous pouvez vous référer à la [[https://developer.mozilla.org/fr/docs/Web/CSS/background|docu
{{tag>dev web html css}}
====== Abordez d'autres techniques de mise en page ======
Notes et transcrip... ssous des autres (comme des blocs normaux), et il devient possible de modifier leurs dimensions! Et à l... u'un élément qui est de type ''block'' par défaut devienne ''inline''.
<note>
Si vous ne vous souvenez... fonction de la taille de l'écran.
La [[https://developer.mozilla.org/fr/docs/Web/CSS/display|liste d
{{tag>dev web html css}}
====== Utilisez le responsive design avec les Media Queries ======
Notes et...
<code html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</code>
</note>
Ic... n peut rajouter le préfixe ''min-'' ou ''max-'' devant la plupart de ces règles. Ainsi, ''min-width''... ocs, comme on vient de le faire, il arrive qu'ils deviennent trop petits pour le texte qu'ils contienne
{{tag>dev web html css}}
====== Créez des apparences dynamiques ======
Notes et transcriptions du co... âce aux **pseudo-classes**.
<note>
Les [[https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes|... de la puissance des sélecteurs avec le [[https://developer.mozilla.org/fr/docs/Web/CSS/Adjacent_siblin
{{tag>dev web html css}}
====== Faites votre mise en page avec Flexbox ======
Notes et transcription... direction verticale. Dans ce cas, l'axe vertical devient l'axe principal, et ''justify-content'' s'app... x Froggy]]. Avec les différentes propriétés, vous devrez replacer les grenouilles sur les nénuphars.
{{tag>dev web html css}}
====== Découvrez les bases de CSS Grids ======
Notes et transcriptions du co... ur plusieurs colonnes ou plusieurs rangées, on va devoir indiquer un point de départ et un point d'arri... largeur, alors qu'il n'y a que 3 colonnes ? On ne devrait pas plutôt dire ''grid-column-end: 3;'' pour ... lus loin, vous pouvez :
* Creuser la [[https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
{{tag>dev web html css}}
====== Créez des formulaires ======
Notes et transcriptions du cours [[http... ''%%<input type="range">%%'' On utilise [[https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/... enlever les attributs ''name'', vous verrez qu'il devient possible de sélectionner tous les éléments d'
{{tag>dev web html css}}
====== Créez des bordures et des ombres ======
Notes et transcriptions du co... pouvez le faire sans problème. Dans ce cas, vous devrez utiliser ces quatre propriétés :
* ''border
{{tag>dev web html css}}
====== Ajoutez des tableaux ======
Notes et transcriptions du cours [[https:... rois cellules par ligne (donc trois colonnes), je devrai taper ceci :
code html>
<table>
<tr>
