Les bases du CSS
Bonjour a tous, suite à mes deux articles sur les bases du HTML, il me semblais indispensable de vous parler des bases CSS.
Nous avons vu dans l'article sur le Body en HTML que l'on pouvait créer des ID ou des classes. Ce sont ces éléments que vous allez utiliser dans votre code CSS pour lui appliquer des propriétés.
Dans un fichier CSS il n'y a pas de head ni de body, c'est plus simple que ça.
Comment affecter tel ou tel élément HTML?
Imaginons que vous ayez des paragraphes dans votre code HTML et que vous voulez changer la couleur du texte de tout vos paragraphes.
Il suffi de dire dans votre fichier CSS (qui doit être relié a votre fichier HTML grâce à une fonction dans le head) que tout vos paragraphes ont une couleur bleu par exemple.
p { color: blue; }
-Nous avons donc mis "p" pour dire paragraphe car en html un paragraphe se fait avec <p>.
-Ensuite ouvert des accolades.
-Défini la propriété que l'on veut modifier, en l’occurrence la couleur suivi de ":"
-Donné la couleur que l'on souhaite (blue) suivi d'un ";"
-Et enfin refermé l'accolade.
Lorsque vous définissez un Identifiant, par exemple <div id="header"> vous devez écrire dans votre fichier HTML...
#header { }
...Et lui ajouter les propriétés que vous voulez.
Lorsque c'est une classe, par exemple <div class="content"> :
.content{ }
Pour un ID il ya donc un "#" devant et pour la classe un point.
Quelques propriétés CSS pour débuter.
Je vous propose quelques propriétés CSS très utilisées pour vous faciliter la tâche de recherche !
La hauteur d'un bloc
Nous avons vu que les balises <div> étaient là pour créer des bloc, vous devez leurs définir une hauteur. Prenons l'exemple de notre content, nous donnons comme hauteur 100 pixels. On utilise "height"
.content{ height: 100px; }
La largeur d'un bloc
Comme pour la hauteur, il vous faut une largueur, nous prendrons aussi 100px. On utilise "width"
.content{ height: 100px; width: 100px; }
Couleur d'un texte
Nous voulons maintenant que tout le texte du contenu soit en bleu. pour cela on utilisera "color"
.content{ height: 100px; width: 100px; color: blue; }
Couleur de fond
Et que le fond soit en jaune. "background-color".
.content{ height: 100px; width: 100px; color: blue; background-color: yellow; }
Marge extérieur
La marge extérieur est l'espace qu'il y aura à l’extérieur de votre div.
L'attribut margin fonctionne comme ceci:
margin: distance-haut distance-droite distance-bas distance-gauche;
Imaginons que vous souhaitiez une marge à gauche de 20px. "margin"
.content{ height: 100px; width: 100px; color: blue; background-color: yellow; margin: 0 0 0 20px; }
Marge intérieur
Pour la marge intérieur, on utilise l'attribut "padding".
.content{ height: 100px; width: 100px; color: blue; background-color: yellow; margin: 0 0 0 20px; padding: 10px; }
J'ai ici mis qu'une seule valeur pour le padding, cela aura pour effet de faire 10 pixels de marge interne de chaque cotés: haut droite bas gauche.
Taille de la police
Pour ajuster la taille de la police a votre guise, utilisez "font-size".
.content{ height: 100px; width: 100px; color: blue; background-color: yellow; margin: 0 0 0 20px; padding: 10px; font-size: 14px; }
Aligner du texte images ou blocs
Vous souhaitez centrer votre texte ? L'aligner à droite ou a gauche? "text-align" est là pour ca.
.content{ height: 100px; width: 100px; color: blue; background-color: yellow; margin: 0 0 0 20px; padding: 10px; font-size: 14px; text-align: center; }
Dans mon cas j'ai centrer le texte contenu dans ".content" mais pas le bloc "content". Si j'avais voulu center mon bloc "content" il aurait fallu que j'utilise "margin: auto;" dans un bloc parent, disons "body".
Police
Pour la police, on utilise "font style".
.content{ height: 100px; width: 100px; color: blue; background-color: yellow; margin: 0 0 0 20px; padding: 10px; font-size: 14px; text-align: center; font-style: 'arial'; }
Style de police
J'entend par style de la police l'italique et le gras.
Pour faire de l'italique il faut utiliser:
font-style: italic;
Et pour du gras il vous faut :
font-weight: bold;
Bordures
Enfin, vous voulez ajouter des bordures à vos blocs, rien de plus simple:
.content{ height: 100px; width: 100px; color: blue; background-color: yellow; margin: 0 0 0 20px; padding: 10px; font-size: 14px; text-align: center; font-style: 'arial'; border: 1px solid black; }
Ici j'ai mis une bordure d'un pixel, linérair, et noire.
Pour plus de propriétés, référez vous à mes articles sur les ombres, bordures arrondies, transitions et animations.