CSS 1 : INTEGRATION D'UN STYLE EN LANGAGE CSS DANS UNE PAGE html

1. Qu'est-ce que le langage CSS ?
Avant de nous lancer dans la découverte du langage CSS. Le CSS est l'acronyme de Cascading Style Sheets ce qui signifie "feuille de style en cascade". C'est un langage informatique qui permet de mettre en forme des pages web (écrite en html ou en xml).
Pourquoi parle-t-on de CASCADE ?
Nous avons vu dans le langage html que les pages web étaient une succession de balises définissant des titres, des zones. En tant que designer web, le développeur a probablement une idée du rendu qu'il attend au terme de son projet.
Le style s'applique alors de façon descente (comme ci-contre) : les balises intérieures héritent mécaniquement du style des balises qui les contiennent.
2. Créer un fichier .css
L'Environnement de Développement (IDE)
Comme n'importe quel langage de programmation, pour faire du html, il suffit uniquement d'un éditeur de texte, présent sur n'importe quel ordinateur. Bien que très utile pour dépanner, il est très difficile de construire un projet là-dessus. Mieux vaut se tourner vers un Environnement de Développement (IDE) offrant au minimum une coloration, au mieux compléter le programme au fur et à mesure de son écriture.

Je vous propose deux logiciels gratuits :
  • Notepad ++ offre une coloration pour le html, le CSS et le javascript, très utiles pour la relecture.
  • Visual Studio Code, que j'utilise quotidiennement pour tous langages (Python, Latex, html, CSS, javascript, Django, etc.).
Il existe aussi des éditeurs en ligne, qui permettent une facilité de prise en main des langages html, CSS et javascript simultanément : Quelque soit votre choix, le html s'exécute toujours sur un navigateur.

Un NAVIGATEUR est un logiciel qui permet de parcourir un site web et plus généralement Internet : Google Chrome, Safari, Firefox, Ecosia, Bing, etc.
Sachez que bien qu'ils soient tous des navigateurs, en fonction de votre code, il peut y avoir quelques différences dans l'exécution d'une page html sur le navigateur choisi. N'en soyez pas étonnés !

Mais pourquoi exécuter un html ?

Le fichier CSS seul ne permet pas de faire apparaître quoi que se soit sur un navigateur. Un fichier CSS est TOUJOURS l'heureux compagnon d'un fichier html (qui serai bien triste sans lui) !!
Première page en css
Afin d'être certain que tout le monde puisse suivre, nous allons générer notre première page .css à l'aide d'un simple éditeur de texte.
  1. Se positionner sur le bureau de votre ordinateur, faire un clique-droit et cliquer sur Nouveau > Document texte ;
  2. Nommer ce nouveau fichier style1.css (en acceptant le changement d'extension du fichier) ;
  3. Ouvrir le fichier avec un éditeur de texte et écrire les lignes suivantes, avant d'enregistrer :
                                
    p{
        background-color : blue ;
        color : white ;
    }
                                
                            
Vous venez de créer votre premier fichier .css, qui indique que TOUTES les zones comprises entre des balises <p> </p> auront un fond bleu, et que le texte sera écrit en blanc.
Pour en voir l'effet, il est nécessaire de lier ce présent fichier à un fichier .html.
3. Créer un lien entre le fichier .hml et le fichier .css
Le lien entre le style et le fichier .html va se faire grâce à une balise spécifique :
                        
<link rel="stylesheet" href="#">
                        
                    
  1. Créer un fichier .html contenant du texte entre des balises <p> </p> :
                                    
    <!DOCTYPE html>
    <html>
        <head>
            <title>Page 1</title>
            <meta charset="utf-8">
        </head>
        <body>
            <p>Hello World !</p>
            Good by World !
        </body>
    </html>
                                    
                                
  2. Positionner les deux fichiers .html et style1.css (créer précédemment) dans le même dossier (à terme, vous apprendrez à les séparer dans des dossiers différents, pour plus de clarté !) ;
  3. Ajouter entre les balises <head></head>, la balise de lien :
  4.                             
    <link rel="stylesheet" href="style1.css">
                                
                            
  5. Exécuter le fichier .html dans votre navigateur.

Avant application du style :

Après application du style :

Remarquons que seul le texte entre les balises <p> </p> a subi le style.
4. Intégrer du style ponctuellement dans le html
Il est parfois souhaitable d'avoir la modification du style "à portée de main". Pour cela, il est possible d'intégrer ponctuellement du style directement à l'intérieur d'une balise. C'est notamment ce qu'il se passe lors de la mise en place d'images, qui ne sont par nature pas toujours de mêmes dimensions à l'origine.

Pour cela, toutes les balises du langage html accepte un paramètre de style="", tel que dans l'exemple suivant :
                        
<!DOCTYPE html>
    <html>
        <head>
            <title>Page 1</title>
            <meta charset="utf-8">
        </head>
        <body>
            <p style="background-color:blue; color:white;">Hello World !</p>
            Good by World !
        </body>
    </html>
                        
                    
Bien que ce code vous présentera exactement le même rendu, il est préférable d'appliquer un style à chaque balise :
  • Par souci de cohérence de style ;
  • Par souci de travail de programmation.

Une dernière solution d'intégration du style est possible, en écrivant l'ensemble de ce que contient le fichier .css à l'intérieur d'une balise <style></style>, positionnée dans le fichier .html :
                    
<!DOCTYPE html>
<html>
    <style>
    p{
        background-color : blue ;
        color : white ;
    }
    </style>                 
    <head>
        <title>Page 1</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p style="background-color:blue; color:white;">Hello World !</p>
        Good by World !
    </body>
</html>
                    
                
Cette solution alourdie le fichier .html, qui lors de sa génération va pousser le navigateur à lire tout le css.

Préférez la solution avec un fichier séparé, beaucoup plus propre !!
Sachez que vous pouvez lier autant de fichier CSS différents que vous voulez. Mais attention à ce qu'ils ne se marchent pas sur les pieds les unes, les autres !!