Introduction au CSS 3

Articles-fr / Par

CSS, le language complémentant le HTML pour styliser une page web. La structure global du fichier se fait sous forme de classes, celles-ci sont appelées à partir des noms (id ou class) définis dans votre HTML.

Pré-requis

Des pré-requis en HTML vous seront utiles pour la compréhension du CSS. Vous pourrez cependant en apprendre plus parmi les exemples ci-dessous

Règles essentielles

  • Favoriser la déclaration des balises html (de type body, div, nav, …) lorsque vous les déclarez des éléments constants votre style. Cette technique vous permettra un ciblage d’éléments et une lecture plus facile de votre code.
  • Utiliser les .class pour des éléments de style redondants.
  • Utiliser les #id pour des éléments uniques.

CSS is a language based on english terms to give more visual meaning to blocs, characters or images for instance. Those terms are called properties and covers a huge panel of customisations such as sizes, proportions, positioning, colors, alignements and plenty of others. These properties wouldn’t work on their own, this is why depending on what you are trying to do, there will be one or multiple attributes that give precise indications on the usage.

Grâce au propriétés de positionnement styles de texte et autres animations… vous serez en mesure créer un site plaisant visuellement et ergonomiquement adapté aux contraintes d’aujourd’hui.

Attention aux propriétés utilisés, certaines sont parfois indisponibles sur certains navigateurs. Vous trouverez ici la liste complète des styles CSS ainsi que les différentes compatibilités.

<style>
/* Déclaration de CSS dans le HTML */
   .className{
     width:100px;
     height:100px;
     background:red;
   } 
</style>

L’option ci-dessus n’est pas conseillé pour des raisons de clarté et de structure du code. Cependant, cette méthode peut être utilisé à volonté pour tester votre style. Le meilleur moyen pour inclure du CSS à votre page est de l’intégrer à un fichier css dédié et de déclarer ce dernier dans le « head » de votre HTML en suivant l’exemple ci-dessous :

<link rel="stylesheet" type="text/css" href="style.css">

Tout le style inclut sera appliqué dans les fichiers HTML ou PHP dans lesquels vous avez fait le lien dans votre « head ».

Related Posts