Ressources Magic Makers

WEB - Bases CSS

La structure d'une page CSS

On va pouvoir modifier les éléments du fichier HTML dans le fichier CSS lié ! 

On note dans un premier temps l’élément qu’on veut modifier (la balise, class, id..) et entre des accolades on note nos modification. On sépare chaque modification par un ‘;’ !!

Quelques codes exemples

Sur cette fiche, tu trouveras toutes les infos dont tu as besoin pour commencer à personnaliser ton site :

Ressources makers CSS

Lier une page CSS a une page HTML : 
<link rel="stylesheet" href="style.css">
Attention : cette balise s'intègre entre les balises <head></head> !

Ecrire un commentaire en CSS :
/* Mon commentaire */

Modifier la taille d'une image en gardant les bonnes proportions : 
width : 30%;

Changer le texte (couleur et taille) :
color : black;
font-size : 20px;

Arrière-plan du body :
body {
  background-image: url("Halo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Contour :
border: black 5px solid;

Ombre : 
box-shadow: 20px -10px 50px orange;

Border-radius : 
border-radius: 10px;

Les différents états des liens : 
:link       lien non visité
:visited  lien visité
:hover   curseur sur le lien   
:active   lien sélectionné

Exemple :

a:hover {
   color: red;
}

Mon lien devient rouge lorsque je le survole à la souris.

Changer le fond de mon site :
Mettre une couleur :
body {
   background-color: red;
}

Mettre une image comme fond :
body {
   background-image: url(“monImage.jpg”);
}

Insérer une police et la modifier : 
@font-face {
  font-family: "Lobster";
  src: url('fonts/Lobster.otf');
}

body {
  font-family: "Lobster";
  color: brown;
  font-size: 100px;
}
Tu peux aussi insérer une police avec @import (cf fiche ressources)

Web Design

Sur cette fiche, tu trouveras toutes les règles pour créer un site harmonieux :