Pour travailler les CSS il est possible d'utiliser la plupart des éditeurs de texte. Toutefois pour faire au plus simple, nous utiliserons le bloc note qui s'obtient sous Windows par :
(en bas à gauche de l'écran d'accueil Windows )
démarrer ==> programmes ==> accessoires ==> Bloc-notes


Pour commencer un certain nombre de balises doivent encadrer un document en CSS. Nous ne les étudierons pas ici dans le détail, il suffira pour l'instant de savoir qu'elles sont indispensables et devront être reproduites intégralement dans le code de toute page. Comme ci-dessous :

Vous pouvez très bien à ce stade vous contenter de faire un copier-coller des balises cidessus sur la page bloc note que vous avez ouvert et l'enregistrer dans Mes documents dans le dossier qui vous plaira. Il suffit pour ce une fois le copier coller réalisé sur le bloc note, de cliquer en haut à gauche du bloc note sur "Fichier" puis "Enregistrer sous" . Dans la fenêtre qui s'ouvre en haut à "Enregistrer dans" sélectionnez le dossier de Mes Documents dans lequel vous voulez enregitrer votre fichier. Puis en bas à Nom du fichier tapez le nom que vous voulez en n'oubliant surtout pas de terminer ce nom par l'extension .html ou .htm
si nous appelons notre fichier "jeanluz" nous devons obligatoirement écrire jeanluz.html ou jeanluz.htm
Enfin ne surtout pas oublier de cliquer sur la flèche de la ligne suivante "Type" pour remplacer "Fichiers texte (.txt)" qui s'affiche par défaut par "Tous les fichiers", sans cela votre fichier resterait un fichier texte et ne serait donc pas exécuté par le navigateur.
Finir en cliquant à droite sur Enregistrer.
Fermer tout et vous rendre dans le dossier Mes Documents où vous avez enregistré jeanluz.html
Double clic et vous devez obtenir ceci : jean luz
Une fois sur cette page vous pouvez toujours retrouver votre code source bloc note par un clic droit dans un vide de la page 'jeanluz.htm', puis un clic gauche sur "Afficher la source", et revoici le bloc note.
Enfin pour enregistrer une simple modification du code source bloc note, il suffit de cliquer en haut à gauche sur Fichier ==> Enregistrer ( et non pas enregistrer sous ). La modif opère dès qu'on actualise le fichier html correspondant par la touche F5 ou en fermant le fichier, ici donc essai1.html, puis en le rouvrant en double cliquant dessus.

Nous allons réaliser une première page minimum à titre d'exemple de démarrage.
Nous indiquerons simplement deux règles de style :
( donc entre les balises style )
1 - la couleur de fond du document qui se définit :
body {background-color: #fffacd;}
où body est le sélecteur cad l'élément dont on définit une propriété - ici couleur lemonchiffon ou #fffacd du fond de la page - entre les deux accolades { } qui définissent son bloc de déclaration.
2 - la couleur de la police d'écriture que nous choisissons red (rouge en anglais ):
body { color:red; }

Il ne nous reste plus qu'à écrire un petit texte entre les deux balise body et /body.
N'oublions pas de donner un petit titre à notre page entre les balises title et /title, par exemple :
ma première page css

Nous obtenons donc le code source suivant :

Enregistrons ce code source dans le Dossier de mes Documents créé pour ce sous le nom stjeanluz-1.html
Ce qui donne - caractères d'écriture en rouge, fond lemonchiffon et titre : "ma première page css "- : st jean de luz 1.html
Rappelons que pour retrouver le code source ci-dessus, une fois le fichier stjeanluz-1.html ouvert, il suffit de faire un clic droit dans un vide de la page puis clic gauche sur "Afficher la source"


Nous allons maintenant créer une page progressivement en modifiant le code source de stjeanluz-1.html, pour en faire stjeanluz-2.html.
Nous allons supprimer la couleur de fond et la couleur d'écriture rouge de body, ce qui par défaut nous donnera un fond blanc et écriture noire. Nous modifions le titre en "st jean luz 2 css".

Nous allons commencer par créer un en-tête de page. Pour définir ce sélecteur auquel nous donnons le nom que nous voulons il suffit de le faire précéder d'un # ( Alt Ger + touche 3 partie gauche du clavier )
Notre sélecteur sera donc #entete et nous allons définir ses propriétés entre les deux accolades { (touche 4 à gauche du clavier + Alt Gr) et } (touche + = à gauche du clavier + Alt Gr), comme suit :

Voyons dans le détail les règles de style définies entre les accolades de notre en-tête #entete :
- border:1px dashed red; ==> cela créée une bordure de 1px d'épaisseur en trait discontinu ( dashed ) de couleur rouge (red). Ceci est une matérialisation très utile pour la construction d'une page. On voit ainsi facilement la séparation des différentes divisions composant la page, sans confusion possible. Une fois la page terminée, on pourra supprimer ces bordures si on les juge inesthétiques. Il suffit pour cela d'effacer totu simplement cette règle de style dans #entete.
- background-color:#eeeeee; ==> définition d'une couleur de fond grise pour le seul en-tête.
- color:green; ==> le texte de l'en-tête sera de couleur green, vert.
- width:100%; ==> la division en-tête occupera 100% de la largeur de la page disponible
( on remarquera ainsi que Internet Explorer introduit automatiquement des marges ce qui fait que nos 100% correspondent à l'espace défini par IE. Si l'on veut disposer de totalité de la largeur de l'écran, il suffit de taper la règle de style : body { margin:0; padding:0;} )
- height:50px; ==> nous donnons à notre en-tête une hauteur de 50px;
- font-size:20px; ==> les caractères de notre en-tête mesureront 20px;
- font-family:arial; ==> nous choisissons la police de caractères "arial"
- text-align:center; ==> nous voulons que le texte qui va figurer dans notre en-tête soit centré et non aligné par défaut à gauche
- padding-top:20px; ==> nous laissons une marge interne de 20px entre le niveau supérieur de notre en-tête et le haut du texte pour que celui-ci ne colle pas à la limite supérieure, ce qui serait disgracieux.

Nos règles étant définies il faut maintenant appeler la division #entete entre les deux balises body et /body par :
div id="entete" puis fermer par /div , ces deux balises devant être entourées de guillemets comme ci-dessus.
Comme texte de notre en-tête : "Ceci est notre entête.

Ce code source étant sur un fichier bloc note nous en faisons un "enregistrer sous" comme expliqué plus haut dans le dossier de Mes Documents choisi, sous par exemple le nom stjeandeluz-2.html, et nous obtenons :saint jean de luz 2.html

Nous allons maintenant créer un pied de page sur le même modèle. Ce qui donne :

Nous avons volontairement choisi les mêmes règles de style pour le pied que pour l'entête, les explications sont donc exactement les mêmes.
Deux balises br / sont là pour séparer les deux divisions horizontalement, tant que nous n'aurons pas introduit quelquechose entre l'en-tête et le pied.
Une fois enregistré sous le nom saintjeanluz-3.html nous obtenons : saint jean luz 3.html

Nous allons maintenant créer la division entre le haut et le bas de la page, cad entre la division en-tête et la division pied.
Techniquement le plus simple - et surtout ce qui évite de nombreux problèmes - est de crèer une seule division pour cet espace milieu de page. Division qu'ensuite on pourra diviser elle-même à notre guise, mais cette fois sans risque de déséquilibrage de l'ensemble.
Nous créons donc la division centrale #cont définie dans le code source ci-desous :

Expliquons un peu #cont :
- width:100%; ==> sa largeur est de 100% de l'espace disponible
- height:300px; ==> sa hauteur est de 300px;
- border: 1px solid blue; ==>pour matérialiser et différencier cette division des deux autres, nous l'entourons d'une bordure de 1px trait continu couleur bleue.
- text-align:center; ==> pour l'instant nous voulons que le texte soit centré
- padding-top:20px; ==>nous laissons une marge interne de 20px entre le haut de la division du milieu et son texte

Nous n'oublions surtout pas d'appeler cette division entre les balises body et /body par :
div id="cont" Voici notre division milieu /div
Une fois enregistré ce code source sous le nom stjeandeluz-4.html nous obtenons :st jean de luz 4.html

Nous allons maintenant diviser la division centrale en deux colonnes. D'abord une colonne gauche d'environ 1/4 de la largeur totale, son sélecteur se nommera #colonnegauche. Le code est le suivant :

Examinons les règles de style de #colonnegauche :
- width:200px; ==> pour débuter nous lui donnons une largeur fixe de 200px ( on verrra après si cette largeur définie a priori convient esthétiquement, sinon il suffira juste de modifier le chiffre 200px)
- border-left: 1px solid black; ==> nous matérialisons cette colonne en lui appliquant une bordure gauche de 1px en trait continu et de couleur noire.
- border-right: 1px solid black; ==> nous matérialisons cette colonne en lui appliquant une bordure droite de 1px en trait continu et de couleur noire.
- height:400px; ==> sa hauteur est de 400px impérativement égale ou inférieure à #cont son conteneur qui la contient et dans lequel elle doit s'emboîter
- background-color:#eeeeee; ==> nous lui donnons la même couleur de fond grise que pour le pied et l'en-tête.
- float:left; ==> cette division doit flotter à gauche, cad se situer à gauche dans #cont qui contient #colonnegauche
Nous n'oublions surtout pas d'appeler cette division entre les balises body et /body par :
div id="colonnegauche" /div ( on la situe impérativement dans #cont, puisqu'elle s'inscrit dedans, cad entre div id=#cont et /div[de #cont ] )
Enfin pour des raisons esthétiques nous avons supprimé la marge automatique que laissait le navigateur internet explorer en définissant body { margin:0;pading:0;}
Une fois enregistré ce code source sous le nom de saintjeandeluz-5.html, nous obtenons :saint jean de luz 5.html

Nous devons maintenant créer une colonne de droite à l'intérieur de notre division conteneur. Le problème est que notre conteneur ayant une largeur de 100% de l'écran et la colonne gauche une largeur de 200px, si nous définissons la largeur de la colonne droite en pixel pour une résolution d'écran donnée par exemple 1024 x 768, ce qui laisserait 824px, cela n'irait pas pour les autres résolutions comme 800x600 et déséquilibrerait l'ensemble. Nous allons remédier à cela en définissant les largeurs des colonnes gauche et droite en %, lequel pourcentage s'applique obligatoirement à la division qui les contient, soit #cont. Nous allons donc modidier pour #colonnegauche width:20%; et attribuer à #colonnedroite width:79%; A remarquer qu'il ne faut jamais faire 100% par l'addition des deux width, cela empêcherait le deuxième flottement, pour des raisons qu'il serait un peu long d'expliquer ici.
Voici donc le code avec la colonne droite:

Examinons maintenant les règles de #colonnedroite :
- border:1px dashed red; ==> pour la matérialiser temporairement nous l'entourons d'une bordure de 1px en trait discontinu rouge.
float:right; ==> elle flotte à droite de son conteneur, cad qu'elle colle sa limite droite à l'intérieur contre la limite droite de son conteneur #cont
- background-color:#ffffff; ==> nous lui donnons un fond blanc
- text-align:justify; ==>le texte que nous y placerons sera justifié, cadaligné des deux côtés
- height:398; sa hauteur sera un peu inférieure à celle de son conteneur #cont
- width:79%; ==> sa largeur sera de 79% de son conteneur #cont
Nous avons donc modifié dans #colonnegauche width:200px; en width:20%;
Une fois enregistré ce code source sous le nom stjeandeluz-6.html, nous obtenons la page:st jean de luz 6.html

Soucions-nous maintenant un peu de la présentation de la page à laquelle nous allons apporter quelques ajustements :

Nous avons d'abord modifié l'en-tête #entete:
- height:100px; ==> sa hauteur était insuffisante, nous la portons à 100px
- border-bottom: 1px solid black; ==> il est inesthétique de l'entourer complètement d'une bordure, on se contentera d'un trait bottom, cad marquant la limite inférieure de l'en-tête
-font-size:20px; ==> pour le texte que l'on y portera il aura une hauteur de 20px
- font-family:arial; ==> on choisit la police de caractères arial
- text-align:center; ==> le texte y sera centré.

Le pied de page ou #piedpage reçoit exactement les mêmes modifications que #entete

Le conteneur ou division centrale #cont ne change pas

Nous adaptons la colonne gauche #colonnegauche de sorte qu'elle puisse aisément recevoir du texte et éventuellement des photos, soit :
- width:26%; ==> nous portons sa largeur à 26% de son conteneur #cont, ce qui va bien sûr nous obliger à diminuer de 6% la largeur de la colonne de droite
border-left:1px solid black; et border-right:1px solid black; ==> pour des raisons esthétiques nous n'entourons plus complètement d'une bordure la colonne de gauche mais nous la délimitons uniquement d'un trait sur sa gauche et sur sa droite
font-size:12px; ==> la hauteur du texte que nous y placerons dera de 12px
font-family:arial; ==> la police de caractères choisie sera arial
Pour agencer le texte que nous y inclurons nous devons définir des règles de paragraphe. Le sélecteur de paragraphe étant automatiquement défini par "p", il suffit de préciser que ce p est uniquement celui de #colonnegauche, ce qui s'écrit tout simplement :
#colonne gauche p{}
Nous établissons deux règles importantes pour ce paragraphe p de la colonne de gauche #colonnegauche :
text-align:justify; ==> le texte en sera justifié, cad aligné des deux côtés
padding:6px; ==>on laissera une marge intérieure de 6px partout autour du texte pour l'aérer, cad éviter qu'il colle aux limites de la colonne, ce qui serait disgracieux.

Pour la colonne de droite #colonnedroite:
width:73%; ==> on réduit sa largeur de 6% puisque l'on a augmenté précédemment de 6% la largeur de la colonne de gauche
On efface la bordure rouge - border:1px dashed red; - mise en place uniquement pour aider la construction de la page
On lui attribue un paragraphe "p" de façon exactement identique à ce que l'on a fait pour la colonne gauche, et dont le sélecteur s'écrit donc :
#colonnedroite p{ }
On lui donne une marge intérieure ( padding:10px;) de 10px partout autour du texte qui y prendra place. Les caractères du texte y seront de 14px ( font-size:14px )

Dans l'en-tête nous n'avons pas de titre réel. Etablissons un titre - tout simplement entre deux balises h1 - placé immédiatement sous body div id=entete, soit
< h1 >Titre de notre division en-tête< /h1 >
On peut placer un sous-titre pour l'entête entre deux balises p
Enfin on peut écrire ce que l'on veut dans les colonnes à l'intérieur des balises p

Une fois entrgistré ce code source sous le nom saintjeandeluz-7.html on obtient:saintjeandeluz-7.html


Notre division de page étant achevée, nous allons maintenant aborder l'esthéthique et la décoration, en allant sur la page suivante : stjeandeluz-8.html
On observera dans le code souce de stjeandeluz-8.html tout ce qui a trait à #colonnegauche ainsi que dans le corps body à div id=colone gauche - voir les explications dans la colonne gauche de cette page stjeandeluz-8.html -. Pour ceux qui auraient encore quelques pb, nous étudierons les choses plus en détail dans la suite de ceci...
à suivre