Apprenons le CSS

Introduction

Ludwig_Mies_Van_Der_Rohe

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 des 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 web, il va falloir s'attarder sur comment appliquer le CSS à votre page web, il existe plusieurs façons de faire cela.

Remarque: 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 veut être sûr que notre code soit pris en priorité.

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 <head>, 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 fois ce code dans chaque page web que 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 la séparation entre la structure Web( code HTML) et la mis en forme (code CSS).

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>.

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 donc les 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 N° 3), celui-ci sera toujours prioritaire.

Pour finir, voici une vidéo expliquant plus en détail la balise <link> permettent en autre de gréffer une page CSS.

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 de décommenter des bouts de codes temporairement, car il ne faut 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 dans lequel ils sont compris.

Prenons l'exemple de la balise <body> avec une taille de police de 12px et une couleur noir, automatiquement les balises <h1> et <p> 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 :
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 les balises <h1> et <p> ont hérités 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 < li >.

Il existe en CSS pleins de façons d'arriver au résultat, mais nous allons 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 < span >

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, c'est comme une classe, c'est exactement la même chose à la différence près, 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é dans le code HTML 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 .5 équivaut au degré de transparence(on appelle cela la couche ALPHA).

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

Pour finir, voici une explication plus détaillée d'un background avec couleur et/ou avec plusieurs images,
bonne vidéoet bon apprentissage.

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)

Pour finir, voici une explication plus détaillée ci-dessous en vidéo,
bonne vidéo et bon apprentissage.

Gestion du Padding et Margin

Lorsque vous créer par exemple une balise de type paragraphe, celui-ci a ce que l'on appelle une marge externe(margin) et une marge interne(padding), dans le cas du padding, il faut imaginer une bordure invisible entourant votre texte ou autre, mais comme une image vaut mille mots, regardons l'exemple ci-dessous:

Gestion du Padding et Margin

En CSS, vous l'aurez compris on aura donc des marges internes ou externes en haut, à droite, en bas et à gauche
Attention, j'ai fait exprés de citer cela dans l'ordre de codage, on aura donc les valeurs suivantes:

Margin

Padding

Attention, on pourra aussi noter par exemple p { margin: 0px 12px 34px 20px;}, ce qui sera équivalent à dire je veux un margin de 0px en haut, 12 px à droite, 34 px en bas et 20 px à gauche pour les balises de type <p>

Pour finir, voici une explication plus détaillée du "margin" et "padding" en vidéo
bonne vidéo et bon apprentissage.

Patience, la suite arrive ....

BACK TO TOP