BINARYFROG.FR
Accueil > Tutoriels > Développement > Apprendre le CSS

Apprendre le CSS

Vous avez mis en pratique le HTML et comme vous l'avez constatez nous n'avons pas fait de de mise en forme. Il faut savoir qu'il est tout à fait envisageable de mettre du code pour "styliser" son contenu depuis le HTML et même d'insérer directement du CSS à l'intérieur. Cela n'étant pas recommandé je vous propose d'attacher une feuille de style à votre première page web.

Créer une feuille de style et l'ajouter à son HTML:

Pour cela nous allons insérer une balise dans le "< head >" :


     <link rel="stylesheet" type="text/css" href="css/style.css" />

Une fois cette balise insérée nous allons pouvoir créer notre premier fichier css dans le dossier "css" et nous allons le nommer "style.css" comme indiqué dans la balise "< link >" récemment insérée.

Le code sera le suivant :


    body {
        margin: 0;
        padding: 0px;
    }

Ce code a pour intérêt de gérer les bordures intérieures "padding" et les bordures extérieures "margin" de la balise "< body >" à la valeur 0. Ainsi, si vous comprenez le principe vous retrouverez toujours dans un premier temps le sélecteur, dans notre cas "body", puis les propriétés, dans notre cas "margin" et "padding" et enfin la valeur associée, dans notre cas "0". Chaque instruction doit se terminer par un ";" sauf la dernière qui peut être omise.

Principe d'écriture du css:

Nous allons donc maintenant gérer le style de notre en tête :


    header {
        margin: auto;
        paddng: 10px;
        width: 800px;
        background-color: #eeeeee;
        border: 2px solid black;
    }

Ici quelques particularités apparaissent, la notion de "auto" dans la propriété "margin" et la propriété "border" qui comprend 3 valeurs sur la même ligne.

margin:auto

Lorsque vous appliquez une marge via la propriété margin est sous entendu en réalité 4 bordures (left, right, bottom et top) et la valeur associée s'applique donc aux 4 propriétés. Ici j'ai inscrit une taille horizontale en px via la propriété "width", en appliquant le paramètre "auto" à margin, le navigateur interprête donc de laisser une marge identique à gauche et à droite, c'est à dire sur le "left" et le "right" et ceci en fonction de la taille de la balise "body" qui dans notre exemple prend la taille de l'écran.

border: 2px solid black

Chaque valeur de propriété peut prendre un ou plusieurs paramètres, ici nous avons indiqué une taille en px, un type "solid" et une couleur "black"

Remarques sur les valeurs

Il exste plusieurs unités pour les tailles ici j'ai utilisé des "px" mais il aussi possible d'utiliser :

  • cm: Centimètre
  • mm: Millimètre
  • Q: Quart de millimètre
  • in: Pouces (inches)
  • pc: Picas
  • pt: Points
Et la liste n'est pas exhaustive... il y en a d'autres.

Concernant les couleurs, j'ai indiqué une couleur en "black" qu'on appelle (couleurs nommées) mais il est aussi possible d'utiliser :

  • hexadecimal: Exemple #xxxxxx
  • décomposées: RGB(xxx,xxx,xxx)

Il ne reste plus qu'à gérer le positionnement de nos autres balises sur le même principe :


    h1 {
        text-align: center;
    }

    nav {
        width: 800px;
        margin: auto;
        display: flex;
    }

    main {
        width: 800px;
        margin: auto;
    }

    footer {
        width: 800px;
        margin: auto;
        text-align: center;
    }

Votre page doit désormais ressembler à cela :

Cibler un élément

Tout ce que nous venons d'inscrire en css s'applique à l'ensemble des balises. Cependant, il est parfois nécessaire de distinguer certaines balises ou de cibler un style dans un contexte particulier. Cela va être le cas pour notre vavigation.

Par hiérarchie

Dans notre code HTML nous avons la balise "li" qui est incluse dans la balise "ul", elle même incluse dans la balise "nav". Nous pourrions faire comme nous l'avons fait précédemment en CSS mais cela aurait pour effet de modifier toutes les autres listes. Ici nous souhaitons impacter uniquement le menu de navigation.

Ainsi pour cilber un élélement on peut respecter sa hiérarchie, dans le cas de "li" cela donne :


nav ul li {
    font-weight: bold;
    float: left;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid black;
    list-style: none;
    margin: 5px;
    margin-top: 10px;
    text-transform: uppercase;
}

Et dans le cas de "ul" cela donne :


nav ul {
    margin: auto;
}

Par identifiant

Il est également possible de le faire par identifiant, c'est à dire en spécifiant un attribut avec une valeur unique :


    <nav>
        <ul id="monmenu">
            <li>Accueil</li>
            <li>A propos</li>
            <li>Contact</li>
        </ul>
    </nav>

Avec le code css suivant :



#monmenu {
    margin: auto;
}

/* Peut également s'écrire nav ul#monmenu li */
nav #monmenu li {
    font-weight: bold;
    float: left;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid black;
    list-style: none;
    margin: 5px;
    margin-top: 10px;
    text-transform: uppercase;
}
J'ai ajouté quelques propriétés dans cet exemple qui à mon sens s'expliquent d'elles même (text-decoration, list-style, font-weight), à l'exception de "float" dont je vous propose de parler dans une prochaine partie du tutoriel.

Par class

Contrairement aux "id" l'attribut class n'est pas unique et vous pouvez l'appliquer à plusieurs balises". Dans notre exemple nous allons l'utiliser pour mettre en évidence le "li" actif :


    <nav>
        <ul id="monmenu">
            <li class="actif">Accueil</li>
            <li>A propos</li>
            <li>Contact</li>
        </ul>
    </nav>

Avec ce code css :



nav #monmenu li.actif {
    background-color: darkslategrey;
    color: white;
}

Il existe d'autres possibilités pour cilber le contenu que j'écarte volontairement, celles présentées seront suffisantes pour comprendre les principes généraux.

Vous devriez avoir quelque chose ressemblant à ceci désormais :

Mise en pratique :

Avec un peu d'imagination et de mise en pratique du premier tutoriel sur le HTML et de celui-ci, vous devriez être en mesure de réaliser vos premières pages et de comprendre le code HTML et CSS suivant :

Le code CSS:



body {
    margin: 0;
    padding: 0px;
    background-color: #eeeeee;
    font-family: Arial;
}

header {
    margin: auto;
    padding: 10px;
    width: 100%;
    background-color: #e6e6e6;
    margin-bottom: 10px;
}

h1 {
    font-size: 50px;
    text-align: center;
}

nav {
    width: 100%;
    margin: auto;
    display: flex;
}

main {
    width: 60%;
    margin: auto;
    border: 5px solid #E6E6E6;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

main p img {
    width: 100%;
}

main p  {
    text-align: justify;
}

footer {
    width: 100%;
    margin: auto;
    text-align: center;
    background-color: #616161;
    height: 100px;
    padding: 20px;
    color: white;
}

footer a {
    color: white;
}

#monmenu {
    margin: auto;
}

nav #monmenu li {
    font-weight: bold;
    float: left;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid #E6E6E6;
    list-style: none;
    margin: 5px;
    margin-top: 10px;
    text-transform: uppercase;
}

nav #monmenu li.actif {
    background-color: darkslategrey;
    color: white;
}

Le code HTML :

Télécharger l'image : ici et recadrer l'image : avec cet outil si besoin


<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Mon projet</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>

    <header>
        <h1>Mon projet</h1>
    </header>

    <nav>
        <ul id="monmenu">
            <li class="actif">Accueil</li>
            <li>A propos</li>
            <li>Contact</li>
        </ul>
    </nav>

    <main>
        
    <p><img src="images/test.png" alt="Mon article" /></p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
    at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
    Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
    Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
    Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
    aliquet sit amet elit sit amet, ornare rhoncus lacus.
    Praesent porttitor mattis sem vitae mollis.
    Ut cursus sem ante, id tristique quam sodales eget.
    Fusce et dignissim metus, condimentum sodales velit.
    Quisque metus arcu, blandit nec elit sit amet, vestibulum pharetra eros.
    Etiam dignissim mauris non elementum tristique.
    Fusce facilisis ultricies ultrices.</p>
        
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
    at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
    Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
    Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
    Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
    aliquet sit amet elit sit amet, ornare rhoncus lacus.
    Praesent porttitor mattis sem vitae mollis.
    Ut cursus sem ante, id tristique quam sodales eget.
    Fusce et dignissim metus, condimentum sodales velit.
    Quisque metus arcu, blandit nec elit sit amet, vestibulum pharetra eros.
    Etiam dignissim mauris non elementum tristique.
    Fusce facilisis ultricies ultrices.</p>

    </main>

    <footer> <a href="#">Mon lien</a> 2024  </footer>

    </body>
</html>

Résultat :

Le responsive :

Avec les nombreux périphériques qui accédent à internet, il est désormais nécessaire d'avoir un site qui s'adapte aux différentes résolutions.
Pour cela on utilise les "Media queries".

Pour les utiliser nous allons entourer notre feuille de style précédente de cette façon :


@media screen and (min-width: 480px) {

    /* ici le code de notre feuille de style */

}

Désormais, nous allons définir un style spécifique aux périphériques dont la résolution en largeur est inférieure à 480px, pour cela nous allons ajouter un nouveau style entouré par cette média querie avec un "max-width" au lieu d'un "min width" utilisé précédemment :


@media screen and (max-width: 480px) {

    /* ici le nouveau code de notre feuille de style pour les appareils mobiles */

}

Important, ajoutez également cette balise à votre HTML entre les balises "< head >" et "< / head >" :


<meta name="viewport" content="width=device-width, initial-scale=1.0">

En utilisant l'inspecteur vous serez en mesure de tester votre code.
Pour son usage : Consultez mon article sur le fonctionnement d'un site internet

Voici la feuille de style responsive modifiée :


body {
    margin: 0;
    padding: 0px;
    background-color: #eeeeee;
    font-family: Arial;
}

header {
    margin: auto;
    padding: 10px;
    background-color: #e6e6e6;
    margin-bottom: 10px;
}

h1 {
    font-size: 50px;
    text-align: center;
}

nav {
    width: 100%;
    margin: auto;
    display: flex;
}

main {
    margin: auto;
    border: 5px solid #E6E6E6;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

main p img {
    width: 100%;
}

main p  {
    text-align: justify;
}

footer {
    width: 100%;
    margin: auto;
    text-align: center;
    background-color: #616161;
    height: 100px;
    padding: 20px;
    color: white;
}

footer a {
    color: white;
}

#monmenu {
    margin: auto;
    list-style-type: none;
    padding: 0;
}

nav #monmenu li {
    font-weight: bold;
    float: left;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid #E6E6E6;
    list-style: none;
    margin: 5px;
    margin-top: 10px;
    text-transform: uppercase;
}

nav #monmenu li.actif {
  background-color: darkslategrey;
  color: white;
}

@media screen and (max-width: 480px) {

    main {
        width: 90%;
    }

    nav #monmenu li {
        width: 90%;
    }

}   

@media screen and (min-width: 480px) {
    
    header {
        width: 100%;
    }

    main {
        width: 60%;
    }
    
}

Le W3C

Le W3C, ou World Wide Web Consortium, est une organisation internationale qui développe des normes et des directives pour le World Wide Web. Fondé en 1994 par Tim Berners-Lee, l'inventeur du web, le W3C vise à assurer la croissance et la compatibilité à long terme du web.

Vous pourrez tester votre code ici (option url ou chargement de fichier) : W3C CSS validator

Félicitations ! Vous savez désormais créer une page HTML et y associer une feuille de style pour ajuster sa mise en forme aux PCs et aux périphériques mobiles.