Ou déclarer le CSS sur votre site web ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

CSS Ou déclarer le CSS sur votre site web ?

Message par Ajesto le Dim 22 Jan - 20:03

Sur un site web lambda, vous pouvez insérer du CSS à 3 endroits différents :
- Dans un fichier .css (Méthode conseillée)
- Dans la l'entête de votre page
- Dans chacun des éléments HTML (Méthode déconseillée)
Déclarer le style dans un fichier .css (Conseillé)

Pour cela, il suffit de créer un fichier style.css (Vous pouvez le nommer autrement, il faut juste qu'il soit en .css)
Dedans vous pourrez y mettre tout votre style, comme par exemple :

Code:
body {
  background-color: blue;
  color: white;
}

Ensuite, vous allez créer une page .html ou .php, ici on la nommera index.html
Voici la page avant que le fichier CSS soit déclaré :

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
    </body>
</html>

Et ensuite on va le déclarer grâce à ce morceau de code dans la balise head:

Code:
<link rel="stylesheet" href="chemin/vers/style.css" />

Ce qui donnera sur votre fichier :

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Premiers tests du CSS</title>
        <link rel="stylesheet" href="style.css" /> <!-- J'ai déclaré le style -->
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
    </body>
</html>

Déclarer le style dans l'entête d'une page

Nous allons créer une page nommé index.html.
Voici la page avant que le fichier CSS soit déclaré dans l'entête :

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
    </body>
</html>

Puis nous allons utiliser le même petit CSS que tout à l'heure, c'est à dire

Code:
body {
  background-color: blue;
  color: white;
}

Pour pouvoir déclarer ce CSS dans notre page, il suffit de créer une balise style dans l'entête de la page :

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Premiers tests du CSS</title>
        <style>
        /* On met du CSS ici */
        </style>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
    </body>
</html>

Voici donc lorsque je met le code CSS énoncé tout à l'heure

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Premiers tests du CSS</title>
        <style>
body {
  background-color: blue;
  color: white;
}
        </style>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
    </body>
</html>

Déclarer le style dans un élément HTML (très déconseillé)


Nous allons (encore) créer une page nommée index.html.

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
    </body>
</html>

Lorsque je vous ai dit le déclarer par élément, dans mon exemple il n'en existe que deux :

Code:
<h1>Mon super site</h1>

ainsi que

Code:
<p>Bonjour et bienvenue sur mon site !</p>

Donc la on va simplement leurs donner un attribut. Comme si on donnait une classe, mais la c'est du style.
Donc par exemple, sur notre titre (h1)

Code:
<h1 style="CSS ICI">Mon super site</h1>

Il suffit juste de rentrer le CSS en le mettant sur une seule ligne, donc par exemple :

Code:
<h1 style="font-size: 36px; color: blue; margin-left: 10px;">Mon super site</h1>

Mon titre seras donc gros de 36 pixels, de couleurs bleu avec une marge de 10 pixels à gauche.

Quelle solution choisir ?

En cours de rédaction.
Je pense que le choix est simple : Enregistrer dans un fichier .css
Si on décide de changer de design, les changements de feront sur toutes les pages instantanément.
De plus on a a rentrer le code CSS qu'une seule fois.

Tandis que si on prend le CSS dans l'en-tête, il faudra re-modifier chaque page lors d'un nouveau design.
On doit en plus rentrer le code CSS 1 fois par page.

Si on décide de faire un nouveau design lorsque que l'on a utilisé la méthode 3, c'est long.
On doit rentrer le code CSS autant de fois qu'il y a d'élément sur la page. Et sa peu aller vite.

Code:
<div> <!-- 1er élement -->
  <p>
    Lorem ipsum <a href="">dolor sit amet</a>. <!-- Lien = 2eme élément -->
  </p> <!-- 3eme élement -->

Vous voyez que les éléments peuvent monter en nombre très vite.



avatar
Ajesto
Fondateur
Fondateur

Messages : 115 Masculin Points : 3

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum