Séparer le fond et la forme avec HTML et CSS

La CSS

Décris la présentation de vos pages Internet

CSS signifie

C => Cascading
S => Style
S => Sheet

En français : Une feuille de style

CSS1 1996
CSS2 1998 (amélioration de CSS1)
CSS3 la version courant (amélioration et fonction type bord arrondi, animation, etc.)

CSS a donc été développé par « niveaux ».

Sur un principe de version

CSS1 est développé pour être un sous-ensemble de CSS2, qui est lui-même développé pour être un sous-ensemble de CSS3.

CSS3 Taxonomy

Oui… et concrètement ? 🤔

Plus le navigateur est ancien…

moins ils ne connaissent de propriétés CSS

✋

Nous devons donc vérifier le support.

Can I Use

Border Radius sur Can I Use

Le fonctionnement des « Rules CSS »

2 parties

Le sélecteur : L'élément à viser « table, div, #id, .class ».
La déclaration : Le style en lui-même. Écrit sous la forme de propriété: valeur.

CSS Rulset

Id ou Class ?

Selecteur	Usage
#item	Élément unique dans votre page
.rouge	Class réutilisable (multiple) dans votre code
p	L'ensemble des balises de type `<p>`

class="rouge" => .rouge
id="monId" => #monId

On résume

id= => #
class= => .

C'est une notation universelle qui sera également valable en JavaScript

Un exemple

Comment le lire ?

Les sélecteurs

<p>Exemple <i>suite…</i> !</p>

<style>
  p {
    font-weight: bold;
  }

  p > i {
    color: red;
  }
</style>

Les sélecteurs

<h1>Titre</h1>
<p>Exemple <i>suite…</i> !</p>

<style>
  p,
  h1 {
    color: red;
  }
</style>

Les sélecteurs

<p id="contenu">Exemple <span class="suite">suite…</span> !</p>

<style>
  #contenu {
    background: red;
  }

  .suite {
    background: white;
  }
</style>

En résumé

Selecteur	Cible
#item	Élément avec id `item`
.item	Élément(s) avec class `item`
p	Élément(s) de type `p`
div, p	Élément(s) de type `div`, `p`
p > i	Élément(s) de type `i` dans `p`
.item > i	Élément(s) de type `i` dans `.item`

Consulter une liste plus complète ici

Ou déclarer la feuille de style ?

Dans un fichier externe monfichier.css. (👍)
Dans le document <style>p {color.red}</style>.
Dans l'élément via l'attribut style='' <p style='color: red'>Ceci est rouge</p>. (🙅‍♂️)

Pourquoi choisir la CSS Externe ?

Permets de partager la CSS entre plusieurs pages.

Cascading ? Vous vous souvenez ?

Il y a donc un ordre d'application de la CSS

Style du navigateur.
CSS externe.
Balises styles dans le document.
Attribut style.

Mais

S’il le faut…

color: red !important;

Mise en pratique

Découverte de la CSS

Espacement

Reproduire un design

Padding

Espacement à l'intérieur de l'élément

Margin

Espacement à l'extérieure de l'élément

Padding et Margin

Fond et couleurs

Bien évidemment en CSS nous pouvons personnaliser les fonds (couleurs et images)

Les couleurs

3 notations

En anglais

blue
red
…

Assez rapidement limité. Seulement 140 couleurs

En hexadécimal

Hex Reading

Notation connue et utilisée partout.

RGB

rgb(246, 243, 242);

Identique à la notation en hexadécimal.

Comment choisir ?

Color Picker

Utilisation

Couleur du texte.
Couleur du fond.
Les bordures
…

.maClass {
  /* Couleur de fond */
  background-color: #fafafa;
}

.maClass {
  /* Couleur du texte */
  color: #fafafa;
}

.maClass {
  /* Couleur du bordure */
  border: 1px solid #fafafa;
}

body {
  background: black;
  color: white;
}

Que va-t-il s'afficher ?

Les images

Les images ne sont pas limitées à la balise <img>

C'est possible en CSS

Et partout

body {
  background-image: url("greta.png");
}

Logo Repeat

C'est moche hein ?

Vous pouvez compléter avec :

Propriété	Valeurs
background-attachment	fixed, scroll
background-repeat	no-repeat, repeat-x, repeat-y, repeat
background-position	en pixel, ou top, bottom, left, right center

body {
  background-image: url("greta.png");
  background-attachment: fixed; /* Le Logo sera fixe */
  background-repeat: no-repeat; /* Le logo ne sera pas répété */
  background-position: center; /* Le logo sera centré */
}

Center

Le propriété background est « combinable »

Ce qui donne

background: url("greta.png") fixed no-repeat center;

Formater du texte

Gras, Italic, Souligné
Font-Style
Font-Family
Taille du texte (em, rem, px)
Les alignements (lef, right, center)

Voir le support de cours

Placer les éléments

Absolute ?
Relative ?
Flottant ?

Absolute

Point d'origine « la fenêtre entière »

Position Absolute

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

Relative

Point d'origine le parent

Position relative

position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;

Jouer avec les positions

Flotant

Float left Float right

Flotant

<html>
  <body>
    <h1>Mon titre</h1>
    <p>
      <img
        class="float"
        src="https://www.greta-cfa-paysdelaloire.fr/wp-content/themes/kookline/static/img/logo-cfa.png"
      />
      L’accueil de tous les publics : les formations du GRETA-CFA 49 concernent
      les salariés d’entreprises, les jeunes en insertion professionnelle et les
      demandeurs d’emploi, mais aussi toute personne qui souhaite se former à
      titre individuel.
    </p>

    <style>
      .float {
        float: left;
      }
    </style>
  </body>
</html>

Centrer en CSS

text-align: center
margin: auto
display: flex
display: grid
…

Le placement simplifié

avec `Flex`

`Flexbox`

Placer vos éléments en colonnes, en X, en Y.
Gérer en colonne et en ligne.
Gérer l'ordre d'affichage.
Gérer le centrage.

Voir le support de cours

(Et surtout mettre en pratique)

Décoration / Mise en forme

Se passer des images pour le style

Box-shadow
border
border-radius

Border et Shadow

box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);

Générateur en ligne

border: 1px solid red;
border-radius: 10px;

Interactivité

Les pseudo-classes

Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document, mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec :visited ; le statut du contenu avec :checked ; la position de la souris :hover).

:hover
:active
:visited

Les ressources d'exemples

CodePen
S'inspirer c'est « progresser »

Analyser / Copier

Vous avez pour ça « l'inspecteur d'élément ».
Aide & Code source

Inspecteur d'éléments

Le CSS « avancés »

Les variables CSS
Les animations
Le responsive
Grid & Flex

Voir le support de cours

Mise en pratique

L'organisation de la CSS

Les Designs Patterns

Écrire moins… Pour gagner plus !

Le framework Boostrap

Écrire moins… Pour gagner plus !

Sass Logo

Introduction CSS