Vos premiers pas en CSS

Publié le par PêUR

Qu'est-ce que le CSS?

Littéralement Feuille de Style en Cascade (Cascading StyleSheet), le CSS, permet de décrire la présentation d'une page sur Internet. Il permet de centraliser toute la mise en forme et donc d'avoir une mise en page cohérente.

Le principe d'une feuille de style est d'associer une mise en page précise à certains éléments structurants (balises) de vos pages.

Comment accèder à mon CSS?

Pour personnaliser votre CSS, vous devez être en mode avancé (Onglet "Accueil" > sélectionnez à droite "Mode avancé"). Pour en savoir plus .

Dans l'onglet "Design" sélectionnez le lien "Modifier le CSS" dans la boîte "Sous-menu" à droite de la page. Vous accèdez ainsi à la feuille de style de votre blog. Pour pouvoir y enregistrer des modifications, vous devez cocher la case "Je souhaite modifier moi même le fichier CSS".

Avant toute modification, il est conseillé de copier votre CSS. Pour cela, faite Ctrl + A (sélectionner tout) puis Ctrl + C (Copier) et coller le Ctrl + V dans un fichier texte (Bloc-notes, Wordpad ou tout autre traitement de texte)
En procédant de la sorte, vous aurez toujours la possibilité de revenir en arrière en faisant la démarche inverse.

Comment écrire dans votre feuille de style?

Une ligne de CSS (ou règle) se décompose en 2 parties:

  • Les sélecteurs, qui décident à quels éléments le style s'applique
  • Les déclarations, entre accolades, qui indiquent l'apparence que ces éléments doivent prendre.

 

Les sélecteurs sont au nombre de 3:

  • Les éléments simple: body, h2, a que vous retrouvez dans votre page HTML sous la forme <body>, <h2> et <a>,
  • Les classes, commençant par un "." (point): .box, .article, .Date que vous retrouvez dans votre page HTML sous la forme <div class="box">, <div class="article"> et <div class="Date">
  • Les identifiants, commençant par un "#" (dièse): #top, #footer, #articleAccueil que vous retrouvez dans votre page HTML sous la forme <div id="top">, <div id="footer"> et <div id="articleAccueil">

 

Il est possible de mettre plusieus sélecteurs par règle en les séparant par une "," (virgule). La règle s'appliquera alors à tous les sélecteurs:

#Article1, #Article2 {background: #fff;}
Les identifiants Article1 et Article2 auront tous deux un fond blanc.

Les déclarations sont toujours de la forme propriété: valeur(s) séparés par un ";" (point virgule) et compris entre des accolades:

body {color: #000; text-decoration: none; font-weight: bold}

Vous trouverez ici  une liste exhaustive des propriétés CSS.

Vous pouvez aussi ajouter des commentaires dans votre feuille de style en l'encadrant par "/*" et "*/"

/* Ceci est un commentaire */

 

S'y retrouver dans la feuille de style

Votre feuille de style est structuré en différentes zone afin de mieux repérer les règles que vous voulez modifier. Ces zones sont identifiables par un commentaire de ce genre:

/* --- Elements Principaux --- */

Vous trouverez ci-dessous une présentation de chacune de ces zones:

  • Elements principaux Cette zone régi l'aspect des éléments principaux de votre blog. La police, le fond, les liens, les puces, les images, les titres et les boutons. Si un éléments n'a pas d'autre style imposé dans le CSS, c'est d'ici qu'il héritera son style.
  • Structure Cette zone régi la mise en page, l'architecture de votre blog. C'est ici que vous choisissez la taille et l'apparence des colonnes, de l'entête et du pied de page.
  • Box Cette zone régi l'aspect des modules
  • Recherche Ne pas en tenir compte, ces règles ne sont plus appelés par votre blog.
  • Articles Cette zone régi l'aspect de vos articles. C'est aussi ici que vous trouverez les règles pour modifier l'aspect de la date, le pied d'article (commentaire, trackbacks...) et les styles personnels de la barre d'outils de l'éditeur d'article.
  • Commentaires Cette zone correspond à l'aspect des commentaires laissés par vos visiteurs ainsi que l'aspect du formulaire de saisie du commentaire.
  • Trackbacks Cette zone correspond à l'aspect des trackbacks fait par vos visiteurs ainsi que l'aspect du formulaire de saisie de trackback.
  • Recommander Cette zone correspond au style du formulaire pour recommander votre blog.
  • Newsletter Cette zone régi l'apparence du formulaire d'inscription à votre newsletter.
  • Calendrier Cette zone permet de donner une apparence précise au calendrier.
  • Accueil album Cette zone représente les règles régissants l'accueil de vos album photo.
  • Album photo Cette zone définit l'apprence de l'album photo.

 

À vous de jouer (exemples de modifications courantes)

Vous trouverez ci-dessous les modifications les plus souvent demandées et réalisés par les blogeurs. Pour faciliter la lecture, dans les exemples, seule la déclaration à modifier ou à rajouter est indiquée, vous ne devez pas supprimer les autres déclarations existantes pour ce sélecteur. En rouge, mettre vos valeurs personnalisées.

Ajout d'un fond d'écran répété

body {background: #couleur url(http://url_de_l'image.jpg); }

Ajout d'un fond d'écran fixe non répété

body {background: #couleur url(http://url_de_l'image.jpg) no-repeat center fixed; }

Ascenseur vertical (Uniquement Internet Explorer)

html {
  scollbar-face-color:#F9F8FA;
  scrollbar-highlight-color:#F9F8FA;
  scrollbar-3dlight-color:#bbb;
  scrollbar-darkshadow-color:#808080;
  scrollbar-shadow-color:#000;
  scrollbar-arrow-color:#000;
  scrollbar-track-color:#aaa;
}

/* Le sélecteur html n'est pas présent dans la feuille de style, vous devez le rajouter.*/

Ajouter un curseur (Uniquement Internet Explorer)

body { cursor: url(http://url_du_curseur.cur); }
/* Le curseur doit avoir obligatoirement une extension .cur ou .ani */

Modifier la largeur des colonnes

Les modèles 101, 102, 103 et 104, sont des modèles de CSS dit "élastiques" car ils s'adaptent à la résolution de l'écran de votre visiteur. Les colonnes de droite et de gauches ont une largeur fixe et sont maintenues à droite et à gauche de le la fenêtre du navigateur, alors que la colonne centrale, sans taille fixe vient combler l'entre 2 colonnes en s'étirant ou en se rétrecissant. (Cette explication est valable avec 2 colonnes aussi!)

Vous l'avez donc compris, seules les colonnes de modules (droite et/ou gauche) peuvent se voir modifier leur largeur.

Notez, que pour différencier une structure à 3 colonnes d'une structure à 2 colonnes gauche ou droite, on utilise un sélecteur de sélecteur, respectivement #main1, #main3 et #main2.

#main3 #leftnav { width: 300px; }
/* Exemple pour élargir la colonne de gauche d'un blog à 2 colonnes gauche. */

Les modèles 205 et supérieurs, sont des modèles de CSS fixes, c'est à dire que les 2 ou 3 colonnes du blog ont une largeur fixe et sont contenues dans une zone centrée de largeur fixe.

Vous l'avez compris, il est donc possible de donner une largeur précise à toutes les colonnes. Il faut toutefois faire extrêmement attention aux largeurs données pour éviter les débordements horizontaux entrainant le déplacement de la colonne de droite sous le blog. Plus d'info ici.

Pour éviter ces débordements, il suffit d'aditionner la largeur de toutes les colonnes et faire en sorte que ce chiffre soit inferieur de 10px à 20px à la largeur du contenant des colonnes (#global). Cette marge de 10px à 20px représente la largeur des marges interne et externes des colonnes.

Notez, que pour différencier une structure à 3 colonnes d'une structure à 2 colonnes gauche ou droite, on utilise un sélecteur de sélecteur, respectivement #troiscol, #deuxColGauche et #deuxColDroite.

/* Exemple pour élargir les colonnes d'un blog à 3 colonnes. */
#global { width: 900px; }
#troisCol #main { width: 440px; }
#troisCol #rightnav { width: 220px; }
#troisCol #leftnav { width: 220px; }

/* 440 + 220 + 220 = 880. Le contenant des colonnes ayant une largeur de 900px on ne risque pas d'avoir un débordement horizontal.*/

Appliquez un style différent à chaque module

Chaque module est caractérisé par un identifiant unique. Voir la liste des identifiants ici . En utilsant cet identifiant comme sélecteur de sélecteur, on peut appliquer un style différent à chaque module.

#Archive .box-content { background: #000; }
/* En supposant que soit déterminée un fond blanc à tous vos modules, le module archive, avec cette rèle, sera seul affublé d'un fond noir. */

Publié dans CSS

Commenter cet article

pphilippe 27/07/2007 21:38

Bonsoir
Bon et ben voilà j'y suis arrivé avec la touche 'reset"
finalement c'est bien pratique !
merci pour le travail que tu fais, et si ce n'est pas trop tard , bonnes vacances

pphilippe 26/07/2007 23:15

Bonsoir.
Et me voilà encore à quémander des conseils.
J'ai voulu améliorer le design en changeant de modèle et bing tout a volé en éclat.
Je n'arrive plus à recréer mes trois colonnes comme avant, même en jouant sur les %, le main et le reste.
Ah je m'en veux de mêtre laissé tenté par les propositions du site !
Que puis je faire à mon css pour retrouver un eu d'équilibre ?
- j'ai conaté également que pour avoir un texte aéré, il fallait passer par des polices xxsmal, c'est normal ?
merci d'avance.

pphilippe 17/05/2007 00:13

Bonsoir
merci ;-)
merci ;-)
merci ;-)
merci ;-)
merci ;-)

PêUR 18/05/2007 10:58

:):):):):)

pphilippe 16/05/2007 12:23

Bonjour
Augmenter le % oui mais où ?
dans le body ? je ne vois rien
merci
body {margin:0px; padding:0px; background-color:white; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}
h1 {color: #DE7008; font-size: 20px;}

PêUR 16/05/2007 12:55

Je suis donc aller voir ton css, contrairement à ce que tu disais les largeurs ne sont pas en % mais en px.
En gros, tes modifications doivent avoir lieu sur les propriétés width, margin et padding des identifiants:
#global pour la largeur totale de ton blog, #troisCol #main pour la colonne centrale, #troisCol #rightnav pour la colonne droite et #troisCol #leftnav pour la colonne de gauche.

pphilippe 16/05/2007 00:00

re bonsoir
merci pour la réponse.
Il me semblait que le CSS était déjà en %, mais je vais y regarder de plus près.
encore merci

PêUR 16/05/2007 00:31

Je n'ai pas regardé dans le détail, il est peut être en pourcentage et dans ce cas il faut augmenter les pourcentages ;)