Créer une feuille de style

Pour faire la mise en page de son site Web il faut se faire une feuille de style (une feuille CSS)

Ici on fixe à la balise html, une couleur blanche aux textes et une couleur de fond grise.

Script avec 4 lignes

001body {
002        color:white;
003        background-color:gray;   
004}

Ici on fixe à la balise a (les liens), la couleur rouge et le soulignement.

Script avec 8 lignes

001a {
002        color:red;
003        text-decoration: underline;	    
004}
005a:hover {
006        color:red;
007        text-decoration:none;	    
008}

Ici on déclare une classe CSS important, la couleur rouge et une épaisseur de trait grasse.

Script avec 4 lignes

001.important {
002        color:red;
003        font-weight:bold;	    
004}

On appelle cette classe depuis une page XHTML comme ceci

Script avec 1 ligne

001<span class="important ">mon texte est important</span>

Ici on déclare un IDentifiant CSS header, avec une taille de textes de 14px.

Script avec 3 lignes

001#header {
002        font-size:14px;    
003}

On appelle cet ID depuis une page XHTML comme ceci

Script avec 3 lignes

001<div id="header">
002        <p>Mon Header</p>
003</div>

IMPORTANT : Ce qu'il faut savoir c'est qu'une classe CSS peut être appelée plusieurs fois sur une page alors qu'un identifiant CSS doit être unique dans une page.

Vous pouvez prendre pour exemple notre feuille de style global ou encore lire l'article "Implanter du CSS à une page Web ".

Ci-dessous "la" feuille de style global.css

En gros ici je fixe les éléments courants de mon "futur" code (x)HTML.

Script avec 135 lignes

001/**********************************
002*
003*	DEFAULT
004*
005***/
006
007html, body {
008	margin:0;
009	padding:0;
010	font-family:Tahoma, Arial, Helvetica, Verdana, sans-serif;
011	font-weight:normal;
012	font-size:12px;
013	letter-spacing:0.5px;
014	color:#FFF;
015	background-color:transparent;
016	background-color:#191919;
017/*	background-image: url("img/background.png");  
018	background-position:top center;
019	background-repeat:no-repeat;   */
020}
021
022
023table {
024	margin:0;
025	padding:0;
026	font-family:Tahoma, Arial, Helvetica, Verdana, sans-serif;
027	font-weight:normal;
028	font-size:12px;
029	letter-spacing:0.5px;
030	color:#FFF;
031	border-spacing:0;
032	border-collapse:collapse;
033}
034
035div, p, hr, ul, li, form {
036	margin:0;
037	padding:0;
038}
039
040/***
041*
042*	/DEFAULT
043*
044**********************************/
045
046
047/**********************************
048*
049*	ELEMENTS HTML COURANTS
050*
051***/
052
053/* les titres */
054h1, h2, h3, h4, h5, h6 {
055	margin:0;
056	padding:0;
057	/*font-family:'Helvetica Neue', Tahoma, sans-serif;*/
058	/*font-family:Tahoma, sans-serif;*/
059	font-family:Impact, sans-serif;
060	text-transform:uppercase;
061	font-weight:normal;
062	word-spacing:5px;
063	letter-spacing:1px;
064}
065h1 {
066	font-size:36px;
067}
068h2 {
069	font-size:26px;
070}
071h3 {
072	font-size:20px;
073}
074h4 {
075	font-size:17px;
076	padding-bottom:10px;
077        padding-top:5px;
078        padding-left:5px;
079        padding-right:5px;
080}
081h5 {
082	font-size:14px;
083}
084h6 {
085	font-size:13px;
086}
087
088/* images */
089img {
090	border:none;
091	text-decoration:none;
092/*	border:1px solid #9c0404;  */
093}
094
095/* les liens */
096a {
097	text-decoration:none;
098	color:#FFF;
099}
100a:visited {
101	color:#FFF;
102}
103a:hover {
104	color:#9c0404;
105}
106a:target {
107	color:#FFF;
108}
109
110
111/* pargraphes */
112p {
113	text-align:justify;
114	line-height:18px;
115        padding-bottom:10px;
116        padding-top:5px;
117        padding-left:5px;
118        padding-right:5px;
119}
120
121/* les barres */
122hr {
123/*	clear: both;      */
124	height:1px;
125	border:0;
126	background-color:#565656;
127	margin-top:15px;
128	margin-bottom:20px
129}
130
131/***
132*
133*	/ELEMENTS HTML COURANTS
134*
135**********************************/

Ensuite on pourait faire une 2eme feuille v1.css avec le style des div#blocs des éléments identifiés.. comme je viens de vous expliquer plus haut :)

Keywords :