CSS

Cascading Style Sheets

Après avoir réalisé son site avec du code html, le développeur a besoin d’ajouter des couleurs,des formes, des animations pour que le site soit beaucoup plus présentable, plus attirant à première vue. Pour faire tout ceci, on ne va pas utiliser une palette et des pinceaux comme un artiste le ferait sur son dessin. Mais nous allons utiliser des styles pour ajouter des formes et des couleurs sur nos pages. Ce qui nous permet de faire ça est le CSS. 

CSS est l’acronyme de Cascading Style Sheets en anglais qui signifie feuille de style en cascade. Le CSS nous permet de gérer la présentation d’une page web.

Syntaxe de base du CSS : Une règle de style comprend :

• un sélecteur : il s’agit des balises concernées par cette règle ;

• un bloc de déclarations : il indique les propriétés à attribuer à ces balises. Chaque déclaration est du type : propriété : valeur;

Voici la syntaxe générale d’une feuille de style CSS :

 balise1 { 

propriete1: valeur1;

propriete2: valeur2;

propriete3: valeur3;

}
balise2 {

propriete1: valeur1;

propriete2: valeur2;

propriete3: valeur3;

propriete4: valeur4;

}
balise3 { 

propriete1: valeur1;

}

Exemple :
P {
color: green;
background-color: red;
font-size : 10px;
}

Emplacement du code :

Vous avez trois possibilités : 

  • directement dans les balises du fichier HTML via un attribut style 
  • dans l’entête <head> du fichier HTML
  • dans un fichier .css

Premiere possibilité :

Il s’agit d’écrire le code à l’intérieur de la page html au sein d’un élément <style>. Le code ne pourra s’appliquer qu’à la page dans laquelle il est crée. Cette méthode n’est pas recommandée pour des raisons de maintenance d’un site web.

<!DOCTYPE > 
<html>
<head>
<title>exemple</title>
<méta charset= "utf-8">
</head>
<body Style=" background-color: orange;">
<h1>
Sen Dev Tech
</h1>
<p Style="color: blue; font-size: 10px;">
Bonjour et bienvenue
</p>
</body>
</html>

Deuxième possibilité : 

Dans ce cas, il s’agit d’écrire le code dans l’en-tête de la page HTML. c’est-à-dire, la feuille de style est interne, est placée sur la page.

<!DOCTYPE html>
<head>
<title>exemple deux</title>
<meta charset= "utf-8">
<style>
P{
color: green;
font-size : 10px;
}
</style>
</head>
<body>
<p>bonjour et bienvenue Sen Dev Tech</p>
</body>
</html>

Troisième possibilité : (méthode la plus recommandé)

Cette méthode est pratique parce qu’elle permet de séparer le code HTML de celui CSS : le fichier est plus facile à lire. C’est aussi la méthode qui est recommandée : si vous devez concevoir un site qui dispose de plusieurs dizaines de fichiers, la feuille de style CSS peut être utilisé par tous les fichiers du site web ;

sinon (sans séparation HTML et CSS) le code CSS devra être copié dans les fichiers HTML qui utilise le code CSS.

Ainsi vous allez avoir deux fichiers : le fichier HTML et le fichier CSS. mais pour se faire, nous devons lier les deux fichiers avec la balise <link> suivie de l’attribut src= » » qui nous indique le chemin de notre fichier CSS. 

NB: les fichiers peuvent être parfois dans un meme dossiers mais généralement les fichiers sont sépares dans des dossiers. dans ce cas il faut bien indiquer le chemin.

<!DOCTYPE html> 
<html>
<head>
<title>troisième exemple</title>
<meta charset= "utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>
sen dev tech
</h1>
<p>
bonjour assane
</p>
</body>
</html>

Fichier CSS :

p {
color :blue ;
font-size: 10px;
text-align: center;
font-weight: bold;
}

Sélecteurs CSS :

Un sélecteur est un des moyens les plus simples pour appliquer un style à un element HTML.  Un sélecteur va donc nous permettre de cibler un ou plusieurs éléments HTML afin de leur appliquer un style particulier.

exemple : 

p{

   color: #000;

font-weight: bold;

}

dans cet exemple p est un sélecteur parce qu’il nous permet d’appliquer un style sur tout notre paragraphe. en effet vous pouvez aussi faire autant d’exemples.