Le document décrit un atelier d'initiation au CSS dirigé par Kévin Dunglas, organisé par la Coopérative des Tilleuls, qui se spécialise dans le développement d'applications web et de plateformes e-commerce. L'atelier couvre les principes fondamentaux des feuilles de style en cascade (CSS), les sélecteurs, et les techniques de formatage de texte, ainsi que des ressources supplémentaires pour approfondir les connaissances. La coopérative se distingue par son modèle coopératif, favorisant la coopération et l'entraide au sein de ses activités.

1. Workshop #2
Initiation au CSS
Par Kévin Dunglas (@dunglas)
La Coopérative des Tilleuls

3. La Coopérative des Tilleuls
Conception, développement et formation :
● Applications web
● Plate-formes e-commerce
● Intégration aux places de marché
● Intégration aux SI bancaires, transporteurs...
● Jeux Facebook, advergames, serious games
● Applications mobiles
● Identités graphiques
● Clients : Walibuy, Pictime, Geophyle,
Wokine, 6 PEO, Agence 1984

4. L'esprit coopératif
● Société coopérative Scop
● Entreprise détenue à 100% par celles et
ceux qui y travaillent
● Prises de décisions démocratiques
● Esprit et ambiance favorisant la coopération,
l’entraide et la solidarité
● Soutien à des projets culturels, artistiques,
associatifs, syndicaux...
● Démarche d'ouverture vers les habitants et
les travailleurs du secteur (ex. : cet atelier)

5. Workshop #1
● Définition d'internet et du web
● Présentation des standards du web
● Découverte du langage de balisage HTML
● Les slides : http://slideshare.
net/coopTilleuls/atelier-initiation-au-html5
● Les exemples : https://github.
com/coopTilleuls/workshopHTML

6. CSS
● Cascading Style Sheet (feuilles de style en
cascade)
● Permet de décrire la présentation d'un
document HTML ou XML
● Standard du W3C
● CSS3 : dernière version de CSS ajoutant de
nombreuses fonctionnalités : nouveaux
sélecteurs, media queries, polices persos,
dégradés, transitions...

7. Principes
● Séparation de la présentation et de la
structure du document
● La présentation varie en fonction du
récepteur : écran, tablette, smartphone...
● Différentes règles peuvent s'appliquer à un
même élément : c'est la cascade
● Chaque élément du document est
représenté par une boîte
● Les boîtes sont positionnées
successivement (flux)

8. Les mains dans le code
Étudions ensembles ces quelques fichiers
HTML accompagnés de leur feuille de style
CSS :
https://github.com/coopTilleuls/workshopHTML

9. Syntaxe
sélecteur1, sélecteurN {
propriété1: valeur;
propriété2: valeur;
}

10. Lien avec le document
HTML
● Directement dans la page HTML avec la
balise <style>
● En tant qu'attribut d'une balise HTML avec
l'atrtibut style
● Recommandé : dans un fichier externe .css,
lié au document HTML avec une balise
<link>

11. Sélecteurs
Ils permettent de sélectionner un ou plusieurs
éléments du document (noeuds de l'arbre
DOM).
Exemple :
#mon-id {
color: red;
}

13. Formatage de texte
● font-size : taille de la police
● font-family : famille de police
● font-style : style de police (italique...)
● font-weight : graisse de la police
● text-decoration : décoration du texte
● text-align : alignement du texte
● @font-face (CSS3) : police personnalisée
● Il existe un grand nombre de propriétés
CSS, se référer à la documentation

14. Positionnement
● display : affichage des élèments en-ligne et
en blocs
● position: relative : Position relative des
élèments les uns par rapport aux autres
● float : Flottement des boîtes
● position: absolute : Positionnement absolu
● position: fixed : Positionnement fixe
● width, height : Largeur et hauteur des boîtes
● margin, padding : Marges extérieurs et
marges intérieures

15. Couleurs
● color : Couleur du texte
● background-color : couleur de fond
● border : bordures
● background-image : image de fond
● Remplacement de texte

16. Pour aller plus loin
● Compass (en) : http://compass-style.org/
● Sass (en) : http://sass-lang.com/
● Less (en) : http://lesscss.org/
● Blueprint (en) : http://blueprintcss.org/
● Twitter Bootstrap (en) : http://twitter.github.
com/bootstrap/
● Openweb (fr) : http://openweb.eu.org/
● Alsacréations (fr) : http://www.alsacreations.
com/

17. Crédits
● Wikipédia
● yoyodesign.org
●

18. http://la-cooperative-des-tilleuls.com