9 juin 2024
Introduction à CSS
1# CSS c'est quoi ?
Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. Les bases des CSS présentent ce qu'il faut savoir pour commencer.
2# Introduction
Nous allons voir les bases du CSS avec quelques exemples, dans d'autres formations, nous aborderons des utilisations plus poussées du CSS pour faire du placement de page, etc..
Avant de commencer, je vous invite à voir la formation Introduction à HTML pour comprendre l'utilisation du CSS.
Il y a trois choses à savoir pour implémenter du CSS dans notre page web :
1. Appeler du CSS depuis un fichier .css avec la balise <link>
2. Depuis notre fichier HTML avec des balises <style></ style> directement dans le <head></ head>
3. Sur les balises HTML directement avec l'attribue “style=”
Prenons des exemples de chaque cas :
1# —
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="monFichier.css" rel="stylesheet"/>
</ head>
<body></ body>
<html>
—
2# —
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
mon code css ici
</ style>
</ head>
<body></ body>
<html>
—
3# —
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</ head>
<body>
<p style="color:blue;">Mon texte ici sera bleu</ p>
</ body>
<html>
—
Souvent, on privilégie l'appel du CSS avec un fichier .css, en effet, on a plus de liberté et un meilleur visuel sur l'ensemble de notre code CSS.
NB : Pour mettre du commentaire dans notre fichier .css il faudra y ajouter : /* Ici je mets mon commentaire */
Regardons cela ensemble :
— style.css —
/* on va vouloir personnaliser notre paragraphe “p” */
p {
color: blue;
font-size: 12em;
}
— fin style.css —
Détaillons ça rapidement, le p est le sélecteur de la balise <p></ p>, les { } ouvrent le champ pour insérer du code CSS et les texte en bleu comme “color” sont des attributs CSS. Il est important de mettre un “ ; ” à chaque fin de ligne, cela permet de différencier les instances CSS.
Il existe énormément d'attributs CSS, nous allons en voir quelques-uns (les plus utilisés) :
color = Permet de définir une couleur à un objet, il peut prendre une couleur textuelle comme blue, green, red, ou un code héxadécimal #0000FF, #008000, #FF0000.
font-size = Permet de définir une taille de texte en pixel, pourcentage ou en em. Pour en savoir plus sur les unités CSS, je vous invite à voir du côté de W3C. L'unité souvent utilisée reste l'em.
background-color = Comme pour color, permet de définir une couleur de fond, nous utiliserons les mêmes techniques pour les couleurs que color.
box-shadow = Permet de donner une ombre à notre sélecteur. Il faudra différents paramètres pour avoir un ombrage correct, je vous redirige vers un outil qui le fera pour vous : https://html-css-js.com/ .
margin = Donne une marge extérieure à notre sélecteur, encore une fois, nous utiliserons les unités CSS pour définir sa taille (exemple: margin: 50px;)
padding = Comme son homologue margin, il donne une marge, mais interne ce coup-ci (exemple : padding: 50px;)
NB : Pour les attributs margin, padding, border etc … Nous pouvons définir son orientation avec :
margin-top | margin-right | margin-left | margin-bottom
Ou directement en une seule ligne : margin: 10px (←top) 10px (←right) 10px (←bottom) 10px (←left) ;
J'espère que vous aurez appris des choses avec cette formation, n'hésitez pas à parcourir les différents postes pour en apprendre davantage.
Mots clés:
intro css
Cours Du Dev
Recevez les dernières formations disponibles en vous inscrivant à la newsletter
Créé par arkunis