Accueil > Cours > Bases CSS

Bases CSS

Les classes et id en CSS

Une classe CSS peut s’appliquer à autant de balises que l’on veut. En notation CSS, on la marque ’.nom_classe’. En HTML, pour déclarer une classe, il suffit de rajouter l’attribut class="nom_classe" à la balise concernée. Une balise peut contenir autant de classes que désiré, il suffit de séparer les classes par un espace.

Un id CSS ne peut s’appliquer qu’à une balise. En notation CSS, on le note ’#nom_id’. En HTML, pour déclarer un id, il faut rajouter l’attribut id="nom_id" sur la balise concernée. Une balise ne peut avoir qu’un id, contrairement aux classes.

Écrire du style

Il existe deux manières d’appeler votre code CSS dans une page web :

  • Dans la page web
  • Dans un fichier externe

Quelle que soit la méthode utilisée, le code CSS reste le même.
Dans une page web, pour écrire du CSS, il vous suffit d’écrire (de préférence dans le <head>) :

<style type="text/css">
	votre style
</style>

Dans un fichier externe, il vous suffit d’écrire :
<link rel="stylesheet" type="text/css" href="url_du_style.css" />

Dans le fichier .css, vous mettrez votre code CSS en brut.

 

Le code CSS

La structure du code

Le code CSS est basé sur une syntaxe simple, qui se base base sur l’imbrication des balises. On déclare d’abord une propriété, puis ’ :’, les valeurs de la propriété, et enfin un ’ ;’ pour finir la propriété :


.ma_classe{
        /* contenu CSS */
        propriété:valeurs;
}
#mon_id{
        /* contenu CSS */
        propriété:valeurs;
}

Ou encore


div p.ma_classe{
        /* contenu CSS */
        propriété:valeurs;
}
div.ma_classe table tr td.ma_classe2{
        /* contenu CSS */
        propriété:valeurs;
}

Les propriétés

Voici les propriétés de base du CSS, pour chaque propriété, il existe plusieurs éléments qui sont facultatifs (mais il en faut au minimum un de déclaré !)

  • Les unités de dimensions sont définies en pixels (px), pourcent (%), largeur de la police (em), points (pt). Les unités standards (mm, cm etc...) existent, mais sont déconseillées.
  • Les unités de couleurs sont en RVB codé en hexadécimal (#ffffff) ou rvb (rvb(255, 255, 255)). Les couleurs sont (dans l’ordre) Rouge Vert Bleu (ou RGB : Red, Green, Blue)
  • background-color:#ffffff url(image_ar_plan) no-repeat left top; Indique la couleur d’arrière plan (en hexadécimal), l’image d’arrière plan, la répétition de l’image, et la position de cette dernière.
  • color:#ffffff; Indique la couleur du texte en hexadécimal
  • margin:1%; Force une marge externe de 1% sur tous les côtés
  • margin-left:1px; Force une marge gauche externe de 1px (aussi dispo en top, right, bottom)
  • padding:10px; Force une marge interne de 10px sur tous les côtés (dispo aussi en côté par côté)
  • border:1px solid #FF0000; Indique une bordure rouge sur tous les côtés de 1px

Voici l’implémentation des marges dans le CSS :

Marges

  • line-height:14px; Force la hauteur de la ligne à la taille indiquée
  • font-size:10px; Indique que le texte aura une police de 10px de haut
  • font-weight:bold; Passe le texte en gras (la valeur ’normal’ existe aussi)
  • font-family:Arial, Verdana, sans-serif; Indique la police utilisée pour le texte. Garder des polices standard pour que tout le monde puisse lire le texte correctement.
  • height:500px; >Fixe la hauteur d’un bloc ( sur internet explorer, ceci correspond à la hauteur minimale et non pas à une hauteur fixe).
  • width:50%; Fixe la largeur d’un bloc ( sur internet explorer, ceci correspond à la largeur minimale et non pas à une largeur fixe).

Les polices standard

Il existe 11 polices disponibles sur le net, pour être sur que tous les utilisateurs puisse voir le texte correctement.

  1. Arial
  2. Courrier
  3. ’Courrier New’
  4. Cursive
  5. Helvetica
  6. Monospace
  7. Times
  8. ’Times New Roman’
  9. ’Trebuchet MS’
  10. serif
  11. sans-serif

Il est conseillé de sélectionner plusieurs polices par sécurité, au cas ou l’internaute n’a pas la police désirée sur son poste.

CSS sur la police

  • Text-transform:uppercase/lowercase Met le texte en majuscules/minuscules
  • Text-decoration:none/underline/overline Souligne, Surligne ou enlève le soulignement
  • font-family:Arial, times, sans-serif Spécifie la police à utiliser dans l’ordre de déclaration
  • font-size:12px Spécifie la taille de la police
  • font-weight:bold Met du gras ou l’enlève
  • font-style:italic/normal Gère l’italique/normal

Il existe d’autres CSS pour les polices, mais ils sont déconseillés, donc je ne vous les met pas.