Structure d’une page en CSS
CSS Débutant .com

Structure d’une page en CSS

Comment constuir une un site en CSS

Voici la base d’une page en CSS : les fondations 🙂

Partons de deux fichiers :

la page de votre site : index.html
Le fichier CSS : default.css

Permière étape : le code HTML

Pour commencer, créer une page « index.html », à la racine du site avec ce code HTML :
</font>

<body>
<div id="container">
<div id="topbar"> ...topbar content... </div>
<div id="navbar"> ...navbar content... </div>
<!-- the main section where all pages will be loaded using URL variables and PHP include() function -->
<div id="main">
<div id="column_left"> ...column left content... </div>
<div id="column_right"> ...column right content... </div>
<!-- this layer solve some issue about the css design, forced the #main layer height equal to height of two column layer (#columnt_left and #column_right) inside itself -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
</div>
									</body>

Explication visuel : (qui parle d’elle même normalement)

Etape suivante: Votre fichier CSS

Enfin, un petit copier/coller dans votre fichier default.css

L’élément #container fait dans ce code 780 pixels: Chaque éléments placés dans #container doit faire moins de 780 pixels!

/* ------------------------------
Tutorial de cssdebutant.com (merci de laisser ce commentaire)
------------------------------ */

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

/*
div.spacer, permet de faire deux colonne dans #container
*/

div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}

Résultats !

Voici le résultat visuel :

Le CSS en 3 questions/réponses – en bref

🖥️ C'est quoi HTML et CSS ?

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l’aspect graphique d’une page en HTML

🤔 Qu'est-ce que le CSS ?

CSS est l’acronyme de « Cascading Style Sheets » c’est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

📆 Différence entre CSS et CSS3 ?

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.

Structure d’une page en CSS
CSS Débutant .com