Votre guide dans les plaines du far-web

Formation développeur web


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

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… ~~ 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…

~~ 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 standards :

  • color : couleur du texte
  • text-align :…
~~ 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"> <!-- ul est dans div -->
        <li class="nourriture">Tomates</li> <!-- li est dans…
~~ 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à…

~~ 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,…

~~ 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…
~~ 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 :


Les propriétés…

~~ 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)

Voici comment… ~~ 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;
}


~~ 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…

~~ 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…

~~ Fin de l'extrait ~~

Travaux pratiques

Mis à jour le