UNIVERSITE DE FIANARANTSOA

ECOLE DE MANAGEMENT ET D’INNOVATION

TCHNOLOGIQUE

Mention : DEVELOPPEMENT D’APPLICATION INTRANET ET

INTERNET

Parcours : Informatique

Niveau : L1 GROUPE B

Matière :TECHNOLOGIE WEB

LANGAGE CSS

Présenté par:

RANARISON Manantsoa Ambininiavo N°260I24

RANAIVONJOANY Nir’Aina Fitahiana N°212I24

ANDRIAMIHAJA Aina Tafita Harena Fifaliana N°283I24

RAZAFIMANDIMBY Fifaliana Naphtaniel N°204I24

Année Universitaire 2023-2024

INTRODUCTION
CSS est un langage de feuilles de style utilisé pour contrôler l’apparence visuelle des
documents HTML et XML. Son introduction a été une avancée majeure dans le domaine du
développement web, car elle a permis une séparation nette entre la structure (HTML) et la présentation
(CSS) des pages web. Cette séparation des préoccupations a grandement amélioré la maintenabilité, la
flexibilité et la réutilisabilité du code.

Avant l’avènement de CSS, le style des pages web était souvent inclus directement dans le
code HTML, ce qui rendait la mise à jour et la gestion des sites complexes et fastidieuses. Avec CSS,
les développeurs peuvent définir les styles dans des fichiers séparés, ce qui facilite grandement la
maintenance et permet des mises à jour rapides et efficaces.

CSS offre une grande variété de fonctionnalités pour contrôler l’apparence des éléments d’une
page web. Il permet de spécifier des propriétés telles que la couleur, la taille de la police, la
disposition, les marges, les bordures, les arrière-plans, les animations et bien plus encore. Sa syntaxe
est relativement simple, ce qui facilite son apprentissage et son utilisation, même pour les débutants.

Un autre aspect essentiel de CSS est sa capacité à rendre les sites web réactifs. Grâce à des
techniques telles que les Media Queries et les Flexbox, les développeurs peuvent créer des mises en
page qui s’adaptent automatiquement à différentes tailles d’écran et appareils, offrant ainsi une
expérience utilisateur optimale sur tous les dispositifs.

En résumé, CSS est un outil indispensable pour tout développeur web, offrant un contrôle
précis sur l’apparence des pages et facilitant la création de sites web attrayants, réactifs et
maintenables. Son adoption généralisée a contribué à façonner l’expérience utilisateur sur le web
moderne.

1
PARTIE I : PRESENTATION DE CSS

Définition
Le CSS, acronyme de Cascading Style Sheets (feuilles de style en cascade), est un langage de
programmation utilisé pour définir l'apparence et le formatage des documents écrits en HTML,
XHTML ou XML. Il permet de séparer la structure d'une page web de sa présentation, offrant ainsi
aux développeurs une plus grande souplesse et un meilleur contrôle sur l'apparence visuelle de leurs
sites.

Fonctionnement du CSS :
Le CSS fonctionne en associant des règles de style à des éléments HTML spécifiques. Ces
règles de style comprennent des instructions sur la façon dont ces éléments doivent être affichés à
l'écran ou imprimés. Les règles de style CSS sont généralement définies dans des fichiers séparés avec
l'extension .css et sont ensuite liées aux documents HTML à l'aide de balises <link> ou définies
directement dans la section <style> du document HTML.

Sélecteurs CSS :
Les sélecteurs CSS sont des motifs utilisés pour cibler les éléments HTML auxquels appliquer
des styles. Il existe plusieurs types de sélecteurs, notamment les sélecteurs d'éléments, les sélecteurs de
classe, les sélecteurs d'identifiant, les sélecteurs de descendant, les sélecteurs de groupe, etc. Les
sélecteurs permettent aux développeurs de définir avec précision quels éléments HTML doivent être
stylisés.

Propriétés et valeurs CSS :

Les propriétés CSS déterminent l'aspect visuel des éléments HTML, telles que la couleur, la
taille, la police, la marge, le remplissage, etc. Chaque propriété a une valeur qui spécifie comment
cette propriété doit être appliquée à l'élément sélectionné. Par exemple, la propriété "color" peut avoir
des valeurs comme "red", "#000", "rgb(255, 0, 0)", etc.

Priorité et héritage :
Le CSS utilise le concept de "cascading" (cascade) pour déterminer quelles règles de style
doivent être appliquées à un élément donné. Les règles peuvent être définies localement dans le
document HTML, dans des fichiers CSS externes ou par l'utilisateur via des feuilles de style
utilisateur. Le CSS utilise également l'héritage pour appliquer les styles aux éléments enfants en
fonction des styles définis pour leurs éléments parents.

Fonctionnalités avancées :
En plus des fonctionnalités de base, le CSS offre également des fonctionnalités avancées telles
que les animations, les transitions, les dégradés, les ombres, les transformations, etc. Ces
fonctionnalités permettent aux développeurs de créer des expériences web interactives et dynamiques.

2
PARTIE II : SYNTAXE DE CSS

1. Sélecteur :
Le sélecteur cible les éléments HTML auxquels vous souhaitez appliquer un style. Il peut
cibler différents types d’éléments, des éléments spécifiques, des classes d’éléments, des identifiants
d’éléments, etc.

Exemples de sélecteurs :

- Sélecteur d’élément : `p` cible tous les paragraphes.

- Sélecteur de classe : `.classe` cible tous les éléments avec la classe “classe”.

- Sélecteur d’identifiant : `#id` cible un élément avec l’identifiant “id”.

2. Propriété :
Les propriétés définissent les aspects visuels que vous souhaitez modifier. Chaque propriété a
un nom spécifique qui décrit ce qu’elle contrôle.

Exemples de propriétés :

- `color` : définit la couleur du texte.

- `font-size` : définit la taille de la police.

- `margin` : définit les marges extérieures d’un élément.

- `background-color` : définit la couleur de fond d’un élément.

3. Valeur :
Les valeurs sont des paramètres spécifiques qui sont assignés aux propriétés pour définir leur
comportement. Chaque propriété accepte des valeurs spécifiques qui lui sont propres.

Exemples de valeurs :

- Pour `color`, les valeurs peuvent être des noms de couleur (`blue`, `red`, etc.), des valeurs
hexadécimales (`#FF0000`), ou des valeurs RGB (`rgb(255, 0, 0)`).

- Pour `font-size`, les valeurs peuvent être en pixels (`px`), en pourcentage (`%`), en em (`em`), etc.

4. Déclaration :
Une déclaration est composée d’une propriété suivie de deux points (`:`) et de sa valeur, suivie
d’un point-virgule (`;`). Chaque déclaration se termine par un point-virgule.

Exemple de déclaration :

color: blue;

3
5. Bloc de règle :
Un bloc de règle est composé de sélecteurs et de déclarations entourées par des accolades `{}`.
Il permet de définir un ensemble de styles à appliquer à un ou plusieurs éléments HTML.

Exemple de bloc de règle :

h1 {

color: blue;

font-size: 24px;

6. Commentaires :
Les commentaires CSS commencent par `/*` et se terminent par `*/`. Ils sont utilisés pour
ajouter des annotations dans le code CSS, ce qui est utile pour expliquer le fonctionnement du code ou
pour ajouter des notes pour les développeurs.

Exemple de commentaire :

/* Ce sont des commentaires CSS */

Cette syntaxe de base du CSS permet de styliser efficacement les éléments HTML et de contrôler leur
apparence sur une page web.

PARTIE III : EXEMPLE DE CODE AVEC CSS

Voici un exemple simple de code CSS qui stylise un paragraphe et un bouton :

HTML :
<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Exemple de CSS</title>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<p class=”paragraphe”>Ceci est un paragraphe stylisé.</p>

<button class=”bouton”>Cliquez-moi</button>

</body>

</html> 4
CSS (dans le fichier styles.css) :

/* Styles pour les paragraphes */

.paragraphe {

color: navy; /* Couleur du texte */

font-size: 16px; /* Taille de la police */

font-family: Arial, sans-serif; /* Police de caractères */

/* Styles pour les boutons */

.bouton {

background-color: #4CAF50; /* Couleur de fond */

color: white; /* Couleur du texte */

padding: 10px 20px; /* Remplissage */

border: none; /* Pas de bordure */

border-radius: 5px; /* Coins arrondis */

cursor: pointer; /* Curseur */

/* Changement de style au survol du bouton */

.bouton:hover {

background-color: #45a049; /* Nouvelle couleur de fond */

Dans cet exemple, le fichier HTML définit un paragraphe et un bouton, chacun ayant une
classe spécifique (`paragraphe` et `bouton`). Le fichier CSS (styles.css) applique des styles spécifiques
à ces classes.

Le paragraphe est stylisé avec une couleur de texte bleu marine, une taille de police de 16 pixels et une
police de caractères Arial ou sans-serif. Le bouton a une couleur de fond verte, du texte blanc, un
remplissage de 10 pixels en haut et en bas et de 20 pixels à gauche et à droite, pas de bordure, des
coins arrondis, et un curseur pointeur. De plus, lorsque vous survolez le bouton, sa couleur de fond
change pour un vert plus foncé.

5
CONCLUSION
En conclusion, CSS représente une pièce maîtresse du développement web moderne, offrant
aux développeurs un contrôle précis sur l’apparence et la mise en page des pages HTML et XML. En
permettant une séparation claire entre le contenu et la présentation, CSS facilite la maintenance, la
réutilisabilité et l’évolutivité des sites web. Grâce à ses fonctionnalités avancées, notamment la
capacité à rendre les sites réactifs, CSS contribue à offrir une expérience utilisateur optimale sur une
variété de dispositifs. Son adoption généralisée et son importance dans la conception web en font un
outil incontournable pour quiconque souhaite créer des sites web modernes, esthétiques et
fonctionnels.