Votre guide dans les plaines du far-web

Devenez développeur web

Formations en ligne pour apprendre le développement web


« Donne un poisson à un homme, tu le nourris pour un jour. Apprends lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Langage CSS

Ce cours fait partie du programme de formation en ligne, vous devez être inscrit pour avoir accès à la totalité du cours.

Généralités

Mis à jour le

Afin de bien maîtriser le CSS, il faut bien avoir compris le fonctionnement de HTML.


Sites utiles :

Fin de l'extrait.

Présentation

Mis à jour le (image visible sur la plateforme de formation)Le CSS (pour Cascading Style Sheets, feuilles de style en cascade en français) permet de gérer le rendu visuel de votre page web. Vous allez pouvoir définir différentes règles de style pour toutes les balises HTML présentent dans votre page. Le moteur de rendu graphique du navigateur va interpréter votre HTML, puis appliquer les différents styles que vo Fin de l'extrait.

Sélecteurs

Mis à jour le

Pour changer les propriétés graphique de votre contenu, vous allez devoir cibler les éléments un à un pour leur attribuer des règles CSS. Il y a de nombreuses façons de sélectionner un élément de votre pages web.


Sélectionner par un type de balise

Vous pouvez cibler directement un type de balise HTML. Si vous écrivez par exemple :

h1 {
 color:red;
}

Cela veux dire que toutes le

Fin de l'extrait.

Propriétés

Mis à jour le

Une fois que vous avez sélectionner votre élément, vous pourrez modifier certaines propriétés CSS qui le constitue. Il y a de très nombreuses propriétés disponibles, vous les rencontrerez à l'usage.

(image visible sur la plateforme de formation)


Les propriétés standards

Exemples de propriétés standard

Fin de l'extrait.

Valeurs

Mis à jour le

Toutes les propriétés acceptent différentes valeurs, mais elles ne sont pas toutes de la même nature.


Valeurs variables

Les espaces, distances, et longueurs :

  • pixels
  • em
  • %
  • cm
  • etc...

Les couleurs :

  • #FF0000
  • rgb(255,0,0)
  • etc...

Les URL :

body { background-image:
Fin de l'extrait.

Liens de parenté

Mis à jour le

Le HTML et le CSS fonctionnent avec une idée de fond, c'est l'imbrication de balises dans d'autres balises. C'est à dire que vous allez avoir des balises qui contiennent d'autres balises. 

Exemple :

<div class="mes_listes">
  <ul id="courses">
    <li class="nourriture">Tomates</li>
    <li class="nourriture">Pâtes</li>
    <li class="produits_menagers">Sopalin</li>
  </ul>
  <ul id="travail">
Fin de l'extrait.

Pseudo-sélecteurs

Mis à jour le

Les pseudo-sélécteurs sont des sélecteurs un peu particulier. Ils vous permettent de modifier le style sur différentes choses concernant votre sélecteur, mais pas vraiment sur le sélecteur lui-même. Un des exemples les plus simple pour imager les pseudo-sélecteurs, c'est le "a:visited", qui correspond à un lien qui a déjà été cliqué par l'utilisateur. Par défaut, cette valeur est un bleu violet un peu moche, et très rétro. Et bien si vous voulez changer ça, il vous fa

Fin de l'extrait.

Espacements

Mis à jour le

Les propriétés margin, padding, et border.

Les marges et les padding sont extrêmement utilisés pour aérer et positionner vos éléments. On utilisera les propriétés margin et padding.

Comme on peut le voir dans l'image ci-dessous, les bordures entre aussi dans "l'enrobage" d'un élément.

Dans cet exemple, l'élément de "démonstration" est le cadre bleu, cela pourrait être un paragraphe par exemple. Les marges sont à l'extérieur, les bordures sont

Fin de l'extrait.

Background

Mis à jour le

La propriété background

La propriété background est une des propriétés les plus répandues en CSS. Elle est composée de nombreuses sous-propriétés qui vont impacter le rendu de votre style :

  • background-color : change la couleur de fond
  • background-image : permet de mettre une image de fond au lieu d'une simple couleur
  • background-position : permet de déterminer la position du background (top, right, 35%, etc...)
  • backgroun
Fin de l'extrait.

Polices de caractères

Mis à jour le

Comme beaucoup d'autres concepts en CSS, les polices de caractères nous viennent de l'imprimerie. Si certaines polices génériques sont adaptées aux paragraphes de textes, il peut vous arriver d'installer des polices personnalisées dans votre site.

Sites intéressants :

Fin de l'extrait.

Habillage

Mis à jour le

Les propriétés float et clear.

Grâce à la propriété float, on va pouvoir habiller des éléments par la gauche ou par la droite. Cela veux dire que le texte va s'écrire en "suivant" les contours d'une image par exemple.


(image visible sur la plateforme de formation)(image visible sur la plateforme de formation)

Fin de l'extrait.

Mode d'affichage

Mis à jour le

La propriété display

Cette propriété va vous permettre de définir le "mode d'affichage" de vos éléments, et donc va grandement influencer le positionnement et l'agencement de vos balises.

Voici un exemple pour faire disparaître un élément de la page :

div{
 display:none;
}


Et voici les principales valeurs que l'on pourra

Fin de l'extrait.

Positionnement

Mis à jour le

Le flux

Pour bien comprendre le fonctionnement de base du positionnement il faut aborder un sujet un peu complexe : le flux. Quand votre navigateur "lit" le document HTML, puis y associer un style CSS, il va "dessiner" votre page web via un moteur de rendu. Cette étape va permettre de passer d'un aspect "code", à un rendu visuel (couleurs, taille des fonts, etc...). En ce qui concerne le positio

Fin de l'extrait.

Flexbox

Mis à jour le

Les flexbox sont très utilisées pour faire du positionnement plus facilement de nos jours. C'est LA solution a privilégier si vous devez coder un site "from scratch". Elles sont assez récentes dans l'histoire de CSS (supportées par les navigateurs vers 2013 environ), et permettent de faire de l'agencement de blocs de manière plus souples et moins contraignante qu'avec les "anciennes" méthodes. 

Un des grands avantages des fl

Fin de l'extrait.

Travaux pratiques

Mis à jour le