Second atelier gratuit autour des technologies HTML5 / CSS3 / Javascript organisé par La Coopérative des Tilleuls. Au menu cette fois-ci une initiation à l'intégration web grâce aux feuilles de style CSS. Après avoir appris lors du premier atelier à créer et à structurer des pages web grâce à HTML, nous verrons comment les mettre en forme avec les feuilles de style en cascade CSS. Nous découvrirons ensembles : - les fondements du langage CSS (syntaxe, cascade, sélecteurs) - quelques balises et attributs HTML utiles pour la CSS - le formatage de texte (police, couleur, gras, italique...) - le positionnement des éléments - les couleurs et images de fond

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