Css
Css Basics
```css
Syntax
selector{
property: value;
property2: value2;
}
- Include external css file
<link rel="stylesheet" type="text/css" href="/style.css" />
- Internal styles
<style type="text/css">
div { color: #444;}
</style>
Inline styles
<tag style="property: value"> </tag>
```
Comments
```css
/*******************************************************************************
* Make your comments meaningful.
******************************************************************************/
/******************* Another shorter one *******************/
```
Box model
Selector
```css
div,p all divs and paragraphs
.classnameall elements with class
div.classnamedivs with certain classname
div#idnamediv with certain ID
#idname with ID
a:link link in normal state
a:active link in clicked state
a:hover link with mouse over it
```
Properties
```css
width: largeur <!-- not working on span or anchor -->
max-width: largeur maximum d'un élément, ne peut pas en sortir, responsive
height: hauteur; # not working on span or anchor
max-height: hauteur maximum d'un élément, ne peut pas en sortir, responsive
margin: marge extérieure
padding: marge intérieure
border: bordure, exemple : 1px solid #000000, 1px dotted #000000, 1px dashed #000000
border-box: la taille de l'élément est la taille totale, incluant la bordure et la marge, evite marging et padding
border-radius: arrondi de la bordure, exemple : 5px, 50%, 5px 10px 5px 10px
background-color: couleur de fond, exemple : #000000, #fff, rgb(0,0,0), rgba(0,0,0,0.5)
color: couleur du texte, exemple : #000000, #fff, rgb(0,0,0), rgba(0,0,0,0.5)
font-size: taille du texte, exemple : 1em, 1.2em, 12px, 12pt, 12%
font-family: famille de police exemple : Arial, Helvetica, sans-serif;
font-style: style du texte exemple : italic, normal, oblique
font-weight: épaisseur du texte exemple : bold, normal
text-align: alignement du texte exemple : center, right, left, justify, inherit, start, end
line-height: hauteur de ligne exemple : 1.4, 1.6em, 12px, 12pt, 12% (underated for paragraph)
letter-spacing: espacement entre les lettres exemple : 1px, 1em, 1%
box-shadow: ombre autour de l'élément exemple : 0 0 10px #000000, 0 0 10px 5px #000000
object-fit: redimensionnement de l'image exemple : cover, contain, fill, none, scale-down
transition: transition sur un élément exemple : all 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out
cursor: reaction du curseur sur un élément, exemple, pointer, text, zoom-in
display: type d'affichage de l'élément, exemple : block, inline, inline-block, flex
opacity: opacité de l'élément, exemple : 0.5, 0.8, 1
overflow: gestion du débordement de l'élément, exemple : hidden, scroll, auto
align-items: alignement des éléments sur l'axe vertical, exemple : flex-start, flex-end, center, baseline, stretch
justify-content: alignement des éléments sur l'axe horizontal, exemple : flex-start, flex-end, center, space-between, space-around, space-evenly
gap: espace entre les éléments, exemple : 10px, 1em, 1%
```
Colors tool
For more
Enjoy Reading This Article?
Here are some more articles you might like to read next: