• Mardi 23 mars 2010

Quelques tips en CSS

Bonjour, aujourd'hui je vous ai préparé un article sur le CSS (Cascading Style Sheet).

3 méthodes pour ajouter le CSS dans vos pages :
En inline qui consiste a ajouter le CSS directement dans vos balises HTML (pas propre mais utile pour faire des tests rapides)

<a href="http://www.point2zero.net" style="font-size:1.2em;">Point2Zero</a>

Avec le CSS entre les balises <head> et du type :

<html>
<head>
<title>Ma Page Web</title>
<style type="text/css">
/* Votre css ici */
</style>
</head>
...

Ou en utilisant une feuille de style externe par exemple : style.css que l'on inclus dans notre <head> soit avec :

<html>
<head>
<title>Ma Page Web</title>
<link rel="stylesheet"  href="style.css" type="text/css" media="all" />
</head>
...

Ou avec ce code :

<html>
<head>
<title>Ma Page Web</title>
<style type="text/css" media="all">
	 @import "style.css";
</style>
</head>
...

Comment centrer un élément dans une page web en CSS ?
Nous avons une page web avec une balise <div> qui se trouve dans la balise <body>. Le but étant de centrer la balise <div> quoi qu'il se passe.

Dans un premier temps nous allons ajouter des "background" a nos balises <body> et <div> pour les différencier.

Mettre la balise <body> avec un fond gris #AAA et la balise <div> avec un fond blanc #FFF.

body{
  background-color:#AAA;
}
div{
  background-color:#FFF;
}

Jusque là rien de trés difficile. Maintenant ajoutons une taille à notre <div> pour pouvoir le centrer en fonction de sa taille.

body{
  background-color:#AAA;
}
div{
  background-color:#FFF;
  width:960px;
}

Et ajoutons une marge sur notre <div>

body{
  background-color:#AAA;
}
div{
  background-color:#FFF;
  margin:0 auto;
  width:960px;
}

Petite explication : j'utilise un racourcis pour la marge. Normalement j'aurai du faire :

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;

Le racourci permet d'écrire beaucoup moins de texte (chargement plus rapide, css moins lourd etc...).
J'ai une margin en haut et en bas à 0 donc pas de marge et a gauche et a droite en auto. Donc en fonction de la place disponible à droite et a gauche de l'élément il centrera le contenu.
Autres choses :
- Triez les propriétés dans l'ordre alphabétique.
- N'indiquez pas l'unité quand la valeur est 0. 0px = 0% = 0 :)
Avant :

body{
  border:0px;
  margin:0%;
  padding:0;
  background:#FFF;
  outline:0;
}

Apres :

body{
  background:#FFF;
  border:0;
  margin:0;
  padding:0;
  outline:0;
}

Facile non ?

Voici quelques liens de Framework CSS pour construire vos pages facilement :
- 960grid.
- Elasticss.