Formation CSS 3 - Premier Niveau -

📢 Bonjour à tous et à toutes ❗

Nous verrons dans cette formation sur CSS (Feuilles de style en cascade) , les fondamentaux, l’essentiel pour démarrer avec ce langage qui est présent quasiment depuis le début du WWWeb et est un incontournable de la création de sites internet, pages web ou même support de documentation

“ Les feuilles de style en cascade, généralement appelées CSS de l’anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML.
Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
L’apparition de CSS répond à une volonté de « proposer une alternative à l’évolution du HTML d’un langage de structuration vers un langage de présentation » ”

Wikipedia

---

“ CSS est l’un des langages principaux du Web ouvert et a été standardisé par le W3C.
Ce standard évolue sous forme de niveaux (levels), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est découpé en modules plus petits, est en voie de standardisation. ”

• 👉 Outils de développement Firefox CTRL+SHIFT+I ou F12
• 💕 L’extension Web Developer , A installer
• 🙌 Le livre de recettes de disposition CSS

MDN

Vous l’avez compris, CSS va nous permettre de positionner, disposer, définir le style (couleur etc ) de nos documents web alors qu’HTML nous permet de structurer et de stoquer les données à afficher.
Css permet bien plus encore, notamment les animations (que l’on abordera selon les formations).
De plus le net fourmille de tutos sur CSS (auxquels vous pouvez bien évidemment aller jeter un oeil ) :

1.  L’incontournable W3School (Vous le connaissez déjà et on y retournera) : https://www.w3schools.com/css/

2.  La bible : https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/CSS_basics

3.   En mode pris par la main : https://docs.microsoft.com/fr-fr/microsoft-edge/devtools-guide-chromium/css/

4.   Très intéressant : https://www.alsacreations.com/tuto/liste/2-css.html

TODO 🎢:

Dans un premier temps on va changer d’IDE pour passer sur Atom qui est très orienté Dev Front :

1. https://atom.io/

2. 
   Chez W3School prenez le premier exemple en cliquant sur le bouton vert : Try it Yourself »
   Le fichier atom.html est disponible ici ->ICI<- en cas de

3. 

4. https://atom.io/packages/atom-html-preview

5. 

6. 

7. 

Atom a beaucoup d’autre plugins pour vous simplifer la vie :

• https://atom.io/packages/open-in-browser

• https://atom.io/packages/open-in-browsers

• https://atom.io/packages/atom-beautify

• https://atom.io/packages/color-picker

• https://atom.io/packages/file-icons

• Emmet est très très très très (non je ne radote pas encore, quoi que 😉 …) largement utilisé et pas que pour atom :

  • https://emmet.io/
  • https://docs.emmet.io/cheat-sheet/
  • On tappe ça :

  #page>div.logo+ul#navigation>li*5>a{Item $}
  

  • Puis on fait TAB (à la fin de la ligne sinon ça ne marche pas)
    et on obtient ça :

  <div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
  </div>
  

Merci de garder pour vous les ressources que vous y trouverez et de ne pas les diffuser 😏
Merci de m’avertir de toute erreur ou coquille qui m’auraient échapées 😍

©️ 🚫 Do not distribute 😌