CSS, kézakékéko ??

29.07.2014

1. Le langage CSS

La structure de ce langage se présente de cette façon :

.selecteur { propriete: valeur; }

• selecteur désigne le nom donné à un corps ou à un élément.
• propriete, c'estl’attribut soit l'effet que l'on veut donner à notre selecteur.
• valeur désigne tout simplement la valeur que l'on donne à la propriété. Exemple : "green" pour une couleur.
• Les accolades "{" et "}" s'utilisent juste après le sélecteur et servent à enfermer les propriétés pour dire. << cette propriété est valable pour ce sélecteur >>.
• les points virgules ";" ne sont pas à négliger. Ils permettent de dire que l'on passe à une autre propriete.

2. Utiliser le langage CSS

Il y a différentes façons de donner un aspect à du HTML.

◘ Méthode 1

On peut directement incruster le CSS dans le HTML. Voila un exemple très basique :

<div style="width: 200px; background-color: grey; color: red; font-size: 12px; text-align: center;">Je mange le matin</div>

Ici, j'ai décoré mon texte "Je mange le matin" avec du CSS ce qui donne :

Je mange le matin

Étudions ce code ensemble.
Vous avez surement reconnu quelques termes qui nous viennent de nos voisins les anglais.

• d'abord, "width" qui signifie largeur avec pour valeur "200px" ou autrement 200 pixels
• "background" pour arrière-plan et "color" pour couleur, Puis "grey" pour gris
• encore une fois, "color" pour couleur et "red" pour rouge
• "font" pour police, "size" pour taille et encore "12px" pour 12 pixels
• "text" pour texte, "align" pour alignement et "center" pour centre"

"Mais... il manque quelque chose ! " Rien ne vous échappe hein ! Eh bien oui, on retrouve aussi la balise <div>. Ladies and gentlemen, voici du HTML ! Ce langage se compose de balises dont <div>. Sachez qu'elles se ferment, autour d'un contenu (par exemple, un texte) tout comme les "{" et "}" qui se referment sur les propriete dans un code CSS.

Exemple :

<a>http://anotherkaneasha.eklablog.fr/css-kezakekeko-a108706650</a>

Ici, j'ai utilisé la balise <a> et </a>, les balises qui servent à introduire un lien. Elles disent : “ceci est un lien”.

Puis enfin nous avons "style" qui sert à introduire le CSS au HTML. Voila comment on le présente :

<div style="propriété: valeurs;">MON TEXTE</div>

Ne pas oublier les guillemets !! qui disent “ceci est une propriété”.
♣ Pour les utilisateur d'Eklablog, je recommande d'utiliser cette méthode pour rédiger des articles en utilisant ce bouton.

◘ Méthode 2

Enfin, on peut utiliser une feuille de style pour rédiger notre CSS. Ce procédé s'applique principalement lorsqu'on a énormément de chose à écrire comme pour un site ou... un blog ! Quelle coïncidence ! Cette méthode sépare le CSS au HTML pour rendre la lecture moins brouillon, plus agréable à lire.

♣ Pour les Eklabloger rendez-vous dans Apparence > Modifier le thème > Ajouter du CSS
Cette fois-ci pour des raisons de pratique, on présente le CSS d'une autre façon - facultative mais extrêmement pratique pour ne pas se perdre.

.selecteur {
propriete: valeur;
propriete: valeur;
}

On utilise le retour à la ligne pour un visuel plus agréable. Rien ne vous empêche de tout écrire sur une seule ligne.. Il n'existe aucune règles là-dessus, mais cela facilite la lecture..

<< Et HTML dans tout ça ? >> - Voila comment il se présente :

<div class="selecteur">MON TEXTE</div>

La façon de procéder ressemble énormément à la première. Seule différence, ici on n'utilise pas "style" mais class. Et surtout ! Il n'y a plus de propriétés. On utilise cette fois-ci le nom du sélecteur.

♣ Chez Eklablog, les noms des sélecteurs existent déjà. Pour vous, voilà quelques blogs très utiles qui vous renseignent dessus : Papasti; Le Blog Facile; Fantasy Graph' et j'en passe !

Tuto terminé ! Si ce n'est pas claire n'hésitez pas à poser des questions. Je mettrai l'article à jour si c'est nécessaire ! :D