CSS
Dare stile alle pagine web mediante i CSS (Cascading Style Sheets)
Il percorso didattico per lo studio del CSS ricalca la guida di Mozilla MDN per il CSS. In particolare, seguendo un approccio incrementale allo studio del CSS, l’argomento è prima proposto in una sezione Getting started in maniera sommaria e successivamente è ripreso in sezioni specifiche che trattano diversi aspetti fondamentali nell’ambito dello sviluppo web.
Getting started tutorials
- Getting started with CSS
- How CSS is structured
- How CSS works
- Un esercizio di stile: applicare il CSS per scrivere la pagina di una autobiografia. Il codice di esempio è disponibile su GitHub.
CSS Building blocks
È da studiare il tutorial: CSS building blocks con il relativo codice di esempio su GitHub. In questo tutorial vengono affrontati gli aspetti fondamentali del CSS. In particolare le parti da conoscere bene sono:
- CSS selectors
- Type, class, and ID selectors
- Attribute selectors
- Pseudo-classes and pseudo-elements
- Combinators
- Cascade, specificity, and inheritance
- The box model
- Overflowing content
- CSS values and units. In particolare le unità di misura:
px,em,rem,%
È da studiare anche il concetto di specificità e l’algoritmo per il calcolo della specificity
CSS Styling text
È da studiare il tutorial: CSS styling text con il relativo codice di esempio su GitHub. In questo tutorial vengono mostrate le tecniche per dare uno stile al testo. In questa sezione è molto importante la parte relativa all’utilizzo dei Web Fonts. In particolare l’esempio web fonts mostra come utilizzare font definiti in file di tipo WOFF o WOFF2, oppure come importare nel proprio progetto font di terze parti, mediante API, come nel caso dei Google Fonts.
CSS layout
È da studiare il tutorial: CSS layout con il relativo codice di esempio su GitHub. In questo tutorial vengono esposti i concetti di Flow, Box e Positioning, nonché il concetto di Responsive design e di media query. In particolare le parti da conoscere bene sono: