Alors que nous ne pouvons pas couvrir tout que CSS a à offrir dans ce tutoriel, ce que nous pouvons faire est de passer en revue les informations dont vous avez besoin pour créer une page Web unique et esthétique avec des styles CSS.

Heureusement, même après ce guide, il existe de nombreuses ressources sur le Web pour vous aider à perfectionner vos compétences CSS.

Avant de continuer, voici quelques clés points à retenir sur CSS:

  • CSS est vraiment un concept simple – c'est un ensemble d'instructions qui informe un navigateur Web sur la façon d'afficher une page Web
  • Les modifications apportées à la page Web peuvent inclure le style du texte, la conception de la mise en page, des animations / transitions et bien plus encore.
  • D'autre part, HTML est le langage sœur du CSS. HTML informe le navigateur Web de ce qui se trouve sur la page Web.

Le rappel de ces points de nos pages précédentes vous aidera à mieux comprendre ce que nous faisons à partir de maintenant.

Utilisation des pistes CSS pour un code plus propre et un chargement de page plus rapide

CSS est un outil puissant, d'autant plus qu'avec CSS, vous pouvez travailler avec moins de balises tout en obtenant le résultat souhaité. Il n'y a que six types de balises HTML sur lesquelles vous devez vous concentrer.

<h> est une balise de titre. Il existe une gamme de balises d'en-tête qui vont de

à

. Comme vous pouvez l'imaginer, le

la balise est la balise la plus significative et, au fur et à mesure que vous descendez

vous vous aventurez dans le moins significatif.

Les navigateurs Web ont chacun une valeur par défaut style de balise. Lorsque vous placez du texte dans le style par défaut, la page Web présente le texte sous sa forme par défaut. Bien que les styles par défaut puissent être pratiques, ils nuisent certainement à la qualité de la page Web car ils ne sont pas exactement idéaux en termes d'apparence. Heureusement, c'est pourquoi nous avons CSS et pourquoi vous apprenez à l'utiliser. Vous pouvez remplacer la valeur par défaut avec CSS.

<p> est la balise de paragraphe. Cette balise modifie le texte de la page en le convertissant en forme de paragraphe. Le texte apparaît dans un bloc soigné sur la page. Semblable à la balise ci-dessus, il est assez facile à utiliser.

<ul> et <ol> sont des balises de liste utilisées pour créer des menus.

    signifie «balise de liste non ordonnée» et crée une liste à puces ou une liste avec d'autres images ou icônes. Il n'y a pas d'ordre dans la liste avec cette balise, donc si vous souhaitez classer votre liste avec des points spécifiques, utilisez le

      marque.

        , comme vous pouvez l'imaginer, signifie «liste ordonnée». Avec la liste ordonnée, des nombres au lieu de puces ou d'images apparaissent.

        <div> est ce qui crée des conteneurs pour les sections de la page Web. Comme vous vous en souvenez peut-être, nous avons utilisé le

        tag sur les parties précédentes du didacticiel.

        <un href> est le lien ou la balise «hyperlien». C'est peut-être l'une des balises les plus importantes à retenir. Il transforme le texte en «hyper», ce qui nous permet ensuite de cliquer dessus. En cliquant sur le texte, une commande est envoyée pour activer ou charger une autre page.

        <img> est la balise «image». Avec cette balise, vous pouvez ajouter des images à votre page Web. Contrairement au contenu, vous ne pouvez pas simplement copier et coller les images sur la page Web et vous attendre à ce qu'elles apparaissent. Ici, vous devez en fait ajouter la balise pour que l'image apparaisse là où elle devrait sur le navigateur lorsqu'un utilisateur charge la page.

        Vous pouvez maintenant dire que vous maîtrisez les balises HTML clés que nous utiliserons tout au long du didacticiel et qui vous seront d'une grande utilité lorsque vous vous aventurez dans l'utilisation de CSS pour vos propres pages. De plus, vous n'avez pas besoin de vous concentrer sur <br> et <Police de caractère> balises.

        Commencez à créer votre page

        Pour continuer avec le didacticiel, créez un nouveau fichier texte, collez le code ci-dessous et enregistrez-le sous practice.html:

        
        
        
        
        
        
        
        
        
        
        
        
        

        Après avoir créé la page, pour vous faciliter la tâche, créez un dossier et appelez-le «myCSSwebsite». Ensuite, ajoutez-y la page HTML. Maintenant, retournez dans le dossier et ouvrez un nouveau document texte et nommez-le «style.css».

        Enfin, ouvrez le nouveau document texte et collez le code CSS du modèle suivant et cliquez sur Enregistrer:

        
        
        
        
        
        
        
        / * Sélecteurs génériques * /
        
        corps {
        famille de polices: Georgia, "Times New Roman", Times, serif;
        taille de la police: 14px;
        couleur: # 333333;
        couleur de fond: # F9F9F9;
        }
        
        p {
        largeur: 80%;
        }
        
        li {
        type de style de liste: aucun;
        hauteur de ligne: 150%;
        image-style-liste: url (../ images / arrowSmall.gif);
        }
        
        h1 {
        famille de polices: Georgia, "Times New Roman", Times, serif;
        taille de la police: 18px;
        poids de la police: gras;
        couleur: # 000000;
        }
        
        h2 {
        famille de polices: Georgia, "Times New Roman", Times, serif;
        taille de la police: 16px;
        poids de la police: gras;
        couleur: # 000000;
        bordure inférieure: 1px solide # C6EC8C;
        }
        
        / **************** Pseudo classes **************** /
        
        un lien {
        couleur: # 00CC00;
        texte-décoration: souligné;
        poids de la police: gras;
        }
        
        li: lien {
        couleur: # 00CC00;
        texte-décoration: aucun;
        poids de la police: gras;
        }
        
        a: visité {
        couleur: # 00CC00;
        texte-décoration: souligné;
        poids de la police: gras;
        }
        
        li a: visité {
        couleur: # 00CC00;
        texte-décoration: aucun;
        poids de la police: gras;
        }
        
        a: hover {
        couleur: rgb (0, 96, 255);
        rembourrage en bas: 5px;
        poids de la police: gras;
        texte-décoration: souligné;
        }
        
        li a: hover {
        bloc de visualisation;
        couleur: rgb (0, 96, 255);
        rembourrage en bas: 5px;
        poids de la police: gras;
        border-bottom-width: 1px;
        border-bottom-style: solide;
        border-bottom-color: # C6EC8C;
        }
        
        a: active {
        couleur: rgb (255, 0, 102);
        poids de la police: gras;
        }
        
        / ************************* ID *********************** ** /
        
        #la navigation {
        position: absolue;
        largeur: 210 px;
        hauteur: 600px;
        marge: 0;
        margin-top: 50px;
        bordure droite: 1px solide # C6EC8C;
        poids de la police: normal;
        }
        
        #centerDoc {
        position: absolue;
        rembourrage: 0 0 20px 0; / * en haut à droite en bas à gauche * /
        margin-top: 50px;
        marge gauche: 235px;
        }
        
        

        Ne soyez pas intimidé. Ce n'est vraiment pas aussi compliqué qu'il n'y paraît. Les détails seront bientôt expliqués.

        Une fois cette étape terminée, la prochaine étape consiste à ajouter du code dans la page HTML.

        Où tu vois balises, insérez le code suivant:

        
        
        
        
        
        
        

        Le titre principal

        Voici un paragraphe! Nous allons faire des choses amusantes avec ça aujourd'hui. Il est maintenant temps pour un lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

        Bien. Maintenant, entre insérer:

        
        Premier tutoriel CSS
        
        
        
        

        C'est parti – maintenant nous pouvons commencer à styliser la page Web. Nous avons beaucoup fait jusqu'à présent – il suffit de regarder votre page HTML.

        Nous allons continuer.

        Continuer à la partie 2