SlideShare une entreprise Scribd logo
Les mises en forme
CSS
Formation par Ludovic Verrecchia, intervenant à 3wAcademy
Notre école
Plus de 400 étudiants
11 salles dans le monde
Plus de 2 ans d'existence
Nos cours
Notre méthode
Suivez-nous
www.3wa.fr
www.facebook.com/3WAcademy
#3WAcademy
3w Academy
sans css avec css
CSS
CSS : Cascading Style Sheets
- Gérer l'affichage d'un site
- Séparer la structure de l'affichage
Lier le css avec sa page
- Créer un fichier avec l'extension .css
- Ajouter la ligne suivante dans un fichier html
au niveau de la balise <head>
<html>
<head>
<link rel='stylesheet' href='style.css'>
</head>
</html>
Les sélecteurs css
Modification d'une balise HTML
balise
{
Propriete1 : valeur2 ;
}
Exemple
h1
{
color: red;
}
Propriéte CSS
- Changer la couleur du texte :
color : red ;
- Changer la couleur de fond :
background-color : orange ;
p
{
color: red;
}
body
{
background-color: orange;
}
Jouons avec les couleurs !
- Créer un fichier html nommé page.html
- Créer un fichier style.css
- Lier les deux fichiers
- Changer la couleur de fond du site en 'darkgreen'
- Mettre tout le texte en blanc
- Mettre les liens en orange
- Mettre le titre en rouge
Aller plus loin !
- En partant du fichier précédent, centré le titre
- Grossir le titre à 60px
- Réduire la taille du site à 600px en largeur
- Justifié les paragraphes
Meetup css

Contenu connexe

En vedette

Les meilleures photos d 'actu
Les meilleures photos d 'actu Les meilleures photos d 'actu
Les meilleures photos d 'actu
sempre de esquerda
 
La veille de Né Kid du 23.02.11 : le kidding
La veille de Né Kid du 23.02.11 : le kiddingLa veille de Né Kid du 23.02.11 : le kidding
La veille de Né Kid du 23.02.11 : le kidding
Né Kid
 
Les paraules dolces
Les paraules dolcesLes paraules dolces
Les paraules dolces
smarcos3
 
Présentation sur le Lead Generation
Présentation sur le Lead GenerationPrésentation sur le Lead Generation
Présentation sur le Lead Generation
Incloud Business Solutions
 
Pêche bretonne
Pêche bretonnePêche bretonne
Pêche bretonne
Comune di San Prospero
 
Tarea 9 prop accon_format_carmen indira velez
Tarea 9 prop accon_format_carmen indira velezTarea 9 prop accon_format_carmen indira velez
Tarea 9 prop accon_format_carmen indira velez
carivfi
 
« Laissez-vous conter Angers au fil du tramway »
« Laissez-vous conter Angers au fil du tramway »« Laissez-vous conter Angers au fil du tramway »
« Laissez-vous conter Angers au fil du tramway »
PRI_iDEV
 
Rahnuma e-khawateen-april-2015
Rahnuma e-khawateen-april-2015Rahnuma e-khawateen-april-2015
Rahnuma e-khawateen-april-2015
Muhammad Tariq
 
COM'UNIQUE
COM'UNIQUECOM'UNIQUE
COM'UNIQUE
Com'unique
 
Introduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, ParisIntroduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, Paris
Eric D.
 
Redes Sociales por Eduard Biete
Redes Sociales por Eduard Biete Redes Sociales por Eduard Biete
Redes Sociales por Eduard Biete
Carlos Pizcos
 
Què es la tecnologìa
Què es la tecnologìaQuè es la tecnologìa
Què es la tecnologìa
Ciuad de Asis
 
La veille de Né Kid du 19.05.11 : les banques favorites du monde, la pub fait...
La veille de Né Kid du 19.05.11 : les banques favorites du monde, la pub fait...La veille de Né Kid du 19.05.11 : les banques favorites du monde, la pub fait...
La veille de Né Kid du 19.05.11 : les banques favorites du monde, la pub fait...
Né Kid
 
Comercio electronico
Comercio electronicoComercio electronico
Comercio electronico
jgcamelo
 
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALECONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
Olga Bobrovnikova
 
L'Express - Analyse de l'interview Présidentielle du 14 juillet - Par Opinion...
L'Express - Analyse de l'interview Présidentielle du 14 juillet - Par Opinion...L'Express - Analyse de l'interview Présidentielle du 14 juillet - Par Opinion...
L'Express - Analyse de l'interview Présidentielle du 14 juillet - Par Opinion...
OpinionWay
 
La Veille De Né Kid Du 17 03 10 : la fin de la ménagère de moins de 50 ans
La Veille De Né Kid Du 17 03 10 : la fin de la ménagère de moins de 50 ansLa Veille De Né Kid Du 17 03 10 : la fin de la ménagère de moins de 50 ans
La Veille De Né Kid Du 17 03 10 : la fin de la ménagère de moins de 50 ans
Né Kid
 

En vedette (20)

Les meilleures photos d 'actu
Les meilleures photos d 'actu Les meilleures photos d 'actu
Les meilleures photos d 'actu
 
La veille de Né Kid du 23.02.11 : le kidding
La veille de Né Kid du 23.02.11 : le kiddingLa veille de Né Kid du 23.02.11 : le kidding
La veille de Né Kid du 23.02.11 : le kidding
 
Les paraules dolces
Les paraules dolcesLes paraules dolces
Les paraules dolces
 
Presentazione normandie.
Presentazione  normandie.Presentazione  normandie.
Presentazione normandie.
 
Crecimiento y desarrollo
Crecimiento y desarrolloCrecimiento y desarrollo
Crecimiento y desarrollo
 
Présentation sur le Lead Generation
Présentation sur le Lead GenerationPrésentation sur le Lead Generation
Présentation sur le Lead Generation
 
Pêche bretonne
Pêche bretonnePêche bretonne
Pêche bretonne
 
Tarea 9 prop accon_format_carmen indira velez
Tarea 9 prop accon_format_carmen indira velezTarea 9 prop accon_format_carmen indira velez
Tarea 9 prop accon_format_carmen indira velez
 
« Laissez-vous conter Angers au fil du tramway »
« Laissez-vous conter Angers au fil du tramway »« Laissez-vous conter Angers au fil du tramway »
« Laissez-vous conter Angers au fil du tramway »
 
Rahnuma e-khawateen-april-2015
Rahnuma e-khawateen-april-2015Rahnuma e-khawateen-april-2015
Rahnuma e-khawateen-april-2015
 
COM'UNIQUE
COM'UNIQUECOM'UNIQUE
COM'UNIQUE
 
Introduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, ParisIntroduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, Paris
 
Redes Sociales por Eduard Biete
Redes Sociales por Eduard Biete Redes Sociales por Eduard Biete
Redes Sociales por Eduard Biete
 
Què es la tecnologìa
Què es la tecnologìaQuè es la tecnologìa
Què es la tecnologìa
 
Pdf ss
Pdf ssPdf ss
Pdf ss
 
La veille de Né Kid du 19.05.11 : les banques favorites du monde, la pub fait...
La veille de Né Kid du 19.05.11 : les banques favorites du monde, la pub fait...La veille de Né Kid du 19.05.11 : les banques favorites du monde, la pub fait...
La veille de Né Kid du 19.05.11 : les banques favorites du monde, la pub fait...
 
Comercio electronico
Comercio electronicoComercio electronico
Comercio electronico
 
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALECONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
CONFUCIUS, MUSIQUE ET LES ORIGINES DE L'EDUCATION MUSICALE
 
L'Express - Analyse de l'interview Présidentielle du 14 juillet - Par Opinion...
L'Express - Analyse de l'interview Présidentielle du 14 juillet - Par Opinion...L'Express - Analyse de l'interview Présidentielle du 14 juillet - Par Opinion...
L'Express - Analyse de l'interview Présidentielle du 14 juillet - Par Opinion...
 
La Veille De Né Kid Du 17 03 10 : la fin de la ménagère de moins de 50 ans
La Veille De Né Kid Du 17 03 10 : la fin de la ménagère de moins de 50 ansLa Veille De Né Kid Du 17 03 10 : la fin de la ménagère de moins de 50 ans
La Veille De Né Kid Du 17 03 10 : la fin de la ménagère de moins de 50 ans
 

Similaire à Meetup css

cours Cascading style sheet developpement web
cours Cascading style sheet developpement webcours Cascading style sheet developpement web
cours Cascading style sheet developpement web
YounesOuladSayad1
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
YassineZARIOUH
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
YassineZARIOUH
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
RihabBENLAMINE
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
 
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & SassAlphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
Alphorm
 
CSS 3
CSS 3CSS 3
Dw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-basesDw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-bases
CERTyou Formation
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
DanielMohamed4
 
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
 
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnementDw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
CERTyou Formation
 
BDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdfBDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdf
RihabBENLAMINE
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
ssuser1a62e1
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
Ghodhbane Mohamed Amine
 
Langage CSS
Langage CSSLangage CSS
Langage CSS
El Habib NFAOUI
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
Manuel Adele
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
Bruno Bonnin
 

Similaire à Meetup css (20)

cours Cascading style sheet developpement web
cours Cascading style sheet developpement webcours Cascading style sheet developpement web
cours Cascading style sheet developpement web
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & SassAlphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
Alphorm.com Formation Simplifier l’usage du CSS avec Scss & Sass
 
Css
CssCss
Css
 
CSS 3
CSS 3CSS 3
CSS 3
 
Dw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-basesDw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-bases
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
 
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...
 
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnementDw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
Dw006 formation-dreamweaver-cc-les-bases-et-perfectionnement
 
BDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdfBDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdf
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
Langage CSS
Langage CSSLangage CSS
Langage CSS
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 

Meetup css

  • 1. Les mises en forme CSS Formation par Ludovic Verrecchia, intervenant à 3wAcademy
  • 2. Notre école Plus de 400 étudiants 11 salles dans le monde Plus de 2 ans d'existence
  • 7. CSS CSS : Cascading Style Sheets - Gérer l'affichage d'un site - Séparer la structure de l'affichage
  • 8. Lier le css avec sa page - Créer un fichier avec l'extension .css - Ajouter la ligne suivante dans un fichier html au niveau de la balise <head> <html> <head> <link rel='stylesheet' href='style.css'> </head> </html>
  • 9. Les sélecteurs css Modification d'une balise HTML balise { Propriete1 : valeur2 ; } Exemple h1 { color: red; }
  • 10. Propriéte CSS - Changer la couleur du texte : color : red ; - Changer la couleur de fond : background-color : orange ; p { color: red; } body { background-color: orange; }
  • 11. Jouons avec les couleurs ! - Créer un fichier html nommé page.html - Créer un fichier style.css - Lier les deux fichiers - Changer la couleur de fond du site en 'darkgreen' - Mettre tout le texte en blanc - Mettre les liens en orange - Mettre le titre en rouge
  • 12. Aller plus loin ! - En partant du fichier précédent, centré le titre - Grossir le titre à 60px - Réduire la taille du site à 600px en largeur - Justifié les paragraphes