CSS introduction – webdev cpmd

CSS, acronyme de Cascading Style Sheets, est un langage utilisé pour définir les propriétés graphiques de documents web codés en html. Ainsi le navigateur, une fois qu’il a reçu la page en html lit et interprète les styles.

Il s’agit de la matière la plus importante à savoir pour vous.

3 manières d’utiliser les styles (mais une seule est propre)

les style inline : utilisant l’attribut style = "…" d’une balise HTML
En utilisant la balise <style>...</style> à l’intérieur du <head> de la page
la bonne: En incorporant un fichier CSS externe par référence à l’aide de la balise <link> dans le <head>

...
 <link rel="stylesheet" href="style.css" type="text/css" />
</head>

Voici un exemple de fichier css

/* Ceci est le code d'un fichier CSS externe */
/* Il n'y a pas besoin d'entête et le fichier doit contenir exclusivement du code CSS, pas du HTML */

body {
    background-color: black;
    color: white;
    font-family:sans-serif;
}

Une déclaration de style se compose de deux éléments :

#1 Un sélecteur
Il détermine quels éléments sont concernés par la déclaration de style, c’est-à-dire les éléments de la page qui seront affectés par les caractéristiques graphiques souhaitées.

#2 Un bloc de code avec une ou plusieurs associations propriété : valeur
Chaque association détermine :

La propriété correspondante, c’est-à-dire la caractéristique qu’on veut modifier, comme par exemple la couleur de la police. La couleur du fond, la taille du texte, les bordures

La valeur déterminée, c’est-à-dire le choix spécifique parmi d’autres valeurs possibles. Par exemple, on peut indiquer que la couleur de la police sera jaune, que la taille de la police est de 18px, …

Les sélecteurs CSS

3 types de sélecteurs (peuvent être combinés)

1 Sélecteur de balise : on cible une balise en indiquant son nom sans les chevrons – ex :

p, a{
 font-size:1.5em;
}

2 Sélecteur de class : on cible un ou plusieurs élément·s ayant un certain attribut class ; ajouter un point avant le nom de la class – ex :

.red{ /* fait référence à class="red" */
  color:#EF4364;
}
.margesInternes{ /* fait référence à class="margesInternes" */
  padding:0.8em;
}

3 Sélecteur d’id : on cible un élément unique ayant un certain attibut id ; ajouter un # avant le nom de la class – ex :

#infosPersonnelles{ /* fait référence à id="infosPersonnelles" */
  background-color:#435EEF;
}
#copyright{ /* fait référence à id="copyright" */
  padding:0.8em;
     font-size: max(11px,0.6em);
     background-color:#dedede;
}

Combinaison de plusieurs sélecteurs

On peut appliquer la/les même/s déclaration/s de style à plusieurs sélecteurs à la fois, indépendamment de comment ces sélecteurs sont conçus, en les séparant avec une ,.

Par exemple :

/* Appliquer une couleur à tous les titres des niveaux 1 à 4 */
h1, h2, h3, h4 {
   color: #009;
}

/* Appliquer un fond à différents sélecteurs */
p, span.very-important, div#unique {
  background-color: #121212;
  color:#f00;
  font-size:1.23em;
}

Préciser l’emboîtement des éléments

On peut définir des déclarations de style qui s’appliquent selon la hiérarchie des éléments HTML5 en séparant les élément par un espace. Par exemple :

/* Déclaration qui s'applique à tous les paragraphes qui se trouvent à l'intérieur d'un div */
div p {
  color: rgba(255,0,0,0.5); /* couleur avec transparence */
}

/* Déclaration qui s'applique aux span de classe .very-important qui se trouve dans un p de classe .big */
p.big span.very-important {
  font-style: italic;
  font-size:1.3em;
}

Uniformisation entre les navigateur = modern-normalize.css

Tous les navigateurs n’ont pas les même valeurs css par défaut. Il faut donc les uniformiser avant d’écrire les vôtres. Modern-Normalize.css un fichier CSS qui rend l’affichage des éléments HTML plus uniforme dans les différents navigateurs. Notamment pour les marges, les bordures et la taille des polices.

Ajouter ce fichier (cette ligne) en haut de chacune de vos css.

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
/*# sourceMappingURL=/sm/d2d8cd206fb9f42f071e97460f3ad9c875edb5e7a4b10f900a83cdf8401c53a9.map */

Vous pouvez définir un raccourci utilisateur en suivant les étapes ci-dessous :

Dans VS-Code > Dans la barre du haut VS-CODE>Réglages>Configurer les extraits de l’utilisateur.
Choisir dans la liste CSS (tapez css si besoin)
Ajouter un retour de ligne après la ligne 14 (avant le } de la ligne 15)
coller ce bout de json et enregistrer ⌘+s:

"normalize":{
  "prefix":"normalize",
  "body" :[
     "/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
/*# sourceMappingURL=/sm/d2d8cd206fb9f42f071e97460f3ad9c875edb5e7a4b10f900a83cdf8401c53a9.map */\n$0"
  ],
  "description" : "Insert Normalize 8.01"
},

Dorénavant quand vous créer un fichier CSS vous taper norm + tab et ça vous écrit cette ligne.