Logo du site webpotentiel.com 3.4 Campagne 3 Offre Zen 468-60

Le langage CSS

image Le langage CSS

Principe du CSS

Le langage CSS (ou feuilles de style en cascade) est le format utilisé pour décrire la présentation de documents HTML.
Le CSS est donc un langage de présentation, permettant de créer un vrai design sur chaque page de votre site. Vous pourrez par exemple changer la taille, le positionnement, le style et la couleur de chaque élément de vos pages comme les titres, images, etc.
Tout en étant complémentaire au language HTML, le CSS devient donc très vite indispensable si l'on veut réussir un design clair et personnalisé de ses pages web.
Pour ceux qui veulent créer leur propre site web sur Internet sans passer par des éditeurs de sites web, il est donc indispensable de connaître les bases du langage CSS.

Par ailleurs, avant d'expliquer le fonctionnement du langage css, voici un lien important vous permettant de retrouver les différentes propriétés CSS que vous pourrez utiliser afin de personnaliser le design de votre site web: Liste des propriétés CSS.

Intégrer une page CSS dans un fichier HTML

Pour appliquer une feuille de style CSS sur une page HTML, vous devez créer une balise <link> dans l'entête de votre code HTML de la façon suivante :

1
2
3
4
5
6
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="http://www.monsite.com/design-site.css" />
</head>
<body>...</body>
</html>

Cela équivaut à dire : "Je veux que tu appliques à mon code HTML le style CSS que j'ai réalisé dans la page design-site.css de mon site."

Structuration du CSS

Une page CSS est composée de 3 éléments :

 

Au final, notre code CSS doit ressembler à ceci :

1
2
3
4
p
{
  text-align: center;
}

Le CSS et les attributs id/class

L'intérêt d'avoir les attributs "id" et "class" est que l'on peut les placer sur n'importe quel balise.
Que ce soit sur des titres ou des images, ils permettent de donner à ces éléments un design personnalisé. Les valeurs que l'on donne à ces attributs, c'est-à-dire que l'on peut choisir celles qu'on veut. Cependant, il est important de bien les nommer car ces valeurs vont aussi nous servir comme point de repère dans notre feuille CSS.
Par exemple, si dans notre code HTML, on a :
<h1 class="titre">

On doit retrouver dans notre code CSS :

1
2
3
4
.titre
{
font-size: 15px;
}

Si l'on avait voulut utiliser l'attribut "id", on aurait mis un dièse "#" à la place d'un point "." dans notre code CSS.
Cependant, l'id a le souci de n'être utilisable qu'une fois. C'est pourquoi l'on préfèrera utiliser l'attribut "class" qui peut s'utiliser dans tous les cas.

Le Langage CSS et les balises universelles

L'avantage avec les balises universelles est que, contrairement aux attributs id/class (qui ne peuvent se placer que sur des balises), on peut les placer là où on veut.
Ces deux balises s'utilisent de manières différentes :

Le CSS et les imbrications de balises

Faire des imbrications de balises s'avère très utiles pour personnaliser sa page web, et il n'y a aucune difficulté à l'appliquer.

Voici le premier exemple :
Code CSS :

1
2
3
4
.bloc1 p
{
color: blue;
}

Cela signifie : "Tous les paragraphes contenus dans les balises de type "class" et ayant le nom "bloc1" auront un texte de couleur bleue.

Autre exemple :
Code CSS :

1
2
3
4
p strong
{
font-size: 16px;
}

Cela signifie : "Toutes les balises "strong" de tous les paragraphes doivent avoir une taille de "16px".

Utiliser efficacement le langage CSS

 


Nouveau forum du site!
Voir - S'inscrire


Partager / Evaluer cette page web :
Articles Forum Tags


Commentaires (2) :
adnane a écrit (le 16/11/2010 à 14:09:03) :

salut, je voudrais en savoir beaucoup plus sur la methode CSS pour créer une page HTML ,est ce que il y a un logiciel pour écrire le programme ?!! merci
Tom a écrit (le 17/11/2010 à 14:12:18) :

Bonjour adnane,
Des cours suivis de tutoriels sur le css sont prévus. Concernant votre demande de logiciel, le mieux reste de faire un codage manuel en utilisant le Bloc-notes ou mieux encore Notepad++ que vous trouverez gratuitement en téléchargement.

Page : [1]

Ajouter un commentaire :
Prénom* :
Email* :
Site web (mettre http://) :
Message* :
Code anti-spam Code de vérification
Code affiché ?*

Définition : les champs marqués * sont obligatoires.


Haut de page

Les articles du site vous permettent de trouver de l'info gratuit, des news, actu, définition, image et vidéo internet. Ces articles traitent de nombreux domaines (thème actuel: Langage de Site) comme le web (google, yahoo, email, navigateur, etc.), le référencement de sites web (annuaire, moteur de recherche), le langage web (html, css, php..), mais aussi la santé, l'affiliation, l'argent (gagner, economiser), les sciences, les jeux vidéo et bien d'autres encore. Vous pouvez rechercher des articles à l'aide du moteur de recherche interne du site en rentrant des mots clés (exemple avec "Le langage CSS"). Par ailleurs, le Forum du site permet de trouver des solutions et réponses à toute question ou problème rencontré et l'Annuaire de Référencement permet de référencer votre site web, blog, annuaire ou forum pour des résultats efficaces et un meilleur positionnement. Pour toute demande particulière, utilisez la rubrique Contact du site.



Copyright 2011 "www.webpotentiel.com", tous droits reservés
Contact - Plan du site