Academy numérique Tristan Rogez.

ACADEMY Numérique

Les langages HTML et CSS.

HTML

Le HTML c'est quoi ?

HTML est un langage de balisage qui définit la structure du contenu. Un document HTML est une suite d’éléments utilisés pour encadrer différentes parties du contenu afin de les faire apparaître ou se comporter d’une certaine façon. Les balises autour du contenu permettent de transformer une image ou un texte pour obtenir un lien vers une autre page, de créer des titres, etc. 

Exemple de code HTML :

<p> Mon chat est très grincheux</p>

Les parties principales de notre élément sont :

  1. La balise ouvrante : celle-ci se compose du nom de l’élément (ici p), entre deux chevrons (le premier ouvrant < et le second fermant >). Cela indique le début de l’élément, ici cela indique où le paragraphe commence.
  2. La balise fermante : à la différence de la balise ouvrante, une barre oblique (slash) est ajoutée avant le nom de l’élément. Cela indique la fin de l’élément. Dans notre exemple, c’est l’endroit où le paragraphe s’arrête. Oublier cette balise fermante est une erreur qu’on fait souvent au début et qui peut déclencher des effets étranges et indésirables.
  3. Le contenu : le contenu de l’élément. Pour cet exemple, il s’agit uniquement de texte.
  4. L’élément : l’ensemble formé par la balise ouvrante, la balise fermante et le contenu constitue l’élément.

Structure basique d'une page HTML.

Voici le code d’une page basique en HTML. On y retrouve le code minimal pour créer une page web en HTML.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Ma page de test</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Mon image de test" />
  </body>
</html>

Voici ce qu’on y trouve :

<!DOCTYPE html>

Le « doctype ». Il s’agit d’un préambule obligatoire. Aux débuts de HTML (en 1991/1992), les doctypes servaient de liens vers des ensembles de règles qu’une page HTML devait suivre pour être considérée valides (avec des fonctionnalités de vérifications d’erreur et autres). Aujourd’hui, ils ne sont plus utilisés ainsi et ce marqueur sert uniquement au bon comportement du document. C’est tout ce qu’il y a à savoir là-dessus pour le moment.

<html></html>

L’élément <html> est celui qui contient tout le reste de la page. On l’appelle aussi l’élément racine. Il contient ici l’attribut lang qui indique la langue principale du contenu du document.

<head></head>

L’élément <head> sert de conteneur pour tout ce qu’on veut inclure dans une page HTML qui n’est pas du contenu à afficher à l’écran. Cela inclut les mots-clés et une description de la page destinée aux moteurs de recherches, les liens vers le CSS qui mettra en forme notre contenu, les déclarations pour les jeux de caractères utilisés, etc.

<meta charset="utf-8">

Cet élément définit le jeu de caractères utilisé pour le document, ici UTF-8 (qui inclut la plupart des caractères pour un grand nombre de langues écrites). Ce jeu de caractères permettra de gérer n’importe quel contenu textuel placé dans le document. Inclure cette information ne coûte rien et permet d’éviter des problèmes d’encodage par la suite.

<meta name="viewport" content="width=device-width">

Cet élément viewport permet que la page soit affichée avec la bonne largeur par rapport à la zone d’affichage, empêchant les navigateurs sur mobile d’afficher la page plus largement que la zone d’affichage avant de la réduire.

<title></title>

L’élément <title> définit le titre de la page, qui apparaîtra dans l’onglet sur lequel la page est chargée. Il sert aussi à décrire la page lorsqu’on l’ajoute aux favoris ou qu’elle est listée dans les résultats d’un moteur de recherche.

<body></body>

L’élément <body> contient tout le contenu qu’on veut afficher aux utilisatrices et utilisateurs web lorsqu’ils visitent la page, que ce soit du texte, des vidéos, des jeux, des pistes audio, etc.

 

La page d’accueil d’un site internet se nomme toujours « index.html ». Cette page est essentielle car c’est elle qui accueille l’utilisateur lorsqu’il accède à votre site internet.

HTML sémantique vs non-sémantique.

Le HTML sémantique, également connu sous le nom de balisage sémantique, désigne l’utilisation de balises HTML qui transmettent la signification – ou la valeur sémantique – du contenu qu’elles renferment.

En ajoutant des balises sémantiques HTML à vos pages, vous fournissez des informations supplémentaires qui définissent les rôles et l’importance relative des différentes parties de votre page.

Au contraire, le HTML non sémantique utilise des balises qui ne véhiculent pas directement de sens.

Vous privilégierez autant que possible le HTML sémantique dans vos travaux, celui-ci ayant des bénéfices en terme de structure mais aussi de SEO.

Les balises HTML.

Pour modéliser et afficher du contenus dans une page HTML, on utilisera donc des balises. Voici une liste des balises principales à utiliser.

On distingue deux types de balises HTML, les balises générales et les balises dites orphelines.

Les balises générales sont composées d’une balise ouvrante et d’une balise fermante. Les balises orphelines sont uniquement  composées d’une balise ouvrante.

 

Exemple balise générale :

<p> Ceci est un paragraphe </p>

Exemple de balise orpheline :

<img src="#"/>

Racine de sectionnement.

Élément (balise) Description

<body>

Représente le contenu principal du document HTML. Il ne peut y avoir qu’un élément <body> par document.

Sectionnement du contenu.

Élément (balise) Description

<header>

L’élément HTML <header> représente du contenu introductif, généralement un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d’autres éléments tels qu’un logo, un formulaire de recherche, le nom d’auteur, etc.

<main>

Représente le contenu majoritaire du corps du document. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d’une application.

<nav>

Représente une section d’une page ayant des liens vers d’autres pages ou des fragments de cette page. Autrement dit, c’est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).

<section>

Représente une section générique d’un document, par exemple un groupe de contenu thématique. Une section devrait généralement commencer avec un titre.

<footer>

Représente le pied de page de la section ou de la racine de sectionnement la plus proche. Un élément <footer> contient habituellement des informations sur l’autrice ou l’auteur de la section, les données relatives au droit d’auteur (copyright) ou les liens vers d’autres documents en relation.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Les éléments <h1> à <h6> représentent six niveaux de titres dans un document, <h1> est le plus important et <h6> est le moins important.

Contenu textuel

Élément (balise) Description

<blockquote>

Indique que le texte contenu dans l’élément est une citation longue. Le texte est généralement affiché avec une indentation. Une URL indiquant la source de la citation peut être donnée grâce à l’attribut cite tandis qu’un texte représentant la source peut être donné via l’élément <cite>.

<div>

Un conteneur générique du contenu du flux. Il n’a aucun effet sur le contenu ou la mise en page tant qu’il n’est pas mis en forme d’une manière quelconque à l’aide de CSS.

<hr>

Représente un changement thématique entre des éléments de paragraphe (par exemple, un changement de décor dans un récit, un changement de sujet au sein d’une section).

<li>

Représente un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée (<ol>), une liste non ordonnée (<ul>) ou un menu (<menu>). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu’un nombre ou une lettre.

<ol>

Représente une liste ordonnée. Les éléments d’une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n’est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété list-style-type.

<p>

Représente un paragraphe de texte. Les paragraphes sont généralement représentés comme des blocs et séparés par un espace vertical, leur première ligne est également parfois indentée. Les paragraphes sont des éléments blocs.

<br>

Permet de faire un saut de ligne entre deux éléments HTML.

Sémantique du texte.

Élément (balise) Description

<a>

Avec son attribut href, il crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu’une URL peut adresser. Le contenu de chaque élément <a> doit indiquer la destination du lien. Si l’attribut href est présent, appuyer sur la touche entrée en se concentrant sur l’élément <a> l’activera.

<a href= »https://www.google.com/ »> cliquez ici pour lancer Google </a>

<b>

Permet d’attirer l’attention du lecteur sur un contenu qui n’a pas, pour autant, d’importance significative. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c’est la propriété CSS font-weight qu’il faut utiliser. Si l’élément est d’une importance particulière, on utilisera l’élément HTML <strong>.

<b> Ceci est un texte en gras. </b>

<i>

Représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l’expression des pensées d’un personnage. Le contenu de cet élément est généralement affiché en italique.

<i> Ceci est un texte en italique. </i>

<span>

Un conteneur générique en ligne (inline) pour les contenus phrasés. Il ne représente rien de particulier. Il peut être utilisé pour grouper des éléments afin de les mettre en forme (grâce aux attributs class ou id et aux règles CSS) ou parce qu’ils partagent certaines valeurs d’attribut comme lang. Il doit uniquement être utilisé lorsqu’aucun autre élément sémantique n’est approprié. <span> est très proche de l’élément <div>, mais l’élément <div> est un élément de bloc, alors que <span> est un élément en ligne.

<span>Ceci est un texte normal et <i> ceci est un texte en italique dans un span</i></span>

<strong>

Indique que le texte a une importance particulière ou un certain sérieux voire un caractère urgent. Cela se traduit généralement par un affichage en gras.

<strong>Ceci est un texte fort, mit en avant dans une balise strong</strong>

Images et médias.

Élément (balise) Description

<audio>

Utilisé afin d’intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l’attribut src ou l’élément <source> : le navigateur choisira celle qui convient le mieux. Il peut également être la destination de médias diffusés en continu, en utilisant un MediaStream.

<audio controls src="/media/cc0-audio/t-rex-roar.mp3">
<a href="/media/cc0-audio/t-rex-roar.mp3"> Download audio </a>
</audio>

<img>

L’élément HTML <img> permet d’intégrer une image dans un document.

<img src="images/photo.jpg" alt="texte de la photo" />

<video>

Intègre un contenu vidéo dans un document.

<video controls>

<source src="/videos/flower.mp4" type="video/mp4" />

</video>

<svg>

Utilisé pour intégrer des fragments de code SVG à l’intérieur d’un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres viewport et système de coordonnées.

<img src="images/merci.svg" alt="Affichage d'un fichier SVG en image" />

<iframe>

Représente un contexte de navigation imbriqué qui permet en fait d’obtenir une page HTML intégrée dans la page courante.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2548.269993051757!2d2.800792176548717!3d50.30555337156485!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47dd47f9f46d1947%3A0xee9f8357cc4e88f8!2sAdapeco%20Arras!5e0!3m2!1sfr!2sfr!4v1694216742706!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Scripts.

Élément (balise) Description

<script>

Utilisé pour intégrer ou faire référence à un script exécutable. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple WebGL).

<script  src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

Formulaires.

Élément (balise) Description

<button>

L’élément <button> représente un bouton cliquable, utilisé pour soumettre des formulaires ou n’importe où dans un document pour une fonctionnalité de bouton accessible et standard. Par défaut, les boutons HTML sont présentés dans un style ressemblant à la plate-forme d’exécution de l’agent utilisateur, mais vous pouvez modifier l’apparence des boutons avec CSS.

<button  type="button">Add to favorites</button>

<form>

Représente un formulaire, c’est-à-dire une section d’un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

<input>

L’élément HTML <input> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l’utilisatrice ou l’utilisateur de saisir des données. Les saisies possibles et le comportement de l’élément <input> dépendent fortement de la valeur indiquée dans son attribut type et de ses autres attributs. Il existe différents contrôles pour la saisie, qui dépendent de l’appareil utilisé et de l’agent utilisateur.

<label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" />

<label>

Représente une légende pour un objet d’une interface utilisateur. Il peut être associé à un contrôle en utilisant l’attribut for ou en plaçant l’élément du contrôle à l’intérieur de l’élément <label>. Un tel contrôle est appelé contrôle étiqueté par l’élément <label>.

<label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" />

<select>

Représente un contrôle qui fournit une liste d’options parmi lesquelles l’utilisateur pourra choisir.

<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>

<textarea>

Représente un contrôle qui permet d’éditer du texte sur plusieurs lignes.

<label for="story">Tell us your story:</label>

<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>

Balises à utiliser dans le HEAD.

Élément (balise) Description

<title>

L’élément <title> définit le titre du document (qui est affiché dans la barre de titre du navigateur ou dans l’onglet de la page). Cet élément ne peut contenir que du texte, les balises qu’il contiendrait seraient ignorées.

<title> Titre de la page </title>

<link>

L’élément HTML <link> définit la relation entre le document courant et une ressource externe. Cet élément peut être utilisé pour définir un lien vers une feuille de style, vers les icônes utilisées en barre de titre ou comme icône d’application sur les appareils mobiles.

<link rel=« stylesheet » href=« css/style.css »>

<style>

L’élément HTML <style> contient des informations de mise en forme pour un document ou une partie d’un document. Par défaut, les instructions de mise en forme écrites dans cet élément sont écrites en CSS.

<style>

body{background-color:black;color:white;}

</style>

<meta>

L’élément HTML <meta> représente toute information de métadonnées qui ne peut pas être représentée par un des éléments (<base>, <link>, <script>, <style> ou <title>)

<meta name="description" content="Description de la page">

<script>

L’élément HTML <script> est utilisé pour intégrer ou faire référence à un script exécutable. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple WebGL).

Les scripts sans attribut async ou defer sont chargés et exécutés immédiatement avant que le navigateur continue l’analyse de la page.

<script src=« scripts/main.js »></script>

Cliquez ici pour découvrir toutes les balises à ajouter dans le HEAD.

Toutes les balises HTML

CSS

Le CSS c'est quoi ?

CSS signifie Feuilles de Style en Cascade. CSS décrit comment les éléments HTML doivent être affichés à l’écran, sur papier ou sur d’autres supports.

CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple, changer la couleur et la taille des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple, transformer un texte affiché sur une colonne en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des animations. N’hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.

 

Exemple de code CSS :

body { 
  background-color: lightblue; 
}

 

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

La syntaxe du CSS.

CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d’éléments particuliers dans la page. Par exemple, « Je veux que le titre principal de ma page s’affiche en rouge en gros caractères. »

Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :

h1 {
  color: blue;
  font-size: 12px;
}

La règle commence par un sélecteur, l’élément HTML mis en forme. Ici, le style s’applique aux titres de niveau 1 (<h1>).

Suivent une paire d’accolades { } à l’intérieur desquelles on trouve une ou plusieurs déclarations, sous la forme d’une paire propriété: valeur. Chaque paire précise une propriété de l’élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque propriété définie par CSS correspondent différentes valeurs possibles. Dans l’exemple, la propriété color peut prendre différentes valeurs de type <color>. La propriété font-size accepte différentes tailles comme valeurs.

La feuille de style CSS.

Le code CSS s’écrit dans un document appelé feuille de style en cascade, qui utilise l’extension de fichier .CSS (exemple : style.css).

Cette feuille de style comporte toutes les règles CSS à appliquer à un document HTML.

Pour appliquer les différentes règles écrites dans une feuille de style, il convient de l’appeler depuis le HEAD du document HTML.

Pour l’appeler, on utilise la ligne de code suivante :

<link rel="stylesheet" href="css/styles.css" />

Cet élément <link> indique au navigateur la présence d’une feuille de style, grâce à l’attribut rel ; la valeur de l’attribut href donne la localisation du fichier CSS.

La valeur de l’attribut href correspond à l’emplacement de la feuille de style. Ici, on rentre dans le dossier « css » puis on appelle le fichier « style.css » (« nom_du_dossier/nom_du_fichier.css »).

 

Les sélecteurs.

Les sélecteurs définissent les éléments sur lesquelles s’applique un ensemble de règles CSS. Ils permettent de définir sur quels éléments doivent s’appliquer les modifications d’apparences en CSS.

Les sélecteurs de type.

Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu’un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.

/* Cibler tous les éléments <a>>.*/
a {
  color: red;
}

Les sélecteurs de classe.

Les sélecteurs de classe CSS permettent de cibler des éléments d’un document en fonction du contenu de l’attribut class de chaque élément.

/* Cible tous les éléments ayant la classe "spacious" */
.spacious {
  margin: 2em;
}

/* Cible tous les éléments <li> ayant la classe "spacious" */
li.spacious {
  margin: 2em;
}

/* Cible tous les éléments <li> ayant une classe qui */
/* contient à la fois "spacious" et "elegant"        */
li.spacious.elegant {
  margin: 2em;
}

Les sélecteur d'identifiant.

Un sélecteur d’identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut id. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l’élément soit effectivement ciblé.

/* L'élément avec l'identifiant id="demo" */
#demo {
  border: red 2px solid;
}

Le sélecteur universel.

L’astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n’importe quel type.

* {
  color: green;
}

Le sélecteur d'attribut.

Les sélecteurs d’attribut permettent de cibler un élément selon la présence d’un attribut ou selon la valeur donnée d’un attribut.

/* Les éléments <a> avec un attribut title */
a[title] {
  color: purple;
}

/* Les éléments <a> avec un href qui correspond */
/* à "https://example.org" */
a[href="https://example.org"]
{
  color: green;
}

/* Les éléments <a> dont href contient "example" */
a[href*="example"] {
  font-size: 2em;
}

/* Les éléments <a> dont href finit par ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* Les éléments <a> dont l'attribut class contient le mot logo */
/* comportement identique à a.logo */
a[class~="logo"] {
  padding: 2px;
}

Les propriétés basiques CSS.

Polices, tailles et décorations.

Propriété Description et valeurs possibles

font-family

Indiquer les noms de polices possibles par ordre de préférence :

 
font-family: police1, police2, police3;

Si le visiteur a la police 1, il l’utilisera. Sinon, il regarde s’il a la police 2, puis la police 3 etc.
Utilisez des guillemets si le nom de la police comporte des espaces. Essayez de toujours mettre comme dernière police possible « serif » ou « sans-serif ».

 
font-family: "Arial Black", Arial, Verdana, serif;

@font-face
 

Permet de déclarer une nouvelle police, qui sera téléchargée sur l’ordinateur de vos visiteurs.

 
@font-face {
    font-family: 'MaSuperPolice';
    src: url('MaSuperPolice.eot') format('eot'),
         url('MaSuperPolice.woff') format('woff'),
         url('MaSuperPolice.ttf') format('truetype'),
         url('MaSuperPolice.svg') format('svg');
}

font-size
 Indiquez la taille du texte.
Plusieurs unités sont possibles :
  • px (pixels)
  • % (pourcentage, 100% = normal)
  • em (taille relative, 1.0 = normal)
  • ex (taille relative à la hauteur de la lettre « x ». 1.0 = normal)
  • nom de taille :
    • xx-small : très très petit
    • x-small : très petit
    • small : petit
    • medium : moyen
    • large : grand
    • x-large : très grand
    • xx-large : très très grand

font-weight

bold : gras
bolder : plus gras
lighter : plus fin
normal : pas gras (par défaut)

font-style
italic : italique
oblique : autre façon de mettre en italique
normal : normal (par défaut)

text-decoration

underline : souligné
overline : ligne au-dessus
line-through : barré
blink : clignotant
none : normal (par défaut)

text-transform

uppercase : tout mettre en majuscules
lowercase : tout mettre en minuscules
capitalize : début des mots en majuscules
none : normal (par défaut)

Pour découvrir les différentes unités de mesures à utiliser en CSS, cliquez-ici.

 

Pour appeler une police depuis Google Fonts, on utilise la propriété @import. Cliquez ici pour découvrir la procédure.

Alignement.

Propriété Description et valeurs possibles

text-align

Pour aligner des éléments HTML.

left : à gauche (par défaut)
center : centré
right : à droite
justify : texte justifié (prend toute la largeur de la page)

h1{text-align:center;}

line-height

Pour régler l’espacement des lignes de texte.

Indiquer une valeur en pixels (px) ou en pourcentage (%).

h1{line-height:10px;}

white-space

normal : le passage à la ligne est automatique (par défaut)
nowrap : pas de passage à la ligne automatique, à moins qu’une balise HTML comme <br /> ne soit présente.
pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise <pre>)

font-weight

Pour personnaliser la graisse des éléments.

bold : gras
bolder : plus gras
lighter : plus fin
normal : pas gras (par défaut)

h1{font-weight:bold;}

font-style
Pour personnaliser le style des textes html.
 
italic : italique
oblique : autre façon de mettre en italique
normal : normal (par défaut)
h1{font-style:italic;}

text-decoration

Pour décorer le texte.

underline : souligné
overline : ligne au-dessus
line-through : barré
blink : clignotant
none : normal (par défaut)

h1{text-decoration:underline;}

text-transform

Pour transformer l’apparence des textes.

uppercase : tout mettre en majuscules
lowercase : tout mettre en minuscules
capitalize : début des mots en majuscules
none : normal (par défaut)

h1{text-transform:uppercase;}

Couleurs et fonds de couleurs.

Image de fond.

Propriété Description et valeurs possibles

background-image

Indiquer l’url de l’image (notation absolue ou relative)

1
2
background-image:url("images/fond.png"); /* Notation relative */
background-image:url("http://www.monsite.com/images/fond.png"); /* Notation absolue */


Il est possible de combiner plusieurs images de fond, en séparant les déclarations par des virgules.

background-attachment

fixed : le fond reste fixe quand on descend plus bas sur la page
scroll : le fond défile avec le texte (par défaut)

background-repeat

repeat : le fond se répète (par défaut)
repeat-x : le fond ne se répète que sur une ligne, horizontalement
repeat-y : le fond ne se répète que sur une colonne, verticalement
no-repeat : le fond ne se répète pas, il n’est affiché qu’une fois

background-position

2 façons de faire :

En notant une distance en px ou %, par rapport au coin en haut à gauche.

1
background-position:50px 200px; /* 50 px à droite, 200px en bas */

En utilisant des valeurs prédéfinies, une pour la verticale et une pour l’horizontale :
top : en haut, verticalement
center : au milieu, verticalement
bottom : en bas, verticalement

left : à gauche, horizontalement
center : au centre, horizontalement
right : à droite, horizontalement

 

1
background-position : bottom right; /* en bas à droite */
Propriété Description et valeurs possibles

color

ndiquer une couleur avec l’une des méthodes suivantes :

En tapant le nom de la couleur en anglais (black, blue, green, white, red…).
En indiquant la couleur en hexadécimal (#CC48A1)
En indiquant la couleur en RGB : rgb (128, 255, 0)

background-color

Même fonctionnement que color. Cela définit cette fois la couleur de fond du texte

Dimensions.

Propriété Description et valeurs possibles

width

Détermine la largeur d’un élément en px, vw ou %.

width:100%;

width:500px;

height

Détermine la hauteur d’un élément en px, vh ou %.

height : 100% ;

height : 1000px ;

min-width

Détermine la largeur minimale d’un élément en px, vw ou %.

min-width : 1000px ;

min-width : 100vh ;

max-width

Détermine la largeur maximale d’un élément en px, vw ou %.

min-height

Détermine la hauteur minimale d’un élément en px, vh ou %.

max-height

Détermine la hauteur maximale d’un élément en px, vh ou %.

Marges extérieures (margin).

Propriété Description et valeurs possibles

margin-top

Détermine la marge extérieure du haut d’un élément en px, em, %…

margin-left

Détermine la marge extérieure de gauche d’un élément en px, em, %…

margin-right

Détermine la marge extérieure de droite d’un élément en px, em, %…

margin-bottom

Détermine la marge extérieure du bas d’un élément en px, em, %…

margin

Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

  • 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite
  • 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite
  • 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas
  • 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.

Marges intérieures (padding).

Propriété Description et valeurs possibles

padding-top

Détermine la marge intérieure du haut d’un élément en px, em, %…

padding-left

Détermine la marge intérieure de gauche d’un élément en px, em, %…

padding-right

Détermine la marge intérieure de droite d’un élément en px, em, %…

padding-bottom

Détermine la marge intérieure du bas d’un élément en px, em, %…

padding

Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

  • 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite
  • 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite
  • 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas
  • 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.

Affichage.

Propriété Description et valeurs possibles

display
 none : l’élément ne sera pas affiché
block : l’élément devient de type « block » (bloc, comme <p>)
inline : l’élément devient de type « inline » (en ligne, comme <strong>)
inline-block : l’élément est affiché comme un inline mais peut être redimensionné comme un block.
list-item : l’élément devient de type « élément de liste à puce » (comme <li>)

visibility

hidden : masqué
visible : visible (par défaut)

display:none; fait complètement disparaître l’élément, tandis que visibility:hidden; masque l’élément, qui continue quand même à prendre de la place sur l’écran.

overflow
 visible : tout l’élément sera affiché (par défaut).
hidden : l’élément sera coupé s’il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte coupée.
scroll : tout comme hidden, l’élément sera coupé s’il dépasse les limites. Toutefois, cette fois le navigateur ajoutera des barres de défilement pour qu’on puisse voir la suite du texte.
auto : c’est le navigateur qui décide d’ajouter des barres de défilement ou pas en fonction des cas. Bien souvent, utiliser cette valeur revient à utiliser la valeur « scroll ».

Positionnement.

Propriété Description et valeurs possibles

float

left : flottant à gauche
right : flottant à droite
none : pas de flottant (par défaut)

position

absolute : position absolue par rapport au coin en haut à gauche
fixed : position fixe (fonctionne comme la position absolue). L’élément reste à sa position même quand on descend plus bas dans la page.
relative : position relative, par rapport à la position « normale » de l’élément
static : positionnement normal (par défaut)

top, bottom, left, right

Position de l’élement par rapport au haut, au bas, à gauche ou à droite de l’écran. A déterminer avec une valeur en px, en em, en %, en vh ou en vw.

z-index

En cas de positionnement absolu par exemple, si 2 éléments se chevauchent, z-index permet d’indiquer quel élément doit être affiché au-dessus de l’autre.
Indiquez un nombre. Plus ce nombre est élevé, plus l’élément sera affiché en avant.

Par exemple, si vous avez 2 éléments positionnés en absolus avec un z-index de 10 pour l’un et de 20 pour l’autre, c’est celui qui a un z-index de 20 qui sera affiché par-dessus.
Toutes les propriétés CSS

BON A SAVOIR

Arborescence d'un projet HTML et CSS.

Pour tout type de projet de site internet en HTML et CSS, il convient de créer un dossier adapté afin d’organiser les différents éléments du projet ((arborescence d’un projet web).

1/ créez un dossier racine,portant le nom de votre projet web.
2/ dans ce dossier, créez les dossiers : css, images et scripts.
3/ dans le dossier css, créez un fichier style.css
4/ dans le dossier images, organisez toutes les images que vous utiliserez dans votre projet.
5/ dans le dossier scripts, organisez tous les fichiers Javascripts de votre projet.

6/ créez le fichier index.html, qui sera la page d’accueil de votre site internet dans le dossier racine.

7/ créez ensuite toutes les autres pages de votre site dans ce même dossier racine.

 

Télécharger un projet HTML vierge
Retour en haut