Want to create interactive content? It’s easy in Genially!
parcours css
Cécile Dulucq
Created on April 29, 2021
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Smart Presentation
View
Practical Presentation
View
Essential Presentation
View
Akihabara Presentation
View
Pastel Color Presentation
View
Visual Presentation
View
Relaxing Presentation
Transcript
Parcours CSS
1- Ouvrir Notepad++, et copiez ces trois lignes de code CSS dans un nouveau fichier puis sauvegardez le fichier sous le nom style.cssdans le dossier "parcours html" 2-Ouvrez votre fichier index.html dans Notepad++ et copiez la ligne suivante quelque part au sein de l'élément head (c'est-à-dire entre les balises <head> et </head>) : <link href="style.css" rel="stylesheet" type="text/css"> 3- Enregistrer votre fichier dans Notepad++, puis rafraichir la page web
Fichier html
Page Web
Modifier des zones spécifiques
1- Dans le fichier style.css, remplacez les lignes précédentes par : On constate que tous les titres de niveau 1 sont de couleur rouge et les textes mis en paragraphe sont de couleur verte.
Fichier html
Page Web
Fichier css
Modifier la police du texte
1- Dans le fichier style.css, remplacez les lignes précédentes par : On constate que la police de l'ensemble du document est "Open sans" en taille 10 px, excepté les titres qui sont de taille 60 et qui sont centrés ainsi des textes mis en paragraphe et en liste qui sont de taille 16 et dont on a précisé un espacement et la hauteur.
Fichier html
Page Web
Fichier css
Mettre en forme le corps de page
Dans le fichier style.css, ajoutez : body { width: 600px; margin: 0 auto; background-color: #FF9500; padding: 0 20px 20px 20px; border: 5px solid black; } On constate que le coors mesure 600 px, qu'il est entouré d'une bordure de largeur 5 px, que la couleur de fond est #FF9500.
Fichier html
Page Web
Fichier css
Modifier la couleur du fond
Dans le fichier style.css, ajoutez : html { background-color: #00539F; } On constate que le fond de la page (hors cadre) est bleu (#00539F)
Page Web
Fichier html
Fichier css
Mettre une image en fond
fond.jpg
Télécharger l'image de fond.jpg et enregistrez là dans le dossier "parcours html" Dans le fichier style.css, remplacez la consigne précédente par : html { background-image: url(fond.jpg); } On constate qu'on a inséré une image en fond.
Page Web
Fichier html
Fichier css
Positionner le titre
Dans le fichier style.css, ajoutez : h1 { margin: 0; padding: 20px 0; color: #00539F; text-shadow: 3px 3px 1px black; } On constate que le titre de niveau 1 est de couleur #00539F, sans marge, avec un contour noir.
Page Web
Fichier html
Fichier css
Modifier la taille de l'image
Dans le fichier style.css, ajoutez : img { width: 500px; height: 500px; } On constate que le ratio n'est pas conservé. Remplacez la consigne précédente par : img { width: 500px; height: auto; } Maintenant le ratio est conservé et l'image parfaitement dimensionnée par rapport à la taille du corps.
Page Web
Fichier html
Fichier css