hiers CSS, modifier **TOUTES** les valeurs à la main, une par une.
Reprenons l’introduction de notre ... rple {
color: #a5b4fc;
}
.intro__title {
margin-bottom: 15px;
font-size: 3.5em;
color: #a5b4f... **référencer** à chaque fois qu’on en aurait besoin, ce serait vraiment pratique. Eh bien, heureuseme... ndre, ne surtout pas toucher !). Si vous avez besoin d’utiliser votre couleur (ou de manger votre choc
ieur des autres : souvenez-vous, un **bloc** ''<main>'' contient par exemple des blocs ''<section>'' ,... de fond.
Maintenant, rajoutons un peu de CSS afin de modifier la largeur des paragraphes. Si on veu... isiteur.
Toutefois, il se peut que vous ayez besoin de créer des blocs ayant une dimension précise en... on exacte.
===== Définissez des marges avec margin et padding =====
**Tous les blocs possèdent des
oms.com/|Openclassrooms]].
Vous avez créé un mixin pour incorporer une bordure sur le titre du portf... dark-purple: #1d0221;
$title-color: #a5b4fc;
@mixin title-shadow {
text-shadow: .50rem .50rem $dark-... ' qui contiennent chacune une couleur ;
* un mixin ''title-shadow'' qui contient une propriété CSS t... e une couleur ''$dark-purple''.
Comment cette mixin est-elle utilisée ?
<code sass>
.intro__title {
/ul>
</nav>
</code>
===== Utilisez la balise <main> pour le contenu principal de la page =====
La balise ''<main>'' permet de déclarer le contenu principal de vot... r>'' et de potentiels ''<aside>''. La balise ''<main>'' doit être **unique** : il n'y en a qu'une seul... ge :
<code html>
<body>
<header></header>
<main>
</main>
<footer></footer>
</code>
===== Uti
}
</code>
Les tailles que nous indiquons avec ''min-width'' ou ''max-width'' sont souvent appelées "p... ure ou égale à 1 200 pixels.
<note>
Attention, afin que les Media Queries soient prises en compte cor... our l’imprimer).
On peut rajouter le préfixe ''min-'' ou ''max-'' devant la plupart de ces règles. Ainsi, ''min-width'' signifie “largeur minimale”, ''max-height
paire ''<table></table>'' indique le début et la fin d'un tableau. Cette balise est de type ''block'',... ée") :
* ''<tr></tr>'' indique le début et la fin d'une **ligne du tableau** ;
* ''<td></td>'' indique le début et la fin du **contenu d'une cellule**.
{{schema_html_tabl... entrez un tableau HTML avec la propriété CSS margin =====
Un peu plus haut dans le chapitre avait ut
ooms]].
Pour créer un formulaire, vous aurez besoin de la balise HTML ''<form></form>'', elle permet d'indiquer le début et la fin du formulaire.
Voici les deux attributs indispen... est utilisé pour **identifier** l'élément HTML afin d’y accéder et de le manipuler. Il est donc uniqu... rénom" qui s'affichera".
On peut ajouter un certain nombre d'autres attributs à la balise ''<input>''
compilation sert à traduire le code Sass en CSS afin que les navigateurs puissent les lire et les util... avers l’ensemble de votre code**.
<code sass>
$main-color: red;
.header {
background-color: $main-color;
}
.footer {
background-color: $main-color;
}
</code>
Ce qui nous donne en CSS :
<code css
izons, il nous reste quelques notions à aborder afin que vous puissiez être en totale autonomie.
====... s en ligne =====
Si vous vous souvenez bien, en fin de la partie 1, je vous expliquais que les naviga... r eux-mêmes, et que c’est pourquoi nous avons besoin de… compiler notre code en CSS.
Il existe bien d... imaginez que vous travailliez au café, dans le train ou simplement dans un endroit avec une mauvaise c
sera particulièrement utile quand nous aurons besoin d'adapter nos pages aux plus petits écrans. Nous ... eur par défaut) ;
* ''flex-end'': alignés à la fin ;
* ''center'': alignés au centre ;
* ''space... ignés au début ;
* ''flex-end'' : alignés à la fin ;
* ''center'' : alignés au centre ;
* ''base... tainer {
display: flex;
}
.element {
margin: auto;
}
</code>
===== Répartissez les blocs su
s et réfléchissez à la façon dont vous êtes en train de structurer votre bloc. Il y a des chances que vous soyez en train de créer des sélecteurs trop spécifiques.
<note>... du parent, ici <div>.
<code css>
.links {
margin-left: 30px;
}
.links > a {
color: #242424;
t... e le combinateur descendant, mais il en existe plein d’autres. Et je suis certaine que vous en connais
id. Sauf que, cette fois-ci, vous allez avoir besoin de déclarer la propriété display: grid; :
<code ... léments de classe ''box''. Or, on peut avoir besoin de définir des hauteurs différentes aux rangées, ... n point d'arrivée pour nos éléments.
On aura besoin des propriétés suivantes pour déclarer nos élémen... bles avec les grids.
Si vous voulez aller plus loin, vous pouvez :
* Creuser la [[https://develope
étés CSS, mais rassurez-vous, vous n’avez pas besoin de les connaitre toutes par cœur. Pour chaque pro... il est possible de cumuler plusieurs classes au sein d'une même balise). Par exemple :
<code html>
<b... s une phrase ?
Bonne question ! Si vous avez besoin de donner un attribut à certains mots pour leur d... ine", c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte pour sélectionner certai
maintenant, le navigateur dispose les éléments afin qu'ils ne se superposent jamais. Ils font partie ... t d'origine de la balise qui démarre depuis son coin supérieur gauche. C'est de là qu'on peut le dépla... nset|position unset]] réinitialise la propriété afin que sa valeur soit la valeur héritée depuis l'élé... ar rapport à l'élément B, et non par rapport au coin en haut à gauche de la page.
* Lorsque plusieur
