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


A dĂ©couvrir massage-zen.shop : LE site 100% bien ĂȘtre pour trouver des accessoire de massage Ă  petits prix :)

Débuter RAPIDEMENT et apprendre le CSS : astuces pour gagner du temps pour votre site !

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 : video youtube sur le css

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

twitter

Comprendre : 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. L'HTML permet de faire des flipbook html5 par exemple, possible en CSS.

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.

C'est quoi le CSS ?

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

Introduction au CSS3

logo css3

Cette introduction est destinée Ă  ceux qui souhaitent avoir un aperçu global de ce qu'apporte le CSS3.

Vous y découvrirez un ensemble conséquent de nouveautés, comment utiliser les préfixes propriétaires afin d'en tirer profit dĂšs maintenant et nous discuterons du caractĂšre non-critique de son utilisation.

Il s'agit de la suite logique de l'Introduction Ă  l'HTML5, mais elle peut ĂȘtre lue indépendamment.

Le CSS3 c'est quoi ?

Le CSS3 est le nom employé pour caractériser lensemble des nouveautés depuis le CSS2.1. Il s'agit par exemple d'un ensemble de nouveaux effets Ă  appliquer sur nos éléments HTML.

Vous verrez dans cet article Ă  quel point il est simple de réaliser des effets visuels impressionnants en quelques lignes.

Mais le CSS3 c'est également un ensemble de nouveaux sélecteurs, de nouvelles maniĂšres de spécifier les couleurs, une détection des caractéristiques de l'appareil de l'utilisateur, des calculs dans les feuilles de style, des SVG en arriĂšre plan, bref, le CSS3 est un généreux enrichissement des feuilles de style qui, en plus d'ĂȘtre profitable Ă  l'utilisateur, l'est au développeur également !

La plupart des développeurs web ont découvert le CSS3 en cherchant Ă  appliquer certains effets sur leurs sites. Pour ma part, j'ai cherché Ă  appliquer des bordures arrondies sur mes blocs HTML. Je vais prendre donc prendre cet effet comme exemple pour introduire les concepts du CSS3.

Exemple pratique : Les bordures arrondies

Supposons que vous travailliez sur le design d’un site web qui inclut un systĂšme de commentaires, comme un blog par exemple. Vous avez la soudaine idĂ©e lumineuse d’afficher une bulle Ă  la maniĂšre des bandes dessinĂ©es afin d’apporter une touche un peu originale Ă  vos commentaires. Vous ĂȘtes donc face Ă  votre belle balise

contenant un commentaire de votre lecteur : Ouah, c’est vraiment une excellente introduction au CSS3 ! Et vous vous dites : Bon
 Il va falloir que je transforme ce carrĂ© tout moche en bulle arrondie de bande dessinĂ©e. Demandons Ă  Google ce qu’il en pense.

AprĂšs quelques recherches vous tombez sur des sites Ă  l’allure assez vieillotte qui vous disent : "Il faut faire un table HTML Ă  9 cases dans lequel on va placer 9 images dĂ©coupĂ©es sous Photoshop".

L’art de faire les choses salement

Nous voici donc partis pour mettre en place l’HTML de notre tableau Ă  9 cases (au mieux certaines techniques alternatives rĂ©duisent Ă  3 cases Ă  condition que la largeur ou la hauteur de votre bloc soit fixe).

AprĂšs avoir donc passĂ© 2 heures sous Photoshop Ă  essayer de bien caler au pixel prĂšs vos images, notre pauvre balise div s’est maintenant transformĂ©e en quelque chose du genre :

<table class="comment">
   <tr>
	   <td class="top-left"></td>
	   <td class="top"></td>
	   <td class="top-right"></td>
   </tr>
   <tr>
	   <td class="left"></td>
	   <td class="content">Ouah, c’est vraiment une excellente introduction au CSS3 !</td>
	   <td class="right"></td>
   </tr>
   <tr>
	   <td class="bottom-left"></td>
	   <td class="bottom"></td>
	   <td class="bottom-right"></td>
   </tr>   
</table>
							
Avec pour CSS :
/* Taille des coins */
 
.comment .top-left,
.comment .top-right,
.comment .bottom-left,
.comment .bottom-right{
  width:50px;
  height:50px;
}
 
/* Taille des bords gauche et droit */
 
.comment .left, .comment .right{
  width:50px;
}
 
/* Taille des bords bas et haut */
 
.comment .top, .comment .bottom{
  height:50px;
}
 
/* Cellules du haut */
 
.comment .top-left{
  background:url("top-left.png");
}
.comment .top{
  background:url("top.png");
}
.comment .top-right{
  background:url("top-right.png");
}
 
/* Cellules du milieu */
 
.comment .left{
  background:url("left.png");
}
.comment .content{
  background:url("content.png");
}
.comment .right{
  background:url("right.png");
}
 
/* Cellules du bas */
 
.comment .bottom-left{
  background:url("bottom-left.png");
}
.comment .bottom{
  background:url("bottom.png");
}
.comment .bottom-right{
  background:url("bottom-right.png");
}

Et en thĂ©orie Ă  ce moment lĂ  nous devrions prendre un peu de recul et nous poser quelques questions sur ce que nous venons d’écrire.

  1. C’est long et pĂ©nible Ă  Ă©crire
  2. Nous ne respectons pas le principe de séparation du contenu et du design
  3. Nous utilisons un tableau qui ne contient pas de données tabulaires
  4. La page sera plus longue Ă  charger (surtout si on a beaucoup de commentaires)
  5. Le code est difficilement maintenable, par quelqu’un d’autre et par soi-mĂȘme
  6. On risque potentiellement d’ĂȘtre pĂ©nalisĂ© par les moteurs de recherches pour contenu mal formatĂ©

Bref, ce type de pratique est Ă  bannir dĂ©finitivement. Les bidouilles de ce genre Ă©taient parfaites lorsqu’il n’y avait pas d’autres alternatives, lorsque le CSS3 n’était que trĂšs peu supportĂ©. Aujourd’hui nous sommes en 2018, et nous avons enfin la chance de pouvoir faire autrement !

Donc on sélectionne tout cet affreux code préhistorique, et on fait un grand ménage !

Nous en sommes donc revenus au point de dĂ©part : <div class="comment"> Ouah, c’est vraiment une excellente introduction au CSS3 ! </div>

Il est grand temps de redonner Ă  l’HTML la fonction qui lui est dĂ»e, Ă  savoir organiser le contenu de la page. Pour tout ce qui concerne le design, c’est uniquement dans la feuille de style CSS que ça se passe.

La belle maniĂšre de faire en CSS3

Afin de styliser notre bulle de bande dessinĂ©e nous allons commencer par lui appliquer une simple bordure d’1 pixel et un fond blanc :

.comment{
background:white;
border:1px solid black;
}
Se pose ensuite la question fatidique des coins arrondis. Je ne doute pas que la plupart d’entre vous savent dĂ©jĂ  que je vais vous parler de la propriĂ©tĂ© border-radius.

Effectivement, c’est ce que nous allons maintenant utiliser pour arrondier nos coins. Il s’agit d’une nouvelle propriĂ©tĂ© CSS3 que l’on utilise en spĂ©cifiant la taille de l’arrondis de notre bordure :
.comment{
background:white;
border:1px solid black;
border-radius:30px;
}
Donc lĂ  vous vous prĂ©cipitez vers votre navigateur favoris pour tester ce code
 et lĂ , c’est le drame.

Je ne vois aucune bordure arrondie, tu nous as roulés !
Ah oui ? Peut-ĂȘtre devriez-vous essayer ceci dans un autre navigateur ?

J’ai testĂ© sous Firefox, Chrome, Safari, rien ne marche !!
Avez-vous testé sous Internet Explorer 9 ? Sous Opera ?

Ohhhh
 ça marche ici ! 
 Mais c’est dĂ©bile ! Personne n’utilise Internet Explorer 9 ni Opera, ça n’a aucun intĂ©rĂȘt !
Effectivement, vous auriez totalement raison si nous en restions là


Les préfixes propriétaires (ou préfixes vendeurs)

Si je vous disais que nous pourrions faire fonctionner ces coins arrondis sous Firefox, Chrome et Safari, ce serait déjà mieux non ?
Ces navigateurs, qui ont Ă©tĂ© des prĂ©curseurs de l’implĂ©mentation de border-radius, utilisent des prĂ©fixes propriĂ©taires qui sont thĂ©oriquement des expĂ©rimentations des nouvelles propriĂ©tĂ©s.

Ils sont ainsi libres de ne pas suivre les recommandations du W3C, aussi bien dans la maniĂšre d’afficher l’effet que dans la maniĂšre de l’écrire en CSS.

Ce doit ĂȘtre un beau bazar si chacun fait ce qui lui plait ?
Heureusement, ces navigateurs ont une forte volontée de respect des standards. Et à part quelques rares exceptions, ils suivent trÚs exactement les spécifications du W3C.

Par consĂ©quent l’écriture des nouvelles propriĂ©tĂ©s est la mĂȘme, mais en incluant simplement le prĂ©fixe spĂ©cifique Ă  chaque navigateur:

  1. -moz- pour Firefox
  2. -webkit- pour Chrome, Safari, iPhone, Android
  3. -o- pour Opera
  4. -ms- pour Internet Explorer
  5. -khtml- pour Konqueror
  6. - 
et il en existe encore d’autres

Donc on va devoir Ă©crire 6 fois une propriĂ©tĂ© pour qu’elle fonctionne partout ?
En pratique non ! Tout d’abord, certains navigateurs n’implĂ©mentent pas certaines propriĂ©tĂ©s CSS3, donc prĂ©fixes ou non, ça ne marchera pas (c’est le cas d’Internet Explorer).

Ensuite, on peut considĂ©rer que les navigateurs trĂšs fortement minoritaires tels que Konqueror peuvent ĂȘtre ignorĂ©s. Et enfin Opera se veut avant-gardiste en implĂ©mentant directement la plupart des propriĂ©tĂ©s CSS3 sans prĂ©fixe.

Ça nous laisse donc avec :
  1. -moz-
  2. -webkit-
Ce qui est bien plus digeste. Pour en revenir Ă  notre exemple de border-radius, en Ă©crivant ceci :
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Notre bordure s’affichera correctement arrondie sur :
  • - Internet Explorer 9
  • - Firefox
  • - Chrome
  • - Safari
  • - Opera
  • - Le navigateur iPhone
  • - Le navigateur Android
  • - Le navigateur Blackberry
Et ne s’affichera pas arrondie sur Internet Explorer 8 et versions infĂ©rieures...

Reconnaissez que ce serait vraiment dommage de ne pas tirer profit d’une telle simplicitĂ© uniquement parce vous n’avez pas de bords arrondis sous IE8


Sur mon site, au moins 30% des utilisateurs utilisent Internet Explorer 8 et inférieurs !
Ah mais c’est certain, Internet Explorer couvre encore une grande partie de la population, c’est clair. Mais la question importante Ă  laquelle il faut maintenant rĂ©pondre c’est : Si elles ne s’affichent pas, est-ce si grave ?

Est-ce si grave que mes bordures ne soient pas arrondies ? Probablement pas

Si le coeur de votre site repose sur le fait d’afficher des blocs aux bords arrondis, et que celui-ci perd tout intĂ©rĂȘt sans ces bords arrondis, alors effectivement, il est important que les utilisateurs d’Internet Explorer 6, 7 et 8 voient s’afficher correctement vos bordures.

Dans tous les autres cas, demandez vous sĂ©rieusement : Est-ce que c’est si grave que mon site n’affiche pas de bordures arrondies ? A-t-il l’air bancale, cassĂ©, non fonctionnel s’il ne les affiche pas ?

Soyons raisonnables 5 minutes, des coins arrondis ne sont Ă  99,9% jamais vitaux pour nos sites. Il s’agit la plupart du temps d’une bonne idĂ©e qui nous a traversĂ© l’esprit pour amĂ©liorer un peu notre design, mais reconnaissez que ça n’est pas si dramatique de ne pas les avoir.

Franchement ?

Chaque année, chaque mois, chaque jour, des gens achÚtent de nouveaux ordinateurs, font des mises à jour, Internet Explorer 9 est un énorme pas en avant qui va faire basculer une grande partie des utilisateurs non-techniques vers le monde du CSS3.
Oui mais
 Et le reste ?
Le reste verront des bords carrés.
Voilà, c’est dit. Et vous savez quoi ? Ça n’est vraiment pas grave.

Pourquoi ?

Parce qu’ils n’auront aucune idĂ©e du fait que votre design affiche des bords arrondis sur d’autres navigateurs.

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page https://www.cssdebutant.com/ Votes: 4.1 / 5 étoiles - 316 vote(s) et 10 commentaires