Ressources – Html/css – Base du Html/css – Base du css

Bases du css

Qu'est ce que le CSS ?

Le CSS est un langage de styles. Il permet d’appliquer du design sur notre code HTML.

L’HTML va définir la structure de votre page, le CSS sera son coup de peinture !

Tu trouveras dans cette page :

- La structure d’un fichier CSS
- Intégrer sa feuille de style CSS
- Les sélecteurs : balises, class, id
- Les propriétés CSS
  - Propriétés agissant sur le texte
  - Propriétés agissant sur les liens
  - Les arrières plans
  - Les bordures
  - Les ombres
  - La taille des éléments
  - Les espaces entre les éléments
- Liens utiles

La structure d'un fichier CSS

Pour écrire notre CSS, on va créer un fichier ayant son extension. Exemple : style.css

On note dans un premier temps l’élément HTML que l’on cible (voir ci-dessous les sélecteurs).
On ouvre des accolades { }, et à l’intérieur nous coderons un ordre par ligne.

Chaque ordre est défini par une syntaxe précise :

- On commence par déclarer la propriété (exemple : color)
- On ajoute 2 points :
- On déclare l’option de cette propriété que l’on veut appliquer (exemple : #dc0110)
- Et on termine notre ordre par un point virgule ;

Intégrer sa feuille de style CSS

Pour que notre CSS soit pris en compte, il faut le lier dans le fichier html sur lequel on veut qu’il agisse, grâce à la balise <link>

Dans le fichier HTML, repère bien sa structure de départ, et rappelle toi que la balise <head> … </head> enferme toutes les informations importantes pour le navigateur. C’est donc ici que l’on va ajouter la balise <link> qui liera notre CSS.

La balise est composée de 2 informations :

href= »style.css » : On indique au navigateur le chemin du fichier css

rel= »stylesheet » : Et on lui indique qu’il s’agit d’une feuille de style

Les sélecteurs : balises, class, id ?

Pour faire agir notre css, il faut cibler l’élément HTML. Plusieurs choix s’offrent à nous, mais agissent différemment :

Les balises :

Si l’on cible la balise <p> pour notre exemple, le CSS va s’appliquer à toutes les balises <p> de notre fichier html.

Exemple avec un fichier html composé de 3 paragraphes :

Les class :

On peut ajouter une class à notre balise html, pour pouvoir ciblé plus précisément un élément dans notre CSS.

Si l’on reprend notre exemple ci-dessus, et que l’on veut modifier que le premier paragraphe en rouge, on va ajouter une class dans notre fichier html, et l’appeler dans notre CSS.

Ce qui va changer dans notre fichier HTML

On ajoute l’attribut class directement dans la balise HTML concernée.

Ce qui va changer dans notre fichier CSS

On va appeler la class de la même façon qu’une balise, mais avec un point devant.

Exemple : reprenons nos 3 paragraphes et ajoutons une class uniquement sur le premier.

Les id

Les id fonctionnent exactement comme une class, avec pour principale différence, qu’on ne peut avoir qu’un seul id identique par page.

Son but est d’avoir un élément totalement unique (à l’inverse d’une class, qui nous permet de la rappeler à chaque fois que l’on veut qu’un élément agisse pareil).

Ce qui va changer dans notre fichier HTML

On ajoute l’attribut id directement dans la balise HTML concernée.

Ce qui va changer dans notre fichier CSS

On va appeler l’id de la même façon qu’une balise, mais avec un # devant.

L’effet Cascade

Le css est un langage de styles en cascade. Cela veut dire qu’il gère l’ordre de priorité de nos déclarations.

Il prend en compte :

- Le sélecteur choisi
  - L’id passe au dessus d’une class, qui passe au dessus d’une balise.
  - On remarque dans le paragraphe 3, qu’il change uniquement la couleur différente déclarée dans l’id, mais va garder le gras mis sur la class.

L’ordre de déclarations dans le code
- Si l’on déclare dans notre code css une class « bleu » après une class « rouge », et qu’on les appelle dans la même balise, la class « bleu » est priorisée car écrite en dernier dans le code.

Les propriétés CSS

Retrouve ici les principales propriétés CSS. Clique sur le nom de la propriété en orange pour ouvrir la documentation officielle de celle-ci, si tu veux encore plus d’exemples et d’attributs possibles à lui définir.

Propriétés agissant sur le texte :

Couleur du texte

Color : Définit la couleur de ton texte.

Utilise son nom anglais, ou encore son code couleur html HEX

<<< Palette de couleurs >>>

Ajoute 2 chiffres à la fin du code hex, pour lui donner un % d’opacité, et le rendre plus transparent.

Ombre sur le texte

text-shadow : Ajoute une ombre au texte.

Jouer avec les valeurs peut avoir un rendu très différent

Taille du texte

font-size : permet de gérer la taille du texte.

Gras & italique

font_weight : ajoute du gras au texte.

font-style : permet de mettre le texte en italique

Typographie

font-family : Change la typographie par défaut du texte.

Utilise google fonts avec son import pour avoir un énorme nombre de typographies !

Positionner le texte

text-align : Permet de centre le texte, le positionner sur la gauche, ou la droite

Majuscules / Minuscules

text-transform : Permet de mettre tout un texte en majuscules, minuscules, ou juste la 1ère lettre de chaque mot

Souligner le texte

text-decoration : Permet de souligner un texte, de plusieurs façons

Propriétés agissant sur les liens

Les liens peuvent avoir différents états suivant la navigation déjà faite par l’utilisateur. On peut leur donner un style différent à chacun, grâce aux propriétés css :

- Faire un appel css directement sur la class du lien, agira sur le lien par défaut.
- :visited : Agit sur le lien déjà visité par l’utilisateur
- :hover : Agit lorsque l’on passe la souris sur le lien
- :active : Agit lorsque l’on clique sur le lien avec la souris
- :focus : Agit lorsque l’on se déplace sur le lien à l’aide de la navigation clavier

Les arrières plans

On peut ajouter un background derrière nos éléments. Que ce soit une couleur ou une image en fond de toute notre page, ou derrière un bloc de texte, ou encore derrière une image.

Pour bien positionner son background, il faut jouer avec les balises servant de « boite », c’est à dire qui entourent les éléments que tu veux cibler.

- background-image : ajoute une image derrière l’élément ciblé
- background-color : ajoute une couleur derrière l’élément ciblé

Les bordures

Différentes propriétés css de bordures permettent de créer des contours à nos éléments (contenu de texte, image..). Elles agissent sur la taille de la bordure, son style et sa couleur.

border : ajoute une bordure.

Il existe plusieurs styles de bordures, clique sur la propriété border en orange pour en découvrir d’autres.

border-radius : arrondit les angles qui contourne l’élément.

Les ombres

On peut ajouter une ombre à nos éléments (un bloc contenant un texte, une image…).

L’ombre est définie par un décalage horizontal, vertical, un flou, et une couleur.

box-shadow : ajoute une ombre de portée

On peut jouer avec son opacité en ajoutant 2 chiffres au code HEX (ici opacité à 50%)

La taille des éléments

2 propriétés css permettent de réduire / augmenter la hauteur ou la largeur des éléments.

On peut l’utiliser pour redimensionner des images, mais aussi sur des blocs agissant sur un contenu spécifique.

Important :

- Lorsque l’on change qu’une propriété, cela redimensionne en gardant les proportions.
- Pour déformer l’élément, il faut déclarer les 2 propriétés.

width : Agit sur la largeur

height : Agit sur la hauteur

On peut donner une valeur en px, en %, en em, etc

Les espaces entre les éléments

On peut avoir besoin de créer des espaces entre nos éléments. Pour cela il faut faire attention à 2 choses :

- Bien cibler l’élément html qui doit contenir l’espace.
- Et définir si l’on veut cet espace à l’intérieur de cet élément ou à l’extérieur.

padding : Permet de créer des espaces à l’intérieur de l’élément.

padding : créé un espace sur les 4 côtés
padding-left : créé un espace à gauche
padding-right : créé un espace à droite
padding-top : créé un espace en haut
padding-bottom : créé un espace en bas

margin : Permet de créer des espaces à l’extérieur de l’élément.

margin : créé une marge sur les 4 côtés
margin-left : créé une marge à gauche
margin-right : créé une marge à droite
margin-top : créé une marge en haut
margin-bottom : créé une marge en bas

EXPERIMENTER

EXPERIMENTER

PARTAGER