Ma\u00c3\u00aetrisez les fondamentaux de CSS (Cascading Style Sheets) pour transformer l’apparence de vos pages web. Ce tutoriel complet couvre la syntaxe CSS, les m\u00c3\u00a9thodes d’application et les propri\u00c3\u00a9t\u00c3\u00a9s essentielles.<\/p>\n

Level :<\/strong> D\u00c3\u00a9butant<\/p>\n

Dur\u00c3\u00a9e :<\/strong> 45 minutes<\/p>\n

Target audience:<\/strong> D\u00c3\u00a9veloppeurs web d\u00c3\u00a9butants, Designers souhaitant coder<\/p>\n<\/div>\n

Objectifs p\u00c3\u00a9dagogiques<\/h2>\n
\n
Comprendre le r\u00c3\u00b4le de CSS dans le d\u00c3\u00a9veloppement web<\/li>\n
Ma\u00c3\u00aetriser la syntaxe des r\u00c3\u00a8gles CSS<\/li>\n
Savoir appliquer CSS \u00c3\u00a0 un document HTML<\/li>\n
Utiliser les propri\u00c3\u00a9t\u00c3\u00a9s de base pour le style<\/li>\n<\/ul>\n
\n

1. Feuille de Style Externe (Recommand\u00c3\u00a9)<\/h4>\n
La m\u00c3\u00a9thode la plus commune et la plus maintenable :<\/p>\n
`\n<link href=\"styles\/style.css\" rel=\"stylesheet\" \/><\/code><\/pre>\n`
`And in your file style.css<\/code> :<\/p>\n`
`p { \n color: red; \n}<\/code><\/pre>\n`

`\n Hello World! \n<\/h1><\/code><\/pre>\n\n \u00e2\u0161\u00a0\u00ef\u00b8\u008f Attention :<\/strong> Les styles en ligne rendent le code difficile \u00c3\u00a0 maintenir. Pr\u00c3\u00a9f\u00c3\u00a9rez toujours les feuilles de style externes.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n`

Colors<\/h4>\n
`\/* Change the background color of the page \/ \nhtml { \n background-color: #00539f; \n}<\/p>\n`
`\/ Text color *\/ \nh1 { \n color: #00539f; \n}<\/code><\/pre>\n`

1. HTML Structure<\/h4>\n
`<!DOCTYPE html> \n<html lang=\"fr\"> \n<head> \n <meta charset=\"UTF-8\"> \n <title>Mon Premier Site Stylis\u00c3\u00a9<\/title> \n <link rel=\"stylesheet\" href=\"style.css\"> \n<\/head> \n<body> \n`

1. Feuille de Style Externe (Recommand\u00c3\u00a9)<\/h4>\nLa m\u00c3\u00a9thode la plus commune et la plus maintenable :<\/p>\n\n<link href=\"styles\/style.css\" rel=\"stylesheet\" \/><\/code><\/pre>\nAnd in your file style.css<\/code> :<\/p>\np {\n color: red;\n}<\/code><\/pre>\n

\n Hello World!\n<\/h1><\/code><\/pre>\n\n \u00e2\u0161\u00a0\u00ef\u00b8\u008f Attention :<\/strong> Les styles en ligne rendent le code difficile \u00c3\u00a0 maintenir. Pr\u00c3\u00a9f\u00c3\u00a9rez toujours les feuilles de style externes.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Colors<\/h4>\n\/* Change the background color of the page *\/\nhtml {\n background-color: #00539f;\n}<\/p>\n\/* Text color *\/\nh1 {\n color: #00539f;\n}<\/code><\/pre>\n

1. HTML Structure<\/h4>\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Mon Premier Site Stylis\u00c3\u00a9<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n

1. Feuille de Style Externe (Recommand\u00c3\u00a9)<\/h4>\n
La m\u00c3\u00a9thode la plus commune et la plus maintenable :<\/p>\n
`\n<link href=\"styles\/style.css\" rel=\"stylesheet\" \/><\/code><\/pre>\n`
`And in your file style.css<\/code> :<\/p>\n`
`p { \n color: red; \n}<\/code><\/pre>\n`

`\n Hello World! \n<\/h1><\/code><\/pre>\n\n \u00e2\u0161\u00a0\u00ef\u00b8\u008f Attention :<\/strong> Les styles en ligne rendent le code difficile \u00c3\u00a0 maintenir. Pr\u00c3\u00a9f\u00c3\u00a9rez toujours les feuilles de style externes.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n`

Colors<\/h4>\n
`\/* Change the background color of the page \/ \nhtml { \n background-color: #00539f; \n}<\/p>\n`
`\/ Text color *\/ \nh1 { \n color: #00539f; \n}<\/code><\/pre>\n`

1. HTML Structure<\/h4>\n
`<!DOCTYPE html> \n<html lang=\"fr\"> \n<head> \n <meta charset=\"UTF-8\"> \n <title>Mon Premier Site Stylis\u00c3\u00a9<\/title> \n <link rel=\"stylesheet\" href=\"style.css\"> \n<\/head> \n<body> \n`