Aller au contenu

Initiation au css

KelT

Par KelT,
dans Tutoriels

Messages recommandés

KelT

KelT 1

Membre, KelT Informatique, 34ans Posté(e)
KelT
KelT Membre 1 855 messages
34ans‚ KelT Informatique,
Posté(e)

Salut

Je fais un petit tuto sur le css pour ceux qui ont suivi le tuto html. Allez courage c'est le plus intéressant :blush:

Alors le principal à retenir : le html sert pour le contenu de votre site et le css la forme. C'est à dire qu'avec le html je vais mettre

<html>
<body>
<p> Salut, je met du texte </p>
</body>
</html>

Et on va voir sur ce tuto comment mettre en forme ce texte (en couleur, mettre une image de fond etc..)

Un fichier css (avec bloque note ou notepad++) se présente sous la forme suivante :

labalise
{
propriété: lavaleur;
propriété2: autrevaleur;
}

uneautrebalise
{
propriété: valeur;
}

Avec labalise et uneautrebalise les balises auxquelles on veut modifier la forme donc appliquer du css.

Pour commencer vous allez créer un nouveau fichier avec bloque note puis l'enregistrer avec l'extension .css au même endroit où se trouve votre fichier html.

Dans votre html vous tapez dans <head> cette balise : 

 <link rel="stylesheet" media="screen" type="text/css" title="titreducss" href="fichier.css" />

Avec fichier.css le nom de votre fichier css que vous avez enregistré. le titre n'a pas d'importance majeur donc mettez ce que vous voulez.

(on remarque que la balise link est une balise seul sous la forme <balise />)

Alors pour appliquer du css à une balise on met simplement le nom de la balise puis on encadre les propriétés avec { }. On met toujours : après une propriété et; après la valeur.

Par exemple ici je veux mettre tous mes paragraphes en rouge, je vais donc mettre

p
{
color: red;
}

Biensur, tout est en anglais >,< !

Vous allez me dire que vous avez plein de paragraphes et que vous voulez appliquer du css qu'à un seul paragraphe.

Donc là il faut différencier le paragraphe que vous allez mettre en couleur, pour cela dans votre html on va insérer l'attribut class

<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="titreducss" href="fichier.css" />
</head>
<body>
<p> salut je suis un paragraphe </p>
<p class="toto"> hé moi aussi </p>
</body>
</html>

Biensur votre page html sera bien plus complète. Pour appliquer du css à notre attribut class nommé toto, on met un point devant.

On met toujours un point derrière un attribut et "rien" derrière une balise

.toto
{
color: yellow;
}

On aura bien 'salut je suis un paragraphe' sans css donc en noir par défaut et 'hé moi aussi' en jaune.

Rien qu'avec ça on peut s'amuser il suffit de connaître quelques autres balises indispensables, la liste est longue donc on verra plus tard ou si vous êtes impatient je ferais bientôt un mémo que j'ajouterai ici.

C'est bien beau tout ça mais le blanc derrière c'est un peu fade. On peut mettre une autre couleur en fond avec la propriété background-color qu'on applique à la balise body, mais vous pouvez très bien mettre du fond sur un paragraphe mais c'est moins courant :coeur:

body
{
background-color: green;
}

Super on a du vert en fond de page ! Oui je sais c'est un peu moche ! Donc pour insérer une image en fond on utilise background-image, logique non ?

Mettez votre image au même endroit que votre html et css puis vous mettez comme valeur url("votreimage.jpg") Il faut mettre les guillemets.

Ecrivez la bonne extension !

body
{
background-image: url("bobmarley.jpg")
}

Il y a d'autres valeurs qu'on peut appliquer à background qui seront dans le mémo :coeur:

Pour les couleurs (texte ou fond) on utilise généralement et c'est bien pratique le RGB (red green blue)

Comment ça marche ?

Tout d'abord je vous incite à installer la boite à couleur.

Dans l'onglet visuel vous choisissez votre couleur puis revenez au premier onglet (RGB ou RVB, green/vert) puis vous notez dans votre code la valeur de chaque couleur dans l'ordre : rouge, vert, bleu.

On a choisi du bleu ciel donc on a un truc du genre 190 190 255. (255 est le maximum)

On sépare par des virgules.

p
{
color: rgb(190,190,255);
}

Voila :snif:

Donc je vais faire un mémo pour vous montrez les principales propriétés css et pour que vous y retournez jeter un oeil si vous avez un trou de mémoire :bo:

Lien à poster
Partager sur d’autres sites
Annonces
Maintenant
Laguardia

Laguardia 5

Membre, Inside, Posté(e)
Laguardia
Laguardia Membre 6 639 messages
Inside,
Posté(e)

:blush:

Lien à poster
Partager sur d’autres sites
Blackmesa

Blackmesa 121

Membre+, Grosse banane de Dolph, 34ans Posté(e)
Blackmesa
Blackmesa Membre+ 2 712 messages
34ans‚ Grosse banane de Dolph,
Posté(e)

beau travail kelt, je vais finir le tuto html avec les formulaires.

Lien à poster
Partager sur d’autres sites
Invité Boul2killeR

Invité Boul2killeR

Invités, Posté(e)
Invité Boul2killeR
Invité Boul2killeR Invités 0 message
Posté(e)

Bonjour

C'est bien beau tout ça mais ce langgage sera bientot demodé :blush:

Lien à poster
Partager sur d’autres sites
Bashi

Bashi 6

VIP, Just Breathe, 36ans Posté(e)
Bashi
Bashi VIP 5 233 messages
36ans‚ Just Breathe,
Posté(e)

Merci KelT pour ce Tutoriel :coeur:

Bonjour

C'est bien beau tout ça mais ce langgage sera bientot demodé :snif:

Surtout qu'il est utilisé par 99% des sites :bo: il a vachement beaucoup de chances d'etre demodé :bo:

Faut savoir que c'est pas une question de mode mais d'utilité :coeur:

Et remplacé par quoi ? :blush:

Je me posais la meme question :)

bashi

Lien à poster
Partager sur d’autres sites
KelT

KelT 1

Membre, KelT Informatique, 34ans Posté(e)
KelT
KelT Membre 1 855 messages
34ans‚ KelT Informatique,
Posté(e)

Oui le css est vraiment indispensable et ça serait trop compliqué d'apprendre et d'utiliser un nouveau langage. Merci pour les commentaires :blush: et hésitez pas à apporter des précisions si ça vous parait nécessaire :coeur:

A+

ps: blackmesa tu pourras tout mettre dans un seul topic sans blabla autour ?

Lien à poster
Partager sur d’autres sites
KelT

KelT 1

Membre, KelT Informatique, 34ans Posté(e)
KelT
KelT Membre 1 855 messages
34ans‚ KelT Informatique,
Posté(e)
beau travail kelt, je vais finir le tuto html avec les formulaires.

ok je fais le formulaire css

Lien à poster
Partager sur d’autres sites
Annonces
Maintenant

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×