SlideShare une entreprise Scribd logo
1  sur  11
Télécharger pour lire hors ligne
Initiation au CSS 
19 novembre 2014 
Pierre Rudloff & Damien Senger
Initiation au CSS | 19 novembre 2014 
Qu’est-ce que le CSS ? 
Cascading Style Sheets 
Créé en complément du HTML 
Permet de définir le style d'une page web 
Séparation de la forme et du contenu 
Interprété par un navigateur 
(Firefox, Chrome, Internet Explorer, etc.) 
Version actuelle : CSS3 
Presque toujours utilisé avec HTML
Initiation au CSS | 19 novembre 2014 
Comment créer du CSS 
Éditeur de texte/code : 
● Notepad++ (Windows) 
● Brackets 
● Smultron (Mac OS) 
Éditeur visuel : 
● Dreamweaver 
● BlueGriffon
Initiation au CSS | 19 novembre 2014 
Inclure CSS dans HTML
Initiation au CSS | 19 novembre 2014 
Syntaxe
Initiation au CSS | 19 novembre 2014 
Classes et ID
Initiation au CSS | 19 novembre 2014 
Règles groupées
Initiation au CSS | 19 novembre 2014 
Priorités
Initiation au CSS | 19 novembre 2014 
Outils 
Firebug 
Outils de développeur Chrome 
Lunettes à rayons X 
Thimble
Initiation au CSS | 19 novembre 2014 
Ressources pédagogiques 
OpenClassrooms 
Codecademy 
Mozilla Developer Network
Initiation au CSS | 19 novembre 2014 
À lire 
● HTML & CSS, Jon Duckett 
● CSS2 : Pratique du design web, Raphaël Goetter 
● CSS3 : Pratique du design web, Raphaël Goetter 
● CSS3 for web designers, Dan Cederholm 
● Cascading Style Sheets : designing for the Web, Håkon 
Wium Lie et Bert Bos

Contenu connexe

En vedette

Audit de site web
Audit de site webAudit de site web
Audit de site webStrasWeb
 
Ergonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webErgonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webLaurent Mottet
 
Gestion de projet site web
Gestion de projet site webGestion de projet site web
Gestion de projet site webPierre Naegelen
 
La gestion de projet internet en 10 slides (+bonus)
La gestion de projet internet en 10 slides (+bonus)La gestion de projet internet en 10 slides (+bonus)
La gestion de projet internet en 10 slides (+bonus)Grégory Raby
 
Les 4 phases du management de projet
Les 4 phases du management de projetLes 4 phases du management de projet
Les 4 phases du management de projetAntonin GAUNAND
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesRodolphe Finamore
 

En vedette (6)

Audit de site web
Audit de site webAudit de site web
Audit de site web
 
Ergonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webErgonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site web
 
Gestion de projet site web
Gestion de projet site webGestion de projet site web
Gestion de projet site web
 
La gestion de projet internet en 10 slides (+bonus)
La gestion de projet internet en 10 slides (+bonus)La gestion de projet internet en 10 slides (+bonus)
La gestion de projet internet en 10 slides (+bonus)
 
Les 4 phases du management de projet
Les 4 phases du management de projetLes 4 phases du management de projet
Les 4 phases du management de projet
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
 

Similaire à Initiation au CSS

Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScriptStrasWeb
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 
Alphorm.com Formation Apprendre les bonnes pratiques de CSS avec BEM : OOCSS ...
Alphorm.com Formation Apprendre les bonnes pratiques de CSS avec BEM : OOCSS ...Alphorm.com Formation Apprendre les bonnes pratiques de CSS avec BEM : OOCSS ...
Alphorm.com Formation Apprendre les bonnes pratiques de CSS avec BEM : OOCSS ...Alphorm
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...Horacio Gonzalez
 
Découvrir WordPress
Découvrir WordPressDécouvrir WordPress
Découvrir WordPressStrasWeb
 
Optimiser son workflow frontend
Optimiser son workflow frontendOptimiser son workflow frontend
Optimiser son workflow frontendLouis Chenais
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Chamseddine Ouerhani
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontendyllieth
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio Gonzalez
 
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...Alphorm
 
Bonnes pratiques intégration robuste
Bonnes pratiques intégration robusteBonnes pratiques intégration robuste
Bonnes pratiques intégration robusteRomy Duhem-Verdière
 
Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013Mehdi Kabab
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Abel LIFAEFI MBULA
 

Similaire à Initiation au CSS (15)

Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Livre Drupal avance
Livre Drupal avanceLivre Drupal avance
Livre Drupal avance
 
Alphorm.com Formation Apprendre les bonnes pratiques de CSS avec BEM : OOCSS ...
Alphorm.com Formation Apprendre les bonnes pratiques de CSS avec BEM : OOCSS ...Alphorm.com Formation Apprendre les bonnes pratiques de CSS avec BEM : OOCSS ...
Alphorm.com Formation Apprendre les bonnes pratiques de CSS avec BEM : OOCSS ...
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
 
Découvrir WordPress
Découvrir WordPressDécouvrir WordPress
Découvrir WordPress
 
Optimiser son workflow frontend
Optimiser son workflow frontendOptimiser son workflow frontend
Optimiser son workflow frontend
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
 
Bonnes pratiques intégration robuste
Bonnes pratiques intégration robusteBonnes pratiques intégration robuste
Bonnes pratiques intégration robuste
 
Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013Sass et Compass ont embelli mon quotidien, Sud Web 2013
Sass et Compass ont embelli mon quotidien, Sud Web 2013
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 

Plus de StrasWeb

Initiation au référencement
 Initiation au référencement Initiation au référencement
Initiation au référencementStrasWeb
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobileStrasWeb
 
Les MOOC, apprendre autrement grâce à Internet
 Les MOOC, apprendre autrement grâce à Internet Les MOOC, apprendre autrement grâce à Internet
Les MOOC, apprendre autrement grâce à InternetStrasWeb
 
Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?StrasWeb
 
Wikipédia pour les étudiants
Wikipédia pour les étudiantsWikipédia pour les étudiants
Wikipédia pour les étudiantsStrasWeb
 
E-marketing pour les débutants
E-marketing pour les débutantsE-marketing pour les débutants
E-marketing pour les débutantsStrasWeb
 
Utiliser les réseaux sociaux pour communiquer
 Utiliser les réseaux sociaux pour communiquer Utiliser les réseaux sociaux pour communiquer
Utiliser les réseaux sociaux pour communiquerStrasWeb
 
Licences libres : utopie ou modèle économique ?
 Licences libres : utopie ou modèle économique ? Licences libres : utopie ou modèle économique ?
Licences libres : utopie ou modèle économique ?StrasWeb
 
Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.StrasWeb
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langageStrasWeb
 
L'auto hébergement
L'auto hébergementL'auto hébergement
L'auto hébergementStrasWeb
 
Initiation au php
Initiation au phpInitiation au php
Initiation au phpStrasWeb
 
Naviguer en sécurité
Naviguer en sécuritéNaviguer en sécurité
Naviguer en sécuritéStrasWeb
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web DesignStrasWeb
 
Héberger son site web
Héberger son site webHéberger son site web
Héberger son site webStrasWeb
 
Découverte des licences libres
Découverte des licences libresDécouverte des licences libres
Découverte des licences libresStrasWeb
 
Initiation à SPIP
Initiation à SPIPInitiation à SPIP
Initiation à SPIPStrasWeb
 
comment ça fonctionne un site web
comment ça fonctionne un site webcomment ça fonctionne un site web
comment ça fonctionne un site webStrasWeb
 
Référencement
RéférencementRéférencement
RéférencementStrasWeb
 
Formation spip
Formation spipFormation spip
Formation spipStrasWeb
 

Plus de StrasWeb (20)

Initiation au référencement
 Initiation au référencement Initiation au référencement
Initiation au référencement
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
 
Les MOOC, apprendre autrement grâce à Internet
 Les MOOC, apprendre autrement grâce à Internet Les MOOC, apprendre autrement grâce à Internet
Les MOOC, apprendre autrement grâce à Internet
 
Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?
 
Wikipédia pour les étudiants
Wikipédia pour les étudiantsWikipédia pour les étudiants
Wikipédia pour les étudiants
 
E-marketing pour les débutants
E-marketing pour les débutantsE-marketing pour les débutants
E-marketing pour les débutants
 
Utiliser les réseaux sociaux pour communiquer
 Utiliser les réseaux sociaux pour communiquer Utiliser les réseaux sociaux pour communiquer
Utiliser les réseaux sociaux pour communiquer
 
Licences libres : utopie ou modèle économique ?
 Licences libres : utopie ou modèle économique ? Licences libres : utopie ou modèle économique ?
Licences libres : utopie ou modèle économique ?
 
Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
 
L'auto hébergement
L'auto hébergementL'auto hébergement
L'auto hébergement
 
Initiation au php
Initiation au phpInitiation au php
Initiation au php
 
Naviguer en sécurité
Naviguer en sécuritéNaviguer en sécurité
Naviguer en sécurité
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web Design
 
Héberger son site web
Héberger son site webHéberger son site web
Héberger son site web
 
Découverte des licences libres
Découverte des licences libresDécouverte des licences libres
Découverte des licences libres
 
Initiation à SPIP
Initiation à SPIPInitiation à SPIP
Initiation à SPIP
 
comment ça fonctionne un site web
comment ça fonctionne un site webcomment ça fonctionne un site web
comment ça fonctionne un site web
 
Référencement
RéférencementRéférencement
Référencement
 
Formation spip
Formation spipFormation spip
Formation spip
 

Initiation au CSS

  • 1. Initiation au CSS 19 novembre 2014 Pierre Rudloff & Damien Senger
  • 2. Initiation au CSS | 19 novembre 2014 Qu’est-ce que le CSS ? Cascading Style Sheets Créé en complément du HTML Permet de définir le style d'une page web Séparation de la forme et du contenu Interprété par un navigateur (Firefox, Chrome, Internet Explorer, etc.) Version actuelle : CSS3 Presque toujours utilisé avec HTML
  • 3. Initiation au CSS | 19 novembre 2014 Comment créer du CSS Éditeur de texte/code : ● Notepad++ (Windows) ● Brackets ● Smultron (Mac OS) Éditeur visuel : ● Dreamweaver ● BlueGriffon
  • 4. Initiation au CSS | 19 novembre 2014 Inclure CSS dans HTML
  • 5. Initiation au CSS | 19 novembre 2014 Syntaxe
  • 6. Initiation au CSS | 19 novembre 2014 Classes et ID
  • 7. Initiation au CSS | 19 novembre 2014 Règles groupées
  • 8. Initiation au CSS | 19 novembre 2014 Priorités
  • 9. Initiation au CSS | 19 novembre 2014 Outils Firebug Outils de développeur Chrome Lunettes à rayons X Thimble
  • 10. Initiation au CSS | 19 novembre 2014 Ressources pédagogiques OpenClassrooms Codecademy Mozilla Developer Network
  • 11. Initiation au CSS | 19 novembre 2014 À lire ● HTML & CSS, Jon Duckett ● CSS2 : Pratique du design web, Raphaël Goetter ● CSS3 : Pratique du design web, Raphaël Goetter ● CSS3 for web designers, Dan Cederholm ● Cascading Style Sheets : designing for the Web, Håkon Wium Lie et Bert Bos