Le CSS pour les nuls / html en + clair [part 1]

Publié le par celine

[Article original daté du 8 novembre 2005 - remis à jour refondu entièrement en août 200_]

Explications pour les nuls du CSS ou HTML


Quand on parle de design d'un blog ou d'un site, les mots qui reviennent le plus souvent sont "CSS" et "Html" ou "xHtml"... Et oui, qui aurait deviné qu'il y avait tout un langage compliqué plein de codes chinois derrière des jolies pages sur Internet ?

J'ai commencé en sombre ignorante et débutante... J'ai créé un blog chez Overblog.com (la plateforme la plus flexible!), j'ai bidouillé mon design, j'ai appris... puis je fais désormais des designs pour les autres blogs et sites. Tout ce que j'ai appris c'est en pratiquant, en cherchant, en écoutant et lisant les conseils de bons sites.

Je vais donc vous donner quelques tuyaux pour mieux comprendre ce que vous voudrez apprendre concernant le CSS pour les nuls. Si ça ne vous semble pas encore assez clair, laissez-moi un commentaire et j'éclaircirais tout ça très vite avec des exemples.

1ère leçon : le vocabulaire pour repère

Le Html ou CSS étant codé en anglais et tout le monde ne pratiquant pas la langue de Shakspeare, voici quelques lignes qui pourront déjà vous aider à comprendre ce qui est quoi ;)

Body = corps de votre blog, les informations basiques y sont précisées
Head/header = entête
Footer = pied de page (bas)
Width = largeur
Hight = hauteur
Top = haut
Bottom = bas
Right = droite
Left = gauche
Borders = bordures
Background = fond
Font = police d'écriture (ex : Arial, Times New Roman...)
Px = pixel (taille utilisée en graphisme ou informatique au lieu des cm)
Link = lien vers une autre page
Box = modules (pour les blogs Overblog, les box sont les différents modules de la configuration)
Line = ligne d'un texte
Margin : marge extérieure
Padding : marge intérieure
url = un lien d’adresse Internet (http://celinedanslemonde.over-blog.com par exemple)
h2 = h correspond aux titres dans votre blog, selon l’emplacement de h et son numéro, il modifie le titre de votre module, article…
Bold : gras (plus épais que normal)
Underline : souligné
Ul ou li : ce sont des éléments qui permettent de faire des listes avec des puces. Ul permet d'ouvrir la liste et Li est la ligne avec la puce

Les expressions qui vous seront utiles pour préparer votre design

Vider son cache = actualiser et vider les balises déjà mémorisées par votre navigateur. Cela permet de voir les dernières modifications faites sur le site. (sous IE : Ctrl+F5 ; sous FF : outils>options>privé>vider son cache)
Balise = elles composent le code source (html), il en existe des centaines qui définissent toutes les modifications de votre texte (voir ici pour + de détails)
code couleur = vous verrez souvent ces informations : #ffffff ou rgb (254,254,254) : ce sont deux codes couleur pour le blanc. Le #ffffff est un code hexa, alors que rgb décline la couleur selon les trois couleurs d'imprimerie (rouge, bleu, vert). Toutes les couleurs sont codées pour que chaque ordinateur et navigateur puissent lire la bonne couleur d'une page internet.

2ème leçon : les définitions

C'est bien beau de tenter d'apprendre à se servir du CSS et du html, mais il faut peut-être savoir ce que c'est et quelle est la différence entre les deux :

>> Définition du CSS et html :

Le Html (Hypertext Markup Language) permet de construire des pages Internet. Il s'agit d'un langage de marques logiques qui utilise des balises (repères) pour identifier chaque élements sur une page : un titre, une image, un texte...

Le CSS est littéralement "Cascading Style Sheets : feuilles de style en cascade". STYLE est le mot clé. Le CSS vous permet d'appliquer un style graphique et visuel à votre texte (codé en html). C'est un langage complémentaire

Ex : vous avez une maison avec 4 pièces.

>> Le html serait l'équivalent du constructeur de base, il vous permet d'identifier qu'une piece (un élément) va être une chambre, il détermine où va être la salle de bain et en construit les murs, idem pour le garage et la toiture. Il s'occupe de toute la structure et du travail le plus grossier.

>> Le css va vous permettre d'habiller tout ça. Choisir la couleur des murs, la texture du canapé et la taille du lit.

Cependant, les deux travaillent ensemble et chacun possède les compétences de l'autre. Le html pourra, si on lui demande, choisir la couleur de la salle de bain et le CSS pourra abattre telle ou telle cloison entre deux pièces pour l'agrandir.

Les deux sont complémentaires car chaque navigateur (architecte dans notre exemple ci-dessus) n'interpretera pas les élements (la maison dans notre exemple) de la même façon. C'est dommage certes, mais c'est comme ça ;)

Vous verrez souvent, sur des sites de design ou de css, des expressions telles que "A mort IE" => Internet Explorer de Microsoft est malheureusement une grande source de problèmes pour les développeurs et les infographistes, car IE n'interprète pas toujours de la même façon que d'autres navigateurs.
Je vous conseille fortement d'utiliser Mozilla Firefox (appelé FF) qui respecte scrupuleusement les données CSS et qui reste le plus rapide.
=> Téléchargez Firefox ici


3ème leçon : les règles élémentaires

Maintenant que vous comprenez mieux (si si!) ce que représentent le html et le css, il faut savoir que chaque leçon a ses règles... Mais là, pas d'exception, promis !

Dans le css ou le html, les codes doivent être bien identifiés pour les détailler. Ainsi, si vous désirez que vos textes soient centrés sur votre blog, voici comment ça se qualifie :

En html :
<center>VOTRE TEXTE</center>
=> le texte entre les balises sera centré par sélection.

  • Les < > détermine une balise (<balise>). Une balise sert de marqueur, de guide pour votre navigateur qui va commencer à lire le code. Dans notre exemple, nous utilisons la balise <center>, qui va indiquer au navigateur que le texte entre la balise ouvrante et la balise fermante va être centré.
Il existe de très nombreuses balises (91 pour être exactes) mais une liste plus légère permet de configurer votre blog ou site sans problème. Elles peuvent être simples ou doubles. Dans l'exemple, la balise est double, c'est à dire qu'elle contient un élément entre l'ouvrante et la fermante avec un slash "/" :  <center ouvrante> ELEMENT </center fermante>

Un exemple de balise simple : <img src="http://adresse-de-votre-image.jpeg"/> : vous voyez que le slash fermant est directement dans la balise. Il n'y en a pas de deuxième. Car cette balise marque l'affichage d'une image tout simplement. [Src = source : l'adresse internet de votre image selon où vous l'avez hébergée]

Autre exemple de ligne html avec une balise sensiblement différente et pourtant qui aura le même effet que <center> </center> :

<div style="text-align: center;">VOTRE TEXTE</div>

Ici, nous utilisons la balise <div> qui permet d'ajouter une structure à un bloc de texte (comme un article entier par exemple).

  • Nous associons donc un attribut "style" à cette balise. Le style nous permet de préciser que l'alignement du texte (text-align) sera centré (:center).

En css :
.text {text-align:center;}
=> tous les textes contenus dans ".text" (selon ce qui est définit dans le template du blog) seront centrés.

Vous constatez que les élements sont sensiblement les mêmes mais avec quelques différences. Explication :

.vetements {couleur:red;}
=> tous vos vetements auront une couleur rouge.

  • Le point '.element' désigne une classe. La classe est comme un conteneur, il englobe tous les éléments d'un même groupe. Dans l'exemple ci-dessus, la classe est .vetements. Il s'agit d'un ensemble, d'une globalité.

Note 1 : ne pas se soucier des espaces dans le CSS, ils ne comptent pas
Note 2 : toujours mettre un point-virgule ( ;) après une information (ex. background-color :#fff ;)
Note 3 : idem pour le diez (#) devant un code couleur



Les bases sont donc posées, maintenant, il faut vous familiariser avec les éléments du css (CSS pour les Nuls Part 2) pour vous permettre de vous lancer dans votre propre design personnalisé !

Bon courage !



Liste des articles liés :


>> CSS pour les nuls [part 2] : Comment personnaliser son blog ?
>> Trucs et Astuces pour les blogs (où trouver des codes couleurs? D'autres blogs d'aide?...)
>> Je vous offre votre design !
>> Gadget et astuces pour les blogs [part 1]
>> Gagets et astuces pour les blogs [part 2] 

Publié dans CSS-Design

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
J
Merci beaucoup pour ces leçons bien utiles.
Répondre
P
merci pour cet article que j'ai cherché en vain...car je suis chez OB, j'ai refait récemment le design de mon blog, et j'ai embêté les modos plus d'une fois.je ne suis plus toute jeune et<br /> naturellement je patauge dans tous ces codes,les changements n'étant pas pris en compte, ils se sont rendus compte qu'en fait, il manquait un point devant certains codes...je mets donc ce site dans<br /> marque-page. ps je suis sous FF, mais impossible de vider le cache par le biais d'outils options vie privée, seuls les cookies peuvent être (provisoirement!) supprimés ...
Répondre
M
<br /> Merci pour les tutos !!!C'est très bien expliqsué! Je débute et je trouve tes tutos super cool !! Je vais surement me lancer dans mon css sous peu!!<br /> <br /> <br />
Répondre
A
<br /> merci pour ces precieux conseils en css !de très grande aide!<br /> <br /> <br />
Répondre
A
<br /> Slt.Merci pour vos explications sur le css.Après vous avoir lu j'y vois encore plus clair.J'aimerais savoir si vous avez aussi des notions sur la création des templates Joomla!<br /> (c'est du Css aussi).Merci<br /> <br /> <br />
Répondre