Show Menu
Cheatography

Tout le nécessaire pour faire un bon styling basique

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Basic Syntax

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

//{property: value;}

Ways to add CSS styling

External
 
<link rel="st­yle­she­et" href="s­tyl­es.c­ss­">
Internal
 
<st­yle>   h1 { color: blue; } </s­tyl­e>
Inline
 
<h1 style=­"­color: red;">H­ell­o</­h1>

Text Formatting

Font size : (absolute)
 
font-size: 16px;
Font size : (relative)
 
font-size: 1.2em
Font family
 
font-f­amily: Arial, sans-s­erif;
Font style
 
font-s­tyle: italic;
Font weight
 
font-w­eight: bold;
Text alignement
 
text-a­lign: left | center | right | justify;
Text decoration
 
text-d­eco­ration: underline | line-t­hrough | overline | none;

Colors & Background

Text color
 
color: red;
Background color
 
backgr­oun­d-c­olor: #f0f0f0;
Background image
 
backgr­oun­d-i­mage: url('i­mag­e.j­pg');
Background repeat
 
backgr­oun­d-r­epeat: no-repeat | repeat-x | repeat-y;
Background position
 
backgr­oun­d-p­osi­tion: center center;
Fixed background
 
backgr­oun­d-a­tta­chment: fixed;

Borders & Shadows

Border
 
border: 2px solid black;
Border radius
 
border­-ra­dius: 10px;
Box Shadow
 
box-sh­adow: 5px 5px 10px gray;
Text Shadow
 
text-s­hadow: 2px 2px 4px black;

Selectors

Element selector
 
p { color: blue; }
Class selector
 
.intro { color: green; }
ID selector
 
#main { font-size: 20px; }
Group selector
 
h1, h2, p { color: red; }
Child selector
 
div > p { color: blue; }
Adjacent sibling selector
 
h1 + p { color: gray; }
Universal selector
 
* { margin: 0; padding: 0; }
Attribute selector
 
input[­typ­e="t­ext­"] { border: 1px solid blue; }

Pseudo­-cl­asses & Elements

hover
 
a:hover { color: orange; }
First child
 
p:firs­t-child { font-w­eight: bold; }
First letter
 
p::fir­st-­letter { font-size: 2em; }
Before content
 
h1::before { content: "­★"; }

Box model

.

Margin
 
margin: 10px;
Padding
 
padding: 10px;
Width
 
width: 100px;
Height
 
height: 50px;
Border
 
border:2px solid block

Border Style

Position Types

static
default
 
relative
relative to itself
 
absolute
relative to parent
 
fixed
relative to viewport
 
sticky
moves within a container

Display

block
default for div,p,h1
 
inline
for span , a
 
inline­-block
inline + block
 
none
hiding element

z-index

controls layer order (it's like a 3rd dimension for the page)
 
z-inde­x:100;
(up)
 
z-inde­x:-5;
(down)

Float & Clear

Float :
 
float: left | right;
Clear
 
clear: left | right | both;