Jump to content
×
×
  • Create New...

[ CSS ] Ma première feuille de style


kurujai

Recommended Posts

Niveau de difficulté : facile :P

 

Grand 1 : Présentation

 

Bonjour à vous, j'espère que vous avez aimé mes tutoriels HTML et que vous les avez bien assimilés car aujourd'hui ça va travailler dur !

 

"M'sieu ça sert à quoi le C et S ?"

Le CSS sert déjà à simplifier le code html car on va le voir, toute les mises en forme qu'on à vu en html, on va pouvoir les mettre dans la feuille de style ( le css ). On verra aussi qu'on peut ajouter de la couleur simplement ainsi qu'un fond en image.

 

Commençons par créer une feuille de style, toujours avec les même outils outils que le html c'est à dire notepad, bloc note ou autre, ouvrez une nouvelle page. Ensuite, enregistrez la, mais attention une fois encore, il faut rajouter une extension derrière qui sera .css ( Pour ma part j'enregistre toujours mon css en style.css).

 

Voilà, votre feuille de style est crée :)

 

Bon, maintenant on va essayer de créer ceci avec une page html et css.

Pour le html, vous savez faire, vous avez juste à ajouter dans les balises head ce code :

Cela permet de dire à la page html qu'il faut qu'il utilise la feuille de style.

 

100625013355177395.png

 

Grand 2 : Ajouter une couleur

 

Pour mettre un attribut à un texte ou autre il suffit de le qualifier, je m'explique :

Si vous voulez changer quelque chose pour un texte, vous mettrez ceci :

p{

}

Tout ce que vous voudrez ajouter à votre texte sera à mettre entre les {}

Commençons par mettre le titre en rouge pour cela on va utiliser color.

h1{

color : red;

}

 

Je vous laisse faire le reste pour mettre les exercices ainsi que le texte en bleu et blanc ( pour les non anglichien c'est blue et white )

 

":o mais que ce passe t-il, mon texte à disparu :o"

Pas de panique Monique, il suffit de mettre le fond en noir ;)

Pour cela c'est un peu différent, déjà on mettre ça dans le body

Puis, on utilisera le code background-color

Ce qui nous donnera :

body{

background-color : black;

}

 

Et tadaaaaaaaaa revoici notre texte :)

"Trop fort ce prof"

 

Grand 3 : Aligner le texte

 

Bon, maintenant la couleur est mise on va pouvoir s'amuser en mettant le texte à gauche, à droite et au centre.

Pour cela on utilisera text-align pour gauche ce sera left, a droite right et au centre center.

Je fais juste l'exemple pour le titre :

h1{

color : red;

text-align : center;

}

 

Le titre est maintenant centré en rouge :P

A vous de jouer pour les exercices ;)

 

Grand 4 : Formatages du texte

 

Les différents formatages du texte :

 

text-decoration : underline;

font-weight : bold;

font-style : italic;

font-size : 12px;

color : red;

font-family : Arial;

text-align : center;

 

voici tout ce que j'ai utilisé pour faire la page que vous avez vu :

 

body{

background-color : black;

}

 

 

h1{

color : red;

font-family : Arial;

font-size : 50px;

text-align : center;

font-weight : bold;

text-decoration : underline;

}

 

 

h2{

color : blue;

font-size : 30px;

text-align : right;

font-weight : bold;

}

 

 

p{

color : white;

font-family : Comic Sans MS;

Font-size : 12px;

margin-left : 50px;

font-style : italic;

}

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Flux d'Activité

    1. 29

      Rodnia.net | PVM | International | The Great Conqueror |

    2. 0

      [Funding/Incubator Program] W Combinator

    3. 25

      File Bvural41 (PAYANT) lvl 1-120 - Multi-Language

    4. 25

      File Bvural41 (PAYANT) lvl 1-120 - Multi-Language

    5. 9

      Canal général

    6. 9

      Canal général

    7. 9

      Canal général

    8. 9

      Canal général

    9. 9

      Canal général

  • Recently Browsing

    No registered users viewing this page.

Important Information

Terms of Use / Privacy Policy / Guidelines / We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.