Durée : entre 1h30 et 4h selon vos connaissances/besoins.
Tarif : 40€ / heure (pas de TVA)
Précision importante : le sujet des css est inépuisable et peut donner lieu à des dizaines d'heures de formation pour devenir un spécialiste très pointu. Ce n'est pas l'objet de cet article qui s'adresse à des néophytes (ou presque) en donnant quelques idées de ce que peut apporter une formation à la carte.
Il existe de nombreuses ressources sur le net pour se spécialiser sur le sujet des css.
1- Notions de base des css
- Le stockage des styles css se situe dans un fichier dédié. Il est dès lors très facile de les copier d'un site vers un autre (d'un site de test en local vers le site de production par exemple).
- En quoi une bonne gestion des css a un impact sur la qualité donc le référencement global du site.
- L'utilisation de la console Chrome/FF et ses subtilités.
2- Les sélecteurs
- Connaitre et savoir écrire les principales balises HTML (c'est très simple)
- Identifier les propriétés graphiques de ces balises HTML et comprendre comment elles sont gérées : sections, classes, Id...
- Comprendre l'ordre, la hiérarchie et la priorité, ainsi que le "poids" de chaque propriété css.
- Maîtriser quelques règles d'écriture (c'est facile et logique).
- Comment tricher avec l'exception !important mais il ne faut pas en abuser!
Sous Joomla l'utilité de l'éditeur JCE pour :
- gérer les classes css
- aligner des éléments horizontalement ET responsive (les blocs se positionneront les uns en-dessous des autres automatiquement en vue mobile), ci-dessous un exemple avec 2 blocs insérés avec une simple icône en proportion 2/3 - 1/3. Il s'agit d'une procédure ultra-simple et efficace, qu'on peut rendre encore plus performante en comprenant comment cela se traduit dans le HTML (ce n'est pas difficile).
3- Quelques modifications graphiques rapides à maîtriser
- Modifier la couleur d'une police de caractères
- Modifier la couleur de fond d'un bloc
- Modifier la taille d'un titre ou du site en entier
- Gérer les marges externes (margin) ou internes (padding) d'un bloc
- Créer un bouton pour habiller un lien
Contact pour votre projet de formation graphique - Placer une bordure autour d'un bloc avec des coins arrondis
- Gérer l'affichage d'une liste
etc...
Ci-dessous quelques astuces pour aller plus loin:
CENTRER A COUP SÛR AVEC LES 2 PROPRIETES
text-align: center
margin: x auto
Exemple sur https://www.lamaisondezelie.net/
COULEUR DE FOND ET OPACITE
background : rgba(0,0,0,0.5)
pour un effet ci-contre de 50% d'opacité
Exemple sur https://www.famillejaume.com/, en survol de l'élément ci-dessous
PLACER UNE IMAGE DE FOND
toutes les propriétés associées à background-image ou background
ci-contre 2 notions d'image de background : le dégradé ET l'image des points reliés entre-eux
Exemple sur https://www.interstices-auvergnerhonealpes.fr/
SOULIGNEMENT AJUSTÉ Á LA LARGEUR DU CONTENU ET NON DU CONTENEUR
border-bottom: 1px solid #9a1915 et
width: fit-content
si on ne fait pas appel à "width: fit-content" le soulignement va s'étendre à toute la largeur du conteneur du titre
PLACER ET STYLER UNE ICONE DE LISTE
En 2 étapes :
sur ul ne pas afficher les puces standard du HTML
puis
par li:before paramétrer les propriétés de l'icône (font-family, taille, couleur ...)
UN DESIGN DE BLOCS ELEGANT
border-radius pour faire en sorte que les coins soient moins "aigus"
box-shadow (nombreux exemples sur ce site https://getcssscan.com/css-box-shadow-examples)
Exemple sur https://www.interstices-auvergnerhonealpes.fr/
4- Conventions d'écriture des css
Apprendre les css nécessite une qualité principale : la rigueur. Celle-ci consiste à bien respecter et savoir lire les conventions d'écriture.
- Définir une variable (par exemple pour un code hexadécimal de couleur),
- Raccourcis de codes hexadécimaux de couleur
- Possibilités de raccourcis pour margin et padding
- Du css spécifique à une page
- Comment placer des commentaires
- Quelques classes courantes : even/odd pour styler les éléments pairs et impairs d'une liste, les classes bootstrap
- Guillemets ou simples cotes sont équivalents : font-family:"Trade-Gothic-Next" ou font-family:'Trade-Gothic-Next'
- Appliquer pour "width" des unités (px ou rem) ou bien des % ?
5- Propriété "position" et principe du flux
Par défaut, le flux HTML positionne les éléments les uns à côté des autres, de gauche vers la droite, tant qu'ils ont de la place dans le conteneur global. Lorsqu'il n'y a plus de place à droite, le dernier élément se positionne logiquement en-dessous. Il est possible de s'affranchir du flux par défaut et de disposer certains blocs exactement où on le souhaite, et comment on le souhaite.
Exemple 1 : position : fixed permet de positionner de façon fixe un élément, indépendamment du scroll
Exemple sur ce site https://www.interstices-auvergnerhonealpes.fr/, l'icône de connexion ne bouge pas si on scrolle vers le bas.
Exemple 2 : position : absolute permet de positionner des éléments de façon ordonnée au sein d'un conteneur. Par exemple dans l'exemple ci-joint sur la page https://www.mora-int.fr/, on aligne les boutons "EN SAVOIR +" à la même hauteur, indépendamment de la longueur du texte.
6- Propriété "display"
Très pratique cette propriété css peut permettre de forcer le flux d'affichage des éléments les uns en-dessous des autres, les uns à côté des autres.
Exemple 1:
Voici une illustration d'un ajustement pour mobile (avec "display: contents") de l'affichage par onglets sur desktop - page https://www.interstices-auvergnerhonealpes.fr/le-programme-regional/demarche-historique
Exemple 2:
Une propriété très pratique pour le responsive : "display:flex". Par exemple, associée à "flex-direction:column", les éléments seront affichés en colonne au lieu de l'alignement horizontal standard. De plus la taille des éléments sera ajustée selon la taille de l'écran.
Egalement l'alignement vertical entre 2 éléments côte à côte de hauteur différente sera géré le plus facilement avec "display:flex" et "align-items:center".
Exemple 3:
La propriété "display:none" permet dans de nombreux cas de ne pas afficher un élément inutile. Très pratique.
7- Pseudo-classes : comment les utiliser
Voici les principales pseudo-classes utilisées couramment:
- :hover pour styler un survol
- :after et :before pour styler avant ou après un élément, souvent pour placer une icône
- On peut bien sûr combiner :hover:after.
- :nth-child(n) pour styler l'élément n d'une liste
- la propriété transition pour appliquer un changement d'effet en douceur (par exemple entre le survol puis le non survol d'un bouton)
8- Gestion des affichages mobile, desktop et tailles intermédiaires
Ci-dessous une liste non exhaustive d'astuces css à connaitre pour un affichage mobile performant:
- Les pseudo-classes hidden-phone, visible-phone etc...
- Les bonnes pratiques pour un affichage optimum des images (fixes, diaporama) sur mobile.
- Comment utiliser @media.
- Les inconvénients de la propriété float sur mobile.
- Les propriétés display:flex ET flex-direction :column-reverse utiles pour mobile pour un affichage image/texte/image/texte alterné sur mobile.
9- Un exemple d'effet en survol avec les css
Eclats d'Arômes est votre partenaire idéal pour votre Evénement