HTML
Développement Web
Par Alan PHILIPIERT
HTML
HyperText Markup Language
Langage de balises
Structure le contenu d’une page web
Fichier .html
• Créez un fichier [Link]
• Ouvrez-le dans votre éditeur et dans votre navigateur
Balises
Élément
<p> Hello ! </p>
contenu
Balise ouvrante Balise fermante
Élément vide
<img /> Balise auto-fermante ou orpheline (le / n’est pas obligatoire)
Imbriquer des balises
<div>
<p> Hello ! </p>
</div>
Attributs
• Ils apportent des informations sur le comportement d’un élément
• Ils se placent à l’intérieur des balises ouvrantes
• La valeur d’un attribut se place entre double quote " "
<p class="valeur" > Hello ! </p>
attribut
Exemple d’attributs
id=" " : donne un identifiant unique à l’élément utilisable en CSS
<p id="monid">Id !</p>
class=" " : donne une classe à l’élément utilisable en CSS
<p class="maclasse">Class !</p>
Exemple d’attributs
<img src="img/[Link]" alt="Mon image" />
src=" " : donne la source
alt=" " : texte descriptif pour ceux qui ne peuvent pas voir l’image
- handicap visuel avec un lecteur d’écrans
- si l’image n’a pas pu s’afficher
<a href="[Link] ici !</a>
href=" " : donne la destination d’un lien
Structure d’une page HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Titre</title>
</head>
<body>
Contenu de la page
</body>
</html>
Doctype
• DTD (Document Type Definition) => règles d’écriture
• Permet de préciser le type de document au navigateur
• Évite le « Quirks mode » (simulation de bugs anciens navigateurs)
HTML 5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
Transitional, Strict, Frameset
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
Balise HTML
<html></html>
• Encadre le contenu de la page
• Élément racine
• Contient les balises <head> et <body>
lang="fr"
Cet attribut indique la langue des éléments
Balise HEAD
<head></head>
Contient tous les éléments qui ne sont pas affichés dans le contenu
Les métadonnées
<meta charset="UTF-8" />
<title>Titre</title>
C’est le titre de la page, il apparait dans l’onglet sur le navigateur et dans la SERP
La balise META
Cette balise sert à placer des métadonnées dans une page HTML.
Elle se place dans l’élément <head>
Elles vont servir aux outils d’indexation, navigateur web, moteurs de recherche
Elles sont formées par 2 attributs :
• Un attribut pour le mot-clé
• Un attribut pour la valeur
L’encodage
charset="UTF-8" /> Recherche
Précise l’encodage des caractères Jeu de caractères et Encodage
UTF-8
• codage de caractères
• compatible avec Unicode et ASCII
Testez sur votre page :
<meta charset="ISO-8859-1" />
Ajoutez à votre body : <p>YTrackが大好きです</p>
Cette écriture est simplifiée en HTML5, elle correspond normalement à :
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
Auteur et description
<meta name="author" content="Alan Philipiert">
Précise l’auteur de la page
<meta name="description" content="Le cours de HTML a pour
but de vous donner les bases du Web">
Précise la description de la page
Sur le site de Ynov, ouvrez le code source de la page (Clic droit)
Trouvez la balise description. Maintenant dans la SERP vous remarquez que le
contenu de la description s’affiche.
Recherche
SERP, SEM, SEO, SEA, SMO
Robots
<meta name="robots" content="index, follow">
Précise des éléments au robot (de Google) qui va parcourir votre page pour le
référencement.
Il peut prendre plusieurs valeurs comme :
• index (pour autoriser/interdire l’indexation)
• follow (pour autoriser/interdire la suivie des liens dans la page)
Open Graph et Twitter Cards
Partager du contenu provenant d’une page web sur les réseaux
sociaux.
<meta property="og:url" content="[Link]
<meta property="twitter:card“ content="summary">
Viewport
C’est la zone où sera affichée le contenu du site. Utile pour
les adaptations du mobile.
La largeur est égale à la largeur de l’appareil
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> Niveau de zoom
Commentaires
Les commentaires :
<!-- Ceci est un commentaire -->
W3C
• World Wide Web Consortium
• Organisme de standardisation
• Normes, ce sont des règles approuvées par des instances officielles
• Standard, ce sont des recommandations définies par des groupes avisés
• Tim Berners-Lee, inventeur du WWW et du HTML
• www : World Wide Web, système hypertexte sur Internet
W3C
• Dans votre « [Link] »
• Complétez ce fichier pour qu’il soit validé sur W3C Validator
W3C
• W3C Validator : [Link]
Quelques balises
<div> : c’est un élément conteneur de type block qui n’a aucune valeur
sémantique
<span> : l’équivalent d’une div mais de type inline
<p> : Paragraphe
<img/> : Image
<a> : Liens
<blockquote> : Citation
Block et Inline
Block
• Retour chariot
• Il prend toute la largeur de son élément parent
p, div, form, header, nav, ul, li, h1, etc…
Inline
• Pas de retour chariot
• Ignore les attributs width et height
• Seules les marges gauches et droites sont appliquées.
a, span, i, etc…
Les entités HTML
Les entités HTML permettent d’encoder certains caractères spéciaux comme :
• < : ≶
• > : >
• é : é
• è : è
• à : à
• ê : &ecire
• Espace :
<p>On dit que 3 > à 2</p>
Les titres
Il existe six niveaux de titre
<h1><h2><h3><h4><h5><h6>
Pas de h dans un p et inversement
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
Quelques balises sémantiques
<header> : l’en-tête de la page, section ou article
<footer> : le pied de la page, section ou article
<nav> : menu de navigation
<article> : article ou contenu qui se suffit à lui-même
<section> : section d’un document qui regroupe un même sujet
<aside> : Compléments qui apportent des informations supplémentaires
Mise en forme de texte
Ce sont des éléments sémantiques :
<strong></strong>
Signifie une mise en valeur
Ne signifie pas mettre en gras !
<em></em>
Signifie une mise en évidence (emphase)
Ne signifie pas mettre en italique !
<sub></sub> : indice
<sup></sup> : exposant
Les listes
Les listes non-ordonnées
<ul>
<li>Accueil</li>
<li>Article</li>
<li>Contact</li>
</ul>
Les listes ordonnées
<ol>
<li>Accueil</li>
<li>Article</li>
<li>Contact</li>
</ol>
Les liens (ancre)
Lien externe :
<a href="[Link] title="Google">Lien vers google</a>
Lien interne :
Un site est constitué d’un ensemble de pages au sein d’un dossier (racine)
<a href="[Link]">Page 1</a>
Chemin relatif : relatif au répertoire courant (utiliser ../ pour remonter
l’arborescence)
Chemin absolu : Il se rapporte au dossier parent racine
On peut aussi utiliser le chemin absolu avec la balise <base> qui définit un
chemin et qu’on peut réutiliser sans tout réécrire
Les liens
Vers un endroit de la page :
<h1 id="news">News</h1>
<a href="#news">Vers les News</a>
Attribut target
Ouvre un lien dans un autre onglet :
<a href="[Link]" target="_blank">Page 1</a>
Par défaut, dans le contexte de navigation actuel :
<a href="[Link]" target="_self">Page 1</a>
Les liens
Vers un email :
<a href="[Link]
Vers un tel :
<a href="[Link]
Iframe
Permet d’imbriquer un contexte de navigation qui intègre une page HTML
<iframe width="600" height="500" id="gmap_canvas"
src="[Link]
er%20aix%20en%20provence&t=&z=13&ie=UTF8&iwloc=&output=emb
ed" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"></iframe>
Tester avec votre Google Map : [Link]
Le mapping
Permet d’obtenir des liens sur une image en déterminant des formes :
• Rectangle (Rect)
• Cercle (Circle)
• Polygone (Poly)
En indiquant des coordonnées
Il faut donner un nom à la map pour référer à l’image.
shape : designe la forme
coords : designe les coordonnées
href : définit le lien associé à la forme
Exemple des sushis
Les tableaux HTML
Le contenu d’un tableau HTML est encadré par la balise <table></table>
<td> : correspond à une cellule dans une ligne
<tr> : correspond à une nouvelle ligne
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
</tr>
</table>
Les tableaux HTML
<th> : permet de mettre une en-tête (remplace les <th> )
<caption> : permet d’ajouter un titre (se place au début du tableau)
Attributs
colspan : permet de fusionner des cellules
rowspan : permet de fusionner des lignes
<table>
<caption>Mon titre</caption>
<tr>
<th colspan="2"></th>
<th>a</th>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
</tr>
</table>
Les formulaires
Le formulaire sert à récupérer des données que l’utilisateur va entrer et les
envoyer au serveur pour un traitement.
Le contenu d’un formulaire est encadré par la balise <form></form>
<form method="post" action="[Link]"></form>
Deux méthodes :
• method="get" : limitée à 255 caractères, passe les informations dans la
barre d’adresse
• method="post" : envoie les données dans le corps de la requête sans
passer par la barre d’adresse
Action : l’adresse du fichier qui va traiter les données
Les formulaires
Input
Zone de texte monoligne dans un balise auto-fermante. Il faut y donner un nom
pour récupérer sa valeur
<input type="text" name="nom">
Label
Description de champ. Il faut ajouter le même for et id (mais le name différent)
<label for="nom">Nom</label>
<input value="Alan" type="text" id="nom" name="nom">
value : Donne la valeur du champ par défaut
Les formulaires
Autre attributs :
maxlenght : donne le nombre maximum de caractère du champ
placeholder : donne une indication de ce que peut contenir le champ
Type des inputs
text, number, email, tel, date, button, checkbox, radio, password, submit, file etc…
Les formulaires
Checkbox (plusieurs choix)
<div>
<input type="checkbox" id="thon" name="poisson" checked>
<label for="thon">Thon</label>
</div>
<div>
<input type="checkbox" id="saumon" name="poisson">
<label for="saumon">Saumon</label>
</div>
Les formulaires
Radio (un seul choix possible)
C’est la value qui sera renvoyée
<div>
<input type="radio" id="cb" name="payment" value="cb"
checked>
<label for="cb">CB</label>
</div>
<div>
<input type="radio" id="cash" name="payment" value="cash">
<label for="cash">Cash</label>
</div>
Les formulaires
Submit
Bouton pour envoyer un formulaire
<input type="submit" value="Envoyer"/>
Reset
Bouton pour envoyer un formulaire
<input type="reset" value="Réinitiliser"/>
Les formulaires
Button
<button type="button">Appuyez</button>
<button type="submit">Envoyez</button>
<button type="reset">Réinitialisez</button>
File
Il faut ajouter à la balise <form> : enctype="multipart/form-data"
<input type="file" name="myfile" accept=".jpg" multiple>
Les formulaires
Password
<input type="password" name="mdp" id="mdp">
Hidden
Le champ est caché mais les données peuvent être tout de même être envoyées.
Les formulaires
Textarea
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
Les formulaires
Select
<select id="menu-select">
<optgroup label="Sushi">
<option value="thon">Thon</option>
<option value="saumon" selected>Saumon</option>
<option value="crevette">Crevette</option>
</optgroup>
<optgroup label="Brochettes">
<option value="poulet">Poulet</option>
<option value="porc">Porc</option>
</optgroup>
</select>
Les formulaires
Disabled
Pour désactiver un champ on utilise l’attribut
disabled="disabled" ou juste disabled
Ici Porc n’est pas sélectionnable
Les formulaires
La balise <fieldset> permet de regrouper des éléments d’un formulaire.
La balise <legend> représente la légende du contenu dans un fieldset.
Link et script
link
Relation entre les documents. On peut définir un lien vers une feuille de style.
<link href="[Link]" rel="stylesheet">
script
Intègre un script exécutable (généralement du Javascript)
<script>
[Link]("Hello")
</script>
<script src="[Link]"></script>
CSS
Développement Web
Par Alan PHILIPIERT
Qu’est ce que c’est
CSS = Cascading Style Sheets (Feuille de styles)
Permet de générer la présentation d’une page HTML, d’y ajouter du style.
C’est le navigateur qui interprète le CSS. Il est donc important de tester sur plusieurs
navigateur afin de respecter la compatibilité navigateurs.
Principaux navigateurs : Firefox, Chrome, Safari, Edge, Opéra.
En faisant clic droit → inspecter, vous pouvez voir le CSS de chaque élément.
Utilisation
Dans une balise => s’applique uniquement à l’élément
<div style="text-align: center;">Hello</div>
Dans une balise <style> => s’application uniquement à la page
<style>
p{
color: red;
}
</style>
<p>Hello</p>
Cette balise se place dans le <head>
Utilisation
La feuille de style externe.
On crée un fichier « [Link] », puis on le lie à la page HTML
<link href="[Link]" rel="stylesheet">
<p>Hello</p>
On peut appliquer ce style à toutes les pages du site.
Syntaxe
selecteur{
propriété: valeur;
}
Sélecteur
Types de sélecteur :
• Sélecteur de type
p, input, div etc…
• Sélecteur de classe
.ma-classe
• Sélecteur d’identifiant
#mon-id
• Sélecteur universel
*
• Sélecteur d’attribut
input[type="text"]
Sélecteur :
Enfants et parents, descendants et ancêtres
<div>
div
<h1>Bonjour</h1>
<div>
<p>Hello</p> h1 div
</div>
</div>
p
div
h1
div
p
Sélecteur
Types de sélecteur :
• Sélecteur d’enfants
div > h1
• Sélecteur de descendant
div p
• Sélecteur de frère direct (première frère suivant)
h1 + div
• Sélecteur de frère (frère suivant)
h1 ~ div
Sélecteur de classe
Plusieurs classes à un élément
<p class="class-1 class-2">Hello</p>
Tous les p avec « cette » classe
[Link]{
color: red;
}
<p class="toto">Hello</p>
<p class="tata">Hello</p>
Sélecteur de classe
Dans la même principe :
<p class="toto titi">Hello</p>
<p class="toto tata">Hello</p>
[Link]{
color: red;
}
Les pseudo-classes
Sur les liens :
a:link : les liens non visités
a:visited : les liens déjà visités
a:hover : au survol
a:active : au clique
a:focus : lors du focus
:hover s’applique sur d’autres éléments
:focus s’applique aussi sur les boutons ou input, comme :checked
Pseudo-éléments
Permet de sélectionner certaine partie d’un élément ciblé.
::first-letter : Permet de cibler la première lettre
::before ::after Permet d’ajouter avant et après l’élément ciblé
<style>
p::before{
content: "Patate ";
color: red;
}
p::after{
content: " Patate";
color: blue;
}
</style>
<p>Patate</p>
Couleur
Hexadécimale : #ffffff (#fff)
RGB (Rouge, Vert, Bleu) : rbg(255,255,255) et
rgba(255,255,255,1)
HSL (Teinte, Saturation, Luminosité) : hsl(0, 0%, 100%) et
hsla(0, 0%, 100%, 1)
Mot clé : white
Les couleurs s’utilisent avec les propriétés color, background-color, border etc…
Unité
px (pixel)
• Unité « fixe »
em
• Taille relative à la taille de l’élément parent
%
• Taille relative à la taille de l’élément parent
rem
• Taille relative à la taille de l’élément racine
Unité
vh vw
• Se réfère au viewport de la fenêtre
• 1 vh correspond à 1% de la hauteur de la fenêtre
• 1 vw correspond à 1% de la largeur de la fenêtre
Typographie
Changer la police d’écriture
body{
font-family: Arial, Helvetica, sans-serif;
}
Les polices sont ordonnées par ordre de priorité. Si le
navigateur ne trouve pas la première, il se rabat sur
celle d’après.
Pour intégrer une police, téléchargez-en une et mettez-la
dans votre projet
Ex : [Link]
Typographie
Via @import
@import
url('[Link]
lay=swap’);
body{
font-family:'Festive', cursive;
}
Via link
<link
href="[Link]
play=swap" rel="stylesheet">
Typographie
Via un fichier
Téléchargez la police que vous souhaitez
@font-face {
font-family: 'Roboto-Regular';
src: url('Roboto/[Link]') format('truetype');
}
body{
font-family: 'Roboto-Regular’;
}
Attention, tous les navigateurs ne supportent pas tous les formats -> utilité de mettre
plusieurs formats (truetype, woff, woff2, embedded-opentype, opentype, svg)
Typographie
Taille d’une police
font-size: 24px;
Épaisseur de la police
font-weight: bold;
Le style de la police
font-style: italic;
Couleur de la police
color: red;
Typographie
Alignement (left, center, right, justify)
text-align: center;
Text-transform (lowercase, uppercase, capitalize)
text-transform: uppercase;
Text-decoration (overline, underline)
text-decoration: underline;
Liste à puce sur les balises ul et li (none, disc, circle, square)
list-style-type: square;
list-style-image: url("[Link]");
Bordures
Permet d’ajouter une bordure à un élément
border: width style color;
border: 3px solid #DC143C;
On peut décomposer les 4 bordures avec :
border-top: ;
border-bottom: ;
border-left: ;
border-right: ;
Style : none, dotted, dashed, solid, double, groove, ridge, inset, outset
Bordures
Bordure arrondie :
border-radius: 20px;
border-radius: 50%;
Arrondie par angle (haut gauche, haut droit, bas droit, bas gauche)
border-radius: 0px 20px 3px 20px;
Background
Définir la couleur de l’arrière-plan
background-color: red;
Définir l’image de l’arrière-plan
background-image: url('[Link]’);
background-image: url('[Link]'), url('[Link]');
Définir la façon dont les images sont répétées
background-repeat: no-repeat;
Définir la position du background
background-position: center;
Définir la taille des images de l’arrière-plan
background-size: cover; / background-size: 100px 200px;
Valeur : contain, cover, auto, px, % etc...
Background
Background
C’est un propriété raccourcie qui peut définir plusieurs valeurs (background-
color, background-image, background-position, background-repeat,
background-size, background-clip, background-origin et background-
attachment)
background: center / contain no-repeat url("[Link]"),
bottom / contain repeat url("[Link]") #000;
Background
Linear-gradient()
background: linear-gradient(red, blue)
background: linear-gradient(to left, red, blue)
background: linear-gradient(red 0%, orange 25%, yellow 50%, green
75%, blue 100%);
Background
Background-blend-mode
Permet de fusionner des images et des couleurs d’arrière-plan
background: center / cover url('[Link]') green;
background-blend-mode: difference;
Valeur : normal, multiply, screen, overlay, darken, lighten, color-dodge, color-brun, hard-
light, soft-light, difference, exclusion, hue, saturation, color, luminosity
Dimension
Largeur et hauteur d’un élément
width: 250px;
height: 140px;
On peut utiliser max et min pour gérer les débordements :
max-width: 100%;
max-height: 100%;
Margin et Padding
Margin : marge extérieure
Padding : marge intérieure
Margin-top
Padding-top
Margin-left Padding-left Contenu Padding-right Margin-right
Padding-bottom
Margin-bottom
Margin et Padding
Les 4 côtés :
margin: 20px;
padding: 10px;
On peut préciser margin-top, margin-right, margin-bottom, margin-left (dans
cet ordre) :
margin: 20px 10px 5px 10px;
Ou haut-bas / gauche-droite :
margin: 20px 0;
Centrer horizontalement
margin: 0 auto;
Margin et Padding
Un margin top ou bottom sur les éléments inline ne fonctionnent pas.
Par défaut, les navigateurs appliquent du margin et padding sur les éléments.
Pour les retirer, faire :
margin: 0;
padding: 0;
Le padding entre en compte dans le calcul de la dimension d’un élément.
Margin et Padding
Le padding entre en compte dans le calcul de la dimension d’un élément.
width: 100px;
padding: 10px;
On peut gérer le calcul du padding avec l’attribut box-sizing
box-sizing: border-box;
width: 100px;
padding: 10px;
Overflow
L’overflow, c’est-à-dire le dépassement. Il est possible que du contenu dépasse
d’un élément.
p{
width: 500px;
height: 190px;
background-color: rgb(150, 150, 236)
}
Overflow
Le texte dépasse de l’élément p
Pour cela on va gérer l’overflow :
overflow: hidden;
Le contenu est coupé
Overflow
Ou sinon :
overflow: auto;
On a une barre de défilement pour le contenu
Positionnement : float
Les flottants : l’élement sort du flux et le reste « coule » autour
float: left;
Positionnement : float
Si on veut éviter qu’un élément « coule » autour du flottant, on utilise clear sur
l’élément qui doit éviter.
Valeur : left, right, both
clear: left;
L’élément p est en clear: left (both aurait
aussi fonctionné) car l’image est en float
left. Le titre n’est pas en clear, il coule alors
autour du float.
Positionnement : display
Cette propriété permet la mise en forme.
Valeur : block, inline, inline-block et none
display: inline-block;
Pas de retour à la ligne mais possibilité d’avoir une dimension et des marges
Les éléments en display: none ne sont pas lus et n’apparaissent donc pas
display: none;
Positionnement : position
Cette propriété permet de positionner les éléments dans la page.
Valeur : relative, absolute, fixed, static
Puis les éléments seront positionnés avec les propriétés left, right, top, bottom
Static (valeur par défaut)
Relative : positionnement normal selon left, right, top, bottom (similaire à
static). On peut utiliser la propriété z-index, pour réaliser un contexte
d’empilement.
Absolute : retire du flux, il est positionné selon son ancêtre le plus proche
positionné (par défaut le body)
Positionnement : position
Fixed : retire du flex et positionne relativement selon la zone d’affichage
(viewport)
La propriété z-index détermine l’ordre de chevauchement des éléments
positionnés. Si la valeur de z-index d’un élément est supérieure à celle d’un
autre élément, il le recouvre.
Positionnement : Flexbox
[Link]
Positionnement : Grid
[Link]
Ombre
Pour réaliser une ombre sur un élément HTML on utilise :
box-shadow: 20px 15px 5px 0px red;
La première valeur indique le décalage horizontal (offset-x)
La seconde indique le décalage vertical (offset-y)
La troisième indique l’intensité du dégradé (blur-radius)
La quatrième (optionnelle) indique la taille de l’ombre (spread-radius)
Et enfin la couleur (color)
On peut mettre des valeurs négatives
On peut ajouter le valeur inset qui permet de passer l’ombre à l’intérieur de la
bordure.
box-shadow: inset 20px 15px #000;
Ombre
Pour mettre de l’ombre sur du texte, on utilise :
text-shadow: 1px 1px 2px #000;
Transition - Transform
transition: propriété durée fct-de-transition délai
transition: background-color 2s ease-out, font-size 1s
ease-in 1s;
[Link]
Générer sur internet
transform: translateX(100px);
Animation
Animation est une propriété raccourcie composée de :
animation-name : qui provient d’une règle @keyframes
animation-duration : durée de l’animation
animation-timing-function : fct d’animation
animation-delay : délai d’animation
animation-iteration-count : nombre de répétition
animation-direction : sens de l’animation
animation-fill-mode : indique la façon dont l’animation est exécutée
Animation
@keyframes permet de définir des sequences d’animation
@keyframes grow-it{
from{
font-size: 100%;
}
to{
font-size: 300%;
}
}
Animation
@keyframes permet de définir des sequences d’animation
@keyframes grow-it{
from{
font-size: 100%;
}
75%{
font-size: 300%;
}
to{
font-size: 100%;
}
}
Animation
@keyframes move-it{
0%{
transform: translateX(0);
}
50%{
transform: translateX(100px);
}
80%{
transform: translateX(500px);
}
100%{
transform: translateX(-100px);
}
}
Animation
animation: grow-it 3s ease-in;
Responsive Design
Permet au contenu de s’adapter au support
Smartphone Tablette Desktop
375x667 (Iphone 6) 810x1080 (IPad) 1920x1080
Media querries
Permettre de modifier l’apparence en function du type d’appareil (resolution
d’écran, largeur de la zone d’affichage)
@media screen and (max-width: 667px){
p{
font-size: 50px;
}
}
screen : type de media
On ajoute la caractéristique du media
@media screen and (orientation: landscape)
Valeur : landscape ou portrait
CSS, SASS
SASS est langage qui est compilé (transformé) en CSS, on retrouve 2 syntaxes :
la syntaxe originale SASS et la syntaxe SCSS.
