Le CSS

Invité

Le CSS

I]Meuh c'est quoi ce machin.

Comme le html, c'est un language informatique pour créer un site web :)
Ce language sert a mettre de la couleur et à organisé votre site vous comprendrez dans un futur proche...

II]Feuille CSS

Personnelement je travail avec unefeuille CSS externe :) c'est a dire que je fais une page à part (avec l'extension .CSS) et que je ne rentre pas le script dans la page html. Enfin pas directement en tout cas ;)
Mais où on met la feuille externe ???
Tous simplement grâce à une balise: <link> (comme vous pouvez le voir c'est une balise seule)
Qu'est ce qu'on met dedans ???
<link>
(on met cette ligne entre <head> et </head>)
Vous pouvez changer deux attributs title (titre) et href (nom de votre page css).

Nous allons travailler d'abord sur l'organisation du site...
Généralement vous avez:
-L'en-tête
-Le corps
-Les menus
-Le pied de page

III]Comment sa marche

1)Les couleurs et taille

Et bien c'est simple par exemple je veut que tout les titre (en <h1>) de la page soit en rouge, je tape:

h1
{
color: red;
}

ou encore les paragraphes en vert avec une taille de 20 pixels

p
{
color: green;
font-size: 20px;

}

ou les titre (en <h2>) jaune

h2
{
color: yellow;
}

/!\ Comme vous pouvez le constatez a chaque fin valeur (blue, red, 18px etc...) on, met un ;

2)L'organisation du site
Comme je l'ai dit plus dans l'organisation du site on a:
-L'en-tête
-Le corps
-Les menus
-Le pied de page

Tout d'abord on s'occupe de la page:

body /*on travail sur toute la page*/
{
width: 750px;
margin: auto;/* on centre la page */
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.jpg");/* images de fond du site */
}

/*en-tête */

#en_tete
{
width: 750px;
height: 100px;
background-image: url("images/banniere.png");/* ici on met l'adresse de la banniére */
background-repeat: no-repeat;
margin-bottom: 10px;
}

/*menu */

#menu
{
float: left;
width: 120px;
}

.element_menu
{
background-color: #red; /* couleur de fond des menus rouge*/
background-image: url("images/fondmenu.png"); /* ou une image */
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}

/*corps de la page */

#corps
{
margin-left: 140px;
margin-bottom: 20px;
padding: 5px;

color: black; /*lettre noir*/
background-color: white;/* fond du cadre avec texte blanc */
background-image: url("images/fondtexte.jpg"); /* ou une petite image :p */
background-repeat: repeat-x;

border: 2px solid black;
}

/*pied de page (qui se trouve tout en bas) */

#pied_de_page
{
padding: 5px;

text-align: center; /* on le centre ce petit cadre */

color: black;/*allez un petit texte noir */
background-color: green;/* sur un fond vert */
background-image: url("images/fondpieddepage.png");/* ou une image comme d'hab')
background-repeat: repeat-x;

border: 2px solid black;
}

Voila bien sur les couleurs sont moches mais c'est fais expret pour ne pas que sa vous plaise :p comme sa vous le faites tous seul ^^
Il ne reste plus qu'a appeler cette page: pagecss.css par exemple en fait il faut que sa corresponde avec sa <link> (ici pagecss.css)

By cominon

j' ai un doute ... alors sondage ! :)

Invité

Hum le CSS c'est déjà assez compliqué lol