Apprenons le CSS

Introduction

Une autre vision que nous souhaitons partager peut se résumer par cette citation de Ludwig Mies Van Der Rohe, architecte allemand: less is more, (moins c'est plus).

Les CSS(Cascading Style Sheets ou feuilles de style en cascade) sont un ensemble de règles qui permet d'attribuer à des balises (tant HTML que d'autres langages de balisage), on trouve un certain nombre de propriétés (couleur, font, dimension …).

L'atout du CSS consiste en la légèreté du code original ainsi obtenu.
Le document se voit débarrasser du style inclus dans les balises HTML, ce qui permettra d'avoir un code moins lourd et plus structuré.

Historique

Marc Andreessen, entre autre l'un des co-auteurs de Mosaic inclut alors des fonctions basiques de mise en forme des documents.

Avec James H.Clark, il fonde Netscape et publie une première version de Navigator.

Microsoft décide d'implémenter CSS dans Internet Explorer 3, rapidement suivi par Netscape Communicator.

Rôle du W3C

Afin de mettre de l'ordre dans la gestion du CSS, le W3C (World Wide Web Consortium) est fondé en octobre 1994 avec pour objectif de mener le Web à son plein potentiel.

https://validator.w3.org

Support des Applications

Comme dit précédemment le CSS va permettre de mettre en forme une page Web mais celui-ci a donc propriétés qui pourront être utiles au non voyants par exemple (le fait d'utiliser la propriété speech)

Outils de rédaction

Editeur SublimeText

Il reste une dernière chose à voir quel outil va permettre de coder du CSS dans votre éditeur, pour ma part j'utilise le logiciel Sublime Text car je travaille sur un MAC, mais il existe pleins d'autres éditeurs comme (NotePad++, Gedit, Dreamweaver…), certains sont payants et d'autres gratuits, à vous de choisir celui-qui vous convient le mieux.

Insertion d'une feuille style

Avant de commencer à comprendre comment coder la mise en page d'une page il va falloir s'attarder sur comment appliquer le CSS à votre page web, il existe plusieurs façons de faire cela.

Avant de commencer notre code sera basé sur une page Web de type HTML5

Mise en place du CSS directement dans une balise

Feuille de style

La première façon et même dirais-je la plus vielle façon c'est celle d'insérer directement du code CSS dans une balise.
Par exemple, il suffira de noter le mot clé style="", comme cela est montré dans l'exemple ci-dessus.
Cette notation est utilisée lorsque l'on a pas le choix et que l'on être sûr que ce code sera bien pris en compte par la page Web.

Prenez bien en compte que plus votre structure sera décolérer de votre mise en page plus sera clair votre code.

Mise en ligne du CSS dans la balise HEAD

Feuille de style

Dans l'exemple suivant, on insère le code CSS entre les balises <head> et </head>.

Il suffira d'insérer le code CSS entre les balises <style> et </style>

Un exemple est montré entre les balises j'ai juste ajouter un commentaire que j'expliquerai par la suite.


Cette méthode présente l'avantage d'être rapide à mettre en place , mais par contre elle a l'inconvénient de devoir copier à chaque ce code dans chaque que je vous allez créer.

Voyons maintenant la 3 troisième solution qui paraît celle la plus pérenne et la plus structurée afin de faire l'opération entre la structure Web et la mis en forme.

Insertion du CSS à l'aide d'un fichier

Feuille de style

Dans la dernière manière d'insérer du code CSS, cette fois-ci nous faisons un lien qui cible vers un fichier, il suffira de mettre la ligne suivante <link rel="stylesheet" href="style.css"> entre les balises <head> et </head>.

Pour finir, lorsque vous programmez une page Web, vous travaillez avec les 3 manières précisées ci-dessus, par défaut vous définissez votre style par défaut.

Ensuite vous pouvez avoir entre les balises <style></style> un peu de CSS, et parfois lorsque vous ne pouvez plus faire autrement vous pouvez mettre du code CSS directement dans une balise, mais cela doit être de manière sporadique.

Remarque: lorsque vous utilisez du CSS, celui-ci a un poids ou l'on pourrez dire une notion d'importance, selon l'endroit ou il se trouve le poids diffère, voici ses 3 exemples:

Pour conclure, plus votre CSS est prêt du code HTML plus le poids de celui-ci sera FORT, donc dans dans le dernier cas(le 3) sera toujours celui-ci qui sera pris en compte

Les bases en CSS

Maintenant que nous avons vu comment insérer votre code CSS par les 3 manières citées ci-dessus, nous allons commencer à apprendre les bases.

Gestion des commentaires

Les commentaires

Les symboles /* et */ vont permettre d'ouvrir et fermer la phase commentaire.

Le commentaire va permettre de commenter votre code mais aussi décommenter des bouts de codes temporairement, car il ne fait jamais laisser votre code commenter dans une production final, c'est du temps de calcul en plus pour le navigateur de l'internaute.

Syntaxe du CSS

Pour commencer le CSS travaillera toujours avec des sélecteurs, celui-ci pointera toujours sur une balise HTML

Le CSS se présente de la façon suivante:

La syntaxe du CSS

Dans l'exemple ci-dessus, on définit en premier le sélecteur p puis la propriété color: et pour finir la valeur red, pour finir il faudra noter le ; qui valide la ligne.

La partie entre accolades { ….} sera appelée un bloc de déclaration.

Héritage, sélecteurs et classes

Il est souvent nécessaire de cibler un élément précis au sein de la structure d'un document.
Le concept d'héritage est très important, tous les éléments peuvent hériter de certaines propriétés de l'élément ils sont compris.

Prenons l'exemple de la balise <body> avec une taille de police de 12px et une couleur noir, automatiquement les balises

auront la même taille de police ainsi que la même couleur cela évitera de noter à chaque fois du code CSS.

Si vous regardez l'exemple ci-dessous, malgré le fait de ne pas avoir défini de police pour la balise

, l' héritage a fait son travail comme le montre le code ci-dessous:

Nota: j'ai fait exprès de mettre le code CSS dans le fichier HTML afin d'avoir une meilleur visibilité pour vous lecteurs.

L'héritage CSS

Le résultat se passe de commentaires, on voit bien que la balise <p> a hérité de la balise <body>.

Remarque: comme évoqué précédemment certaines propriétés ne pourront pas être héritées comme par exemple la propriété background.

Gestion des classes

Vous venez de voir comment accéder à n'importe quelle balise HTML, mais il souvent intéressant de pouvoir préciser je souhaite accéder au deuxième <> après la deuxième <div>.

Il existe en CSS pleins de façons d'arriver au résultat, mais nous allons le voir le plus facile c'est à dire la gestion de classe, il suffira de noter le mot clé class, exemple class="nom de la classe" à l'intérieur d'une balise comme cela est montré dans l'exemple ci-dessous.

Si on le souhaite on pourra attribuer la même classe à plusieurs balises, par exemple la balise <p>.
On peut aussi attribuer une ou plusieurs classes à la même balise.

Voyons maintenant un exemple de class ainsi que le code CSS de la classe, nous nommerons celle-ci info.
Le but étant de mettre une couleur verte au mot héritage se trouvant dans la balise.

On définit la classe dans le code CSS par un point.

Classe CSS

Ensuite on affecte la couleur verte, une taille de police en 14px plus une police grasse "Bold".

Nota: vous remarquez que l'héritage est toujours d'actualité puisque tout notre contenu se retrouve avec une police de 12px sauf la balise ou l'on a précisé une taille de 14px.

Gestion des ID

Un ID comme une classe est exactement la même chose à la différence près c'est qu'un ID ne peut être utilisé qu'une seule fois dans une page web ce qui sous entend que vous pouvez noter qu'un seul ID avec le nom sur une balise, oui je sais vous voulez un exemple:

ID CSS

Le mot clé utilisé sera id, exemple id="monId".

Dans le CSS, on emploiera le symbole # afin de symboliser l'utilisation d'un ID.

Pour finir que cela soit une classe ou un ID, il y a des règles à respecter, il ne faut jamais commencer un nom de classe ou ID par un - ou un _.

Sélecteurs

Les sélecteurs permettant de sélectionner plusieurs éléments (sélecteur universel, sélecteur d'enfant, sélecteur adjacent).

Sélecteur d'attribut

Il est intéressant de voir que l'on peut sélectionner plus précisément des sélecteurs d'attributs, prenons l'exemple d'un lien dont on met l'attribut lang="fr" ou l'attribut lang="jp", il serait pratique d'ajouter par exemple une couleur différente lorsque l'attribut est noté fr ou jp.

Comme d'habitude voici le code en exemple avec le résultat imbriqué, mais je suis sûr que vous l'aviez déjà compris.

Remarque: mon code ne sera plus complet afin de gagner en lisibilité, je vous montrerez simplement le code portant sur le thème à apprendre, pour le reste il suffira de recopier le code écrit précédemment.


Selecteur CSS

Il sera donc possible de viser un attribut précisément en spécifiant l'attribut de votre choix, je vous laisse regarder le code HTML5, bon allez je suis bon prince regarder ce lien suivant https://developer.mozilla.org/fr/docs/Web/CSS/Sélecteurs_d_attribut.

Gestion des couleurs

Comme vous avez pu voir on note différentes valeurs afin de définir une couleur prédéfinie, il existe différentes manières de définir une couleur, vous avez déjà vu 2 façons:

Prenons l'exemple de la balise qui sera mis en rouge et voyons toutes les manières pour mettre ce paragraphe en rouge.
Actuellement 3 manières sont montrées afin de mettre la couleur d'un paragraphe en rouge.

Color CSS

Nota: RGB (pourcentage de rouge, bleu et vert)

Remarque: si on utilise le mot clé rgba(255,255,100, .5)
Le dernier élément a pour alpha .5 équivaut au degré de transparence.

Voici différents liens sur Internet qui vous permettra de récupérer une couleur (hexa ou RGB).

Gestion des backgrounds

Maintenant que nous avons vu la gestion des couleurs, on peut aussi mettre des fonds d'écran sur un paragraphe <p>, une balise de type <div> ou tout simplement un fond de page <body>.
Pour la gestion de la propriété background, on peut avoir un fond d'écran (couleur ou image) en fond d'écran, voici une liste d'options sur le background.

Background CSS

Nota: vous pouvez faire ce que l' on appelle un raccourci, au lieu de taper toujours la même commande, celle-ci sera notée sur une seule ligne comme l'exemple ci-dessous:

Background Options CSS

Gestion des bordures

En CSS, vous l'aurez compris on peut faire en sorte de mettre des bordures à votre balise avec pleins d'options dont nous allons voir quelques unes.
Comme pour la propriété background, on a différentes options qui permettra de changer le type, emplacement, couleur, épaisseur ou arrondi de votre bordure.

Pour chaque propriété cité ci-dessus, vous avez des options supplémentaires, mais voyons maintenant cela en exemple, nous allons définir une balise <div> entouré d'un background bleu avec une bordure rouge de type solid et une épaisseur de 2px et pour finir on appliquera un radius de 10px;

Bordure CSS

Comme pour la propriété background, on peut écrire un raccourci qui sera du style.

Bordure CSS

Ce code est exactement le même que celui que j'ai noté ci-dessus, bien évidemment les propriétés background-color et radius ne peuvent pas être associés à la propriété border.

Nota: il existe pleins d'autres options, pour plus d'infos allez voir ce site (http://www.w3schools.com/css/css_border.asp)

Gestion du Padding et Margin

BACK TO TOP