Débuter avec le langage CSS, apprendre pas à pas !
Cours CSS (Cascading Style Sheets ou feuille de style)

Débuter avec le langage CSS : gérer la couleur, bordure, taille de la police...

C'est quoi le CSS ? Puis-je apprendre facilement ?

En deux mots : Le langage CSS ou Cascading Style Sheets est utilisé pour définir l'aspect futur de votre site: exemple la couleur du fond de la page ou le type de police.

Plus concrètement : le CSS (ou feuille de style), c'est un petit fichier (exemple "style.css") dans lequel vous allez définir l'ensemble des choix de couleurs, type de police (arial, comic sans MS, etc), taille du texte... TOUT sauf le texte lui même !

Euh... CSS / HTML : Comment ça marche ?
HTML vs CSS Commençons par la base : pour créer un site, il faut utiliser un langage appelé : HTML, c'est un langage qui permet de mettre en place la structure de la page mais aussi la forme d'un texte : gras, couleur, italique..

Voici un cours en vidéo CSS et HTML Gratuit pour apprendre le CSS

Pour faire court, voici un cours de CSS et HTML pour apprendre à coder rapidement :

En cliquant ici, je vous donne accès à une belle formation vidéo GRATUITE sur le CSS

twitter

D'accord, tu as un exemple avec le langage CSS ?

Et bien, avec le CSS, la structure HTML et la présentation sont gérées séparément

En effet, vous pouvez modifier les couleurs css, polices css de caratères directement dans le fichier CSS et la structure (texte, images) directement dans la page HTML.

CSS facilite la portabilité du contenu

Une fois le contenu HTML correctement mis en place, il devient facile de changer l'apparence de son site.

Le code HTML est réduit en taille et en complexité.

Pour le référencement, c'est un grand plus : Les feuilles de styles simplifient le code HTML et améliorent la vitesse de chargement de la page.

D'accord, tu me donner un exemple pour utiliser le langage CSS ?

Je souhaite le fond de mes pages en gris. Si j'ai un site de 5 pages, je vais répéter 5 fois :

En HTML simple :
  <body bgcolor="#CCCCCC"> 

Je vais mettre dans mon fichier CSS (exemple :style.css)

 body { background-color: #CCCCCC; } 

Si un jour je souhaite modifier la couleur de mes pages, avec le CSS, j'ai un seul fichier a modifier, avec HTML 5 ! CQFD

Et le CSS3, c'est quoi ? Je vous propose de découvrir le CSS3 grace au responsive design et ce tutorial sur responsive design et bootstrap.

Origine du CSS : A savoir !

Le CSS (voir w3schools) (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML. Introduit au milieu des années 1990, Il est aujourd'hui couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs.

Né en 1996, le CSS1 définit une cinquantaine de propriétés de rendu typographique du texte : polices, couleurs, tailles des caractères, les background image, marqueur de liste...

Rapidement complété par le CSS2 (voir wikipedia), en 1997, ce language se voit ajouter 70 propriétés supplémentaires, notamment des propriétés de positionnement. Ce complément sera malheureusement qualifié de précipité et son implémentation fortement ralentie, pour diverses raisons commerciales et de monopole que je n'aborderais pas ici. C'est donc en 2007, sous appellation CSS 2.1, qu'il deviendra un standard que les navigateurs devront intégrés.

code html

Fin 2011, le CSS3 est implémenté par les navigateurs et est perçu comme une très grande avancée. Contrairement à ses prédécesseurs, ce niveau est dévelloppé par modules, permettant ainsi aux navigateurs d'implémenter des sous-ensembles de CSS3.

Comme pour le language HTML, les spécifications CSS ne sont pas développées par versions successives, mais par "niveaux", ce qui contraint chaque nouveau niveau à intégrer le précédent, et chaque implémentation à être compatible avec le niveau précédent.

CSS1 est donc développé pour être un sous-ensemble de CSS2, qui est lui-même développé pour être un sous-ensemble de CSS3.

En 2010 à débuté le dévellopement du quatrième niveau de feuilles de styles, le CSS4, mais je n'en sais pas plus, pour l'instant ... . Sachez qu'il s'écoule environ 10 ans entre le départ d'écriture d'un niveau CSS et sa validation par le W3C, alors soyons patient.

Objectif du CSS et son utilité

twitter

L'un des objectifs majeurs du CSS est de permettre l'élaboration de la mise en forme hors des documents HTML.

Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée.

Twitter (Jack Dorsey) fut est source parfaite pour trouver des codes CSS (astuce) !


Cette séparation apporte deux bénéfices importants:

  1. Un changement de présentation grandement facilité
  2. Une réduction notable de la complexité de l'architecture d'un document.
les avantages des feuilles de style sont multiples :
  1. La structure du document et la présentation sont gérés dans des fichiers séparés.
  2. La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace.
  3. Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran.
  4. Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises ni d'attributs de présentation.
  5. La modification du style d'un élément, dans une feuille de style CSS, se répercute automatique à toutes les pages HTML qui y sont rattachées.

Le CSS est parfois lier au SEO, je vous invite également à vous former sur le SEO :lire cet article pour en savoir plus

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page http://www.cssdebutant.com/ Votes: 4.2 / 5 étoiles - 199 vote(s) et 10 commentaires