Partie n°1 CSS

DOCUMENT :

Pour que le navigateur puisse interpréter notre code css, il est nécessaire de liée son css. Voici un gabarit pour débuter.

Ce code affiche une page vide en HTML5, avec un Link CSS.

Les navigateurs sont assez souples, on peut écrire du mauvais code et obtenir visuellement un bon résultat, le risque étant d’avoir un affichage catastrophique sur certains appareils ou des problèmes pour l’évolution du projet. Vérifier deux fois votre code css avant d’aller plus loin.

Donc, que sont les CSS, réellement ?

De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un langage de feuille de style, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :

Pour écrire en CSS, on utilise des " { } ", elles définissent tous éléments qu'on va mettre dedand. Par exemple, on veut changer la couleur du pararaphe:

servira à à inculre tout nos éléments en CSS. La plupart des "{ }" marchent par paire, la première ouvre pour marquer le début, la seconde ferme pour marquer la fin.

Le principe est simple et bien souvent l’éditeur vous aide à l’écriture. Pour répondre à nos besoins, il est bien sur possible d’imbriquer les "{ }" .

le CSS le plus utilisées :

Partie n°2 Anatomie d'une règle CSS

Tout ce qu’il faut savoir sur l'anatomie d'une règle CSS :

Qu’est-ce l'anatomie d'une règle CSS

Regardons un peu plus en détails ce que nous avons écrit en CSS:

Cette structure s'appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment :

sélecteur
C'est le nom de l'élément HTML situé au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.

Déclaration
C'est une règle simple comme color: red; qui détermine les propriétés de l'élément que l'on veut mettre en forme.

Propriétés
Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, color est une propriété des éléments p). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS.

Valeur de la propriété
À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d'autres pour une propriété donnée (par exemple, il y a d'autres couleurs que red pour la propriété color).

Autres éléments importants de la syntaxe sont :
chaque ensemble de règles, à l'exception du sélecteur, doit être entre accolades ({}). pour chaque déclaration, il faut utiliser deux points (:) pour séparer la propriété de ses valeurs.
pour chaque ensemble de règles, il faut utiliser un point-virgule (;) pour séparer les déclarations entre elles.
Ainsi, si on veut modifier plusieurs propriétés d'un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :

Sélectionner plusieurs éléments
Il est aussi possible de sélectionner plusieurs types d'éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :

Comment utiliser Le CSS?

Le CSS est principalement utilisé pour rendre notre pages HTML avec du style, ainsi que pour animer HTML, CSS et le contenu à l’aide de JavaScript.

Testez chaque selcteur en CSS pour voir le résultat concret. Les selecteurs sont le squelette du CSS. Et bien entendu, sans squelette, rien ne tient et par conséquent la page web s’effondre. Vous ne pourrez jamais faire sans. Faites bien attention à fermer Les seclecteurs ! En un rien de temps, vous vous familiarisez Avec le CSS. Il ne vous restera alors plus qu’à maîtriser Les deux Languages appris ici.

LES COMMENTAIRES :

Les commentaires sont fortement utilisés dans la programmation. Ils permettent de documenter, d’annoter ou mieux suivre votre travail. Aide-mémoire, to-do-list, crédits, private-joke, notes de version, séparation visuelle, ou code délaissé, vous trouverez rapidement leurs usages.

/* ceci est un commentaire */

Gardez bien en tête que les commentaires CSS sont invisibles dans le navigateur mais lisibles et accessibles par tous dans les sources.

GRAMMAIRE ET VOCABULAIRE :

Si vous avez bien suivi, vous maitrisez déjà la base de la grammaire du CSS, il ne vous manque que le vocabulaire pour vous exprimer pleinement. Comme dans toute langue, il existe des mots fréquents, rares, désuets et même nouveaux. Si vous voulez apprendre un langage, il faudra obligatoirement pratiquer, parler ou lire celui-ci. Vous trouverez en ligne de nombreux exemples didactiques, tous ne sont pas bons, sans erreurs ou actualisés. Vous avez aussi la possibilité d’inspecter n’importe quel site web à l’aide des outils de votre navigateur. Il existe de nombreuses références de qualité pour apprendre le vocabulaire du CSS, citons le site du W3C et le site MDN de Mozilla (https://developer.mozilla.org/). Les manières de styliser un document web, elles sont dépendantes des besoins et du planning du projet. Notez aussi que les moteurs de recherches influencent aussi certaines pratiques.

CONCLUSION :

En code :

Nous allons passer aux exercices pour mieux comprendre.