Les bases du CSS

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.