diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 4398ba6..ab1a322 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,3 +1,15 @@
:root {
--vp-code-font-size: 0.9375rem;
}
+
+:where(details summary) {
+ cursor: pointer;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+.prev-next a:hover {
+ text-decoration: none;
+}
diff --git a/docs/dev/code-camp/index.md b/docs/dev/code-camp/index.md
index f9784f0..9a2fb0f 100644
--- a/docs/dev/code-camp/index.md
+++ b/docs/dev/code-camp/index.md
@@ -59,7 +59,7 @@ code-camp/
## HTML
-Le HTML est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :
+Le HTML (hyper text markup language) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :
`<` `nom de la balise` `attributs` `>`
`contenu de la balise`
`<` `nom de la balise` `/>`
@@ -126,9 +126,40 @@ Ci-dessous, quelques exemples de balises (listes non exhaustives).
<<< @/snippets/html/base.html#full
:::
-## Sélecteurs CSS
+## CSS
-### Sélecteurs de balise
+Le langage CSS (cascading style sheets) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple :
+
+- la mise en page
+- les couleurs
+- les tailles
+- la justification
+- les polices de caractères
+- etc.
+
+On parle de « règle CSS ». Une règle se construit ainsi :
+
+`sélecteur` `{` `propriété` `:` `valeur` `;` `}`
+
+::: details Afficher l'exemple
+
+<<< @/snippets/css/base.css#rule
+
+- `p` est le sélecteur
+- `color` est la propriété
+- `blue` est la valeur
+- `color: blue;` est la déclaration
+- l'ensemble forme la règle
+
+:::
+
+::: tip Astuce
+Tout est une boîte en HTML/CSS.
+:::
+
+### Sélecteurs CSS
+
+#### Sélecteurs de balise
Ils sont identiques aux balises HTML (sauf head).
@@ -136,7 +167,7 @@ Ils sont identiques aux balises HTML (sauf head).
<<< @/snippets/css/base.css#tag
:::
-### Sélecteurs de classe
+#### Sélecteurs de classe
Cible une classe définie dans le HTML avec un point.
@@ -144,7 +175,7 @@ Cible une classe définie dans le HTML avec un point.
<<< @/snippets/css/base.css#class
:::
-### Sélecteurs d’attribut
+#### Sélecteurs d’attribut
Cible un attribut spécifique avec ou sans valeur entre crochets.
@@ -152,7 +183,7 @@ Cible un attribut spécifique avec ou sans valeur entre crochets.
<<< @/snippets/css/base.css#attr
:::
-### Sélecteurs multiples et chaînés
+#### Sélecteurs multiples et chaînés
Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs.
@@ -160,14 +191,14 @@ Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs
<<< @/snippets/css/base.css#chain
:::
-## Propriétés CSS
+### Propriétés CSS
::: info
Il en existe beaucoup trop pour essayer de les résumer ici.
Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CSS/Reference)
:::
-## La cascade du style
+### La cascade du style
Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de « conflit » entre plusieurs règles.
diff --git a/docs/snippets/css/base.css b/docs/snippets/css/base.css
index eacca85..6454798 100644
--- a/docs/snippets/css/base.css
+++ b/docs/snippets/css/base.css
@@ -1,3 +1,7 @@
+// #region rule
+p { color: blue; }
+// #endregion rule
+
// #region tag
body {}
main {}
diff --git a/package.json b/package.json
index c26ed13..503e034 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
{
- "name": "vitepress-starter",
- "packageManager": "yarn@3.2.1",
- "scripts": {
- "docs:dev": "vitepress dev docs",
- "docs:build": "vitepress build docs",
- "docs:serve": "vitepress serve docs"
- },
- "devDependencies": {
- "vitepress": "^1.0.0-alpha.4",
- "vue": "^3.2.37"
- }
+ "name": "vitepress-starter",
+ "packageManager": "yarn@3.2.1",
+ "scripts": {
+ "dev": "vitepress dev docs",
+ "build": "vitepress build docs",
+ "serve": "vitepress serve docs"
+ },
+ "devDependencies": {
+ "vitepress": "^1.0.0-alpha.4",
+ "vue": "^3.2.37"
+ }
}