Scribd
Importer
3 vues8 pages

CSS3

CSS, ou Cascading Style Sheets, est un langage utilisé pour styliser les pages HTML en modifiant les couleurs, la taille du texte, et l'organisation des éléments. Il peut être intégré de trois manières : en ligne, dans le fichier HTML, ou via un fichier externe, cette dernière méthode étant recommandée. Les propriétés CSS essentielles incluent la couleur du texte, la taille, la police, et l'utilisation de sélecteurs pour cibler des éléments spécifiques.

Transféré par

isaacyava5
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
3 vues8 pages

CSS3

CSS, ou Cascading Style Sheets, est un langage utilisé pour styliser les pages HTML en modifiant les couleurs, la taille du texte, et l'organisation des éléments. Il peut être intégré de trois manières : en ligne, dans le fichier HTML, ou via un fichier externe, cette dernière méthode étant recommandée. Les propriétés CSS essentielles incluent la couleur du texte, la taille, la police, et l'utilisation de sélecteurs pour cibler des éléments spécifiques.

Transféré par

isaacyava5
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

🎨 1. C’est quoi CSS ?

CSS veut dire Cascading Style Sheets.

👉 C’est le langage qui sert à mettre du style sur une page HTML.

👉 Il change les couleurs 🎨

👉 Il change la taille du texte 🔠

👉 Il gère l’espace 📦

👉 Il organise les éléments 📐

HTML = squelette 🦴

CSS = vêtements + design 👕✨

🏗 2. Comment ajouter du CSS ?

Il y a 3 façons :

🔹 1. CSS dans la balise (Inline)

<p style= »color : red ; »>Bonjour</p>

⚠️Pas recommandé pour les grands projets.

🔹 2. CSS dans le fichier HTML (dans <style>)

<head>

<style>

P{

Color : red ;

</style>
</head>

🔹 3. CSS dans un fichier externe (RECOMMANDÉ ✅)

Dans ton HTML :

<link rel= »stylesheet » href= »[Link] »>

Dans ton fichier [Link] :

P{

Color : red ;

🧠 3. Comment fonctionne le CSS ?

Structure :

Sélecteur {

Propriété : valeur ;

Exemple :

P{

Color : blue ;

P = ce qu’on veut modifier

Color = ce qu’on change

Blue = la valeur

🔹 4. Les propriétés CSS indispensables


🎨 1. Couleur du texte

P{

Color : red ;

🎨 2. Couleur de fond

Body {

Background-color : lightgray ;

🔠 3. Taille du texte

H1 {

Font-size : 40px ;

🔤 4. Police d’écriture

P{

Font-family : Arial ;

📦 5. Largeur

Div {
Width : 300px ;

📦 6. Hauteur

Div {

Height : 200px ;

📏 7. Marge (espace extérieur)

Div {

Margin : 20px ;

📦 8. Padding (espace intérieur)

Div {

Padding : 20px ;

🖼 9. Bordure

Div {

Border : 2px solid black ;

}
🔳 10. Centrer un texte

H1 {

Text-align : center ;

🏷 5. Les sélecteurs importants

🔹 Sélecteur par balise

P{

Color : blue ;

🔹 Sélecteur par classe

Dans HTML :

<p class= »important »>Texte</p>

Dans CSS :

.important {

Color : red ;

👉 Le point . sert pour les classes.

🔹 Sélecteur par id

Dans HTML :
<p id= »titre »>Bonjour</p>

Dans CSS :

#titre {

Color : green ;

👉 Le # sert pour les id.

⚠️Un id doit être unique.

📦 6. Exemple simple complet (HTML + CSS)

📄dans [Link]

< !DOCTYPE html>

<html>

<head>

<title>Mon site</title>

<link rel= »stylesheet » href= »[Link] »>

</head>

<body>

<h1>Bienvenue</h1>

<p class= »texte »>Je découvre le CSS</p>

</body>

</html>

🎨 [Link]

Body {

Background-color : lightblue ;

}
H1 {

Color : darkblue ;

Text-align : center ;

.texte {

Color : white ;

Font-size : 20px ;

📐 7. Flexbox (très utilisé aujourd’hui)

Permet d’aligner facilement les éléments.

.container {

Display : flex ;

Justify-content : center ;

Align-items : center ;

Display : flex ; → active flexbox

Justify-content → horizontal

Align-items → vertical

📌 Résumé pédagogique

CSS sert à :

🎨 Changer les couleurs

🔠 Modifier le texte

📦 Gérer les espacements


📐 Organiser la mise en page

✨ Rendre le site beau

🧠 Règle importante

Chaque ligne CSS finit par :

Exemple :

Color : red ;

Ne jamais oublier le point-virgule !

Vous aimerez peut-être aussi