Introduction au CSS3

Les feuilles de style en cascade, appelées CSS, sont un langage simplement conçu destiné à simplifier le design des pages Web. Le CSS vous permet d’appliquer des styles aux pages Web. Plus important encore, CSS vous permet de le faire indépendamment du HTML qui compose chaque page Web. Pour faire simple vous pouvez séparer le HTML et le CSS, créer un lien vers la page CSS qui vous permettra de lier ces derniers pour que vous pussiez obtenir le résultat voulu. Le CSS est facile à apprendre et à comprendre,

À quoi sert le CSS

• Rendre beau votre site internet
• Appliquer des fonts ( polices d’écritures ) là où vous souhaitez
• Personnalisez les formulaires, vos éléments, vos blocs
• Sans le langage CSS votre site ressemble juste à une compilation de bloc
• Grâce au CSS déplacer les éléments là où vous souhaitez

Pourquoi le CSS

• CSS fait gagner du temps: vous pouvez écrire du CSS une fois et réutiliser la même feuille dans plusieurs pages HTML.
• Maintenance facile: pour effectuer un changement global, changez simplement le style et tous les éléments de toutes les pages Web seront mis à jour automatiquement.
• Navigation hors ligne: CSS peut stocker des applications Web localement à l’aide d’une capture hors ligne, ce qui nous permet de visualiser des sites Web hors ligne. Syntaxe CSS Un CSS comprend des règles de style qui sont interprétées par le navigateur puis appliquées aux éléments correspondants dans votre document. Un ensemble de règles de style se compose d’un sélecteur et d’un bloc de déclaration.

Exemple de CSS

dans cet exemple on va :

• donner un fond rouge sur toute la page car on selection « body »
• à toutes les balises p , on va lui attribuer une police d’écriture de type « Arial » et une taille de 12 pixels
• tous les titres de type h1 je lui donne la couleur noir et je le centre
• tous les titres de type h2 je lui donne la couleur rouge et je l’aligne sur le côté gauche

body {
  background-color: red;
}

p {
  font-family: Arial;
  font-size: 12px;
}

h1 {
  color: #000;
  text-align: center;
}

h2 {
  color: #FF000;
  text-align: left;
}