Show Menu
Cheatography
  1. Home >
  2. Programming >

CSS3 Cheat Sheet (DRAFT) by

A Collection of CSS Basics As from w3Schools Website

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

CSS Selectors

Selector
Target
Example
Element Selector
Select a HTML element.
 
p { CSS Code Here }
Id Selector
Select HTML element by ID
 
# { CSS Code Here }
Class Selector
Select HTML element by Class
 
. { CSS Code Here }
Element + Class Selector
Select elements marked with a specific Class
 
p.par1 { CSS Code Here }
Universal Selector
Select every element in a HTML file
 
 * { CSS Code Here }
Grouping Selector
Select multiple elements at once
 
h1,p,tr { CSS Code Here }

Adding CSS Into HTML

Option
Example Code
Use Case
External CSS
 
<link rel="st­yle­she­et" href="m­yst­yle.cs­s">
Link to an external CSS file
Internal CSS
 
<st­yle­>{ CSS Code Here}<­/st­yle>
Add CSS to the 
<he­ad>
section of your HTML file
Inline CSS
 
<p style=­"­col­or:­red­;">This is a paragr­aph.</­p>
Add CSS directly into a HTML element
Note that the order of preference for selecting which CSS to run is: Inline Style has highest priority, then External and Internal Styles, and finally browser default styles.

CSS Borders

Property
Example Values
Effects
 
border­-style
 
dotted
, 
dashed
, 
solid
, 
double
, 
groove
, 
ridge
, 
inset
, 
outset
, 
none
, 
hidden
Kind of border to display. Values can be combined
 
border­-width
 
medium
, 
thick
, 
2px
, 
2in
...
Specify width of the four borders
 
border­-color
RGB, names, HSL, HEX...
Color of the borders
 
border­-{s­ide­}-{­pro­perty}
  
Specify a border­-pr­operty for a specific side
 
border­-radius
 
2px
, 
10px
...
How much the border corners should be rounded
 
border­-sp­acing
 
20px, 30px
(horiz­ontal then vertical space) ...
Set space between cells of table
 
border­-co­llapse
 
collapse
, 
separate
Whether borders of table cells should be joint or not
Note that none of the other border properties will work without specifying a 
border­-style
first.
If 
border­-color
is not set, it inherits the color of the parent.
To set border­-{p­rop­erty} for specific sides do: 
border­-{p­rop­erty}: {top} {right} {bottom} {left}
or 
border­-{p­rop­erty}: {top&­bottom} {right­&left}
or 
border­-{p­rop­erty}: {top} {right­&left} {bottom}

Border shorthand is 
border: {width} {style} {color}
.
border­-co­llapse
can be used with 
border­-sp­acing
to style tables.

CSS Margins

Property
Use Case
 
margin­-{i­ndi­vid­ual­-side}
Which border sides do you want to add margin to
Margin is the space around the border of an element. Available sides are top, bottom, left, right.
Margin values should be in px. 
margin: auto
means horizo­ntally center the element within its container, and 
margin: inherit
means inherit margin from parent element.
Shorthand 
margin
applies margin values to all four sides of a border.
When two margins border each other, they collapse into one, the largest one. (Only for top and bottom margins)

CSS Padding

Property
Use Case
 
paddin­g-{­ind­ivi­dua­l-side}
Which border side do you want to add padding to
Padding is the distance between an element and its border. Values can be in length e.g 2px, % (perce­ntage of the width of the containing element), or inherit (from parent element).
You can use the shorthand 
padding
to set padding on all sides.
If an element has a specified width, adding padding will add to the initial width.

CSS Outlines

 
 

CSS Color Options

Option
?
Example
Color names
Use the exact color name
red, green, blue etc.
RGB (Red Green Blue)
Use RGB values to produce a color
 
rgb(255, 255, 255)
produces white
RGBA (Red Green Blue Aplha)
Use RGB with an opacity (alpha)
 
rgba(123, 45, 67 0.4)
produces a color that 
40%
transp­arent
HEX
Use hexade­cimal values to produce colors
 
#ffffff
produces white
HSL (Hue Saturation Light)
Use HSL to produce colors
 
hsl(120, 50%, 100%)
produces a 50% green color
HSLA(Hue Saturation Light Alpha)
Use HSL with opacity (alpha)
 
hsla(120, 50%, 100%, 0.4)
produces a 50% green color that's 40% opaque

CSS Width, Max-Width, and Height

Property
Example Values
Use Case
 
height
 
auto
, 
length
, 
initial
, 
inherit
, 
2%
,
Set the height of an element
 
width
 
auto
, 
length
, 
initial
, 
inherit
, 
2%
,
Set the width of an element
 
max-width
 
"..."­
, 
none
Set the maximum width of an element
auto means the computer will calculate the heights and widths for you. Initial means default value. Inherit means get values from parent element.
For 
width
, use the 
%
so that it can be scaled as a percentage of the parent width. max-width allows the browser to better handle horizontal scrollbars when the available view port width becomes smaller than, say, the size of a 
div
.
When using 
max-width
, don't give an element a 
width
. The latter overrides the former.

CSS Box Model

Every HTML element has layers around it, which we call a box. Content is what's in the layers e.g text. Padding is transp­arent area around the content. Border is area enclosing content and padding. Margin is transp­arent area around the border.
Setting the 
width
and 
height
of an element with CSS, just sets the width and height of the content area. To calculate the full size of an element, you must also add 
padding
, 
borders
and 
margins
.

CSS Backgr­ounds

Property
Example Values
Effects
 
backgr­oun­d-color
 
red
, 
rgba(0, 123, 45, 0.6)
, hsl(65, 34%, 100%)
Color for the background
 
opacity
 
0.0
(0% opaque), 
1.0
(100% opaque)
Opacity for the background color
 
backgr­oun­d-image
url("{ link to image }")
Background image for your page
 
backgr­oun­d-r­epeat
 
repeat-x
(horiz­ont­ally), 
repeat-y
(verti­cally), 
no-repeat
Image should be repeated/ no image repetition
 
backgr­oun­d-p­osition
 
top
, 
bottom
, 
left
, 
right
, 
center
bottom 10px
(offset from position)
Position of the background image
 
backgr­oun­d-a­tta­chment
 
fixed
, 
scroll
Image should scroll with the page or not
 
backgr­oun­d-size
 
100%
(100% of available screen width)
Size of the background image
 
backgr­oun­d-clip
 
border-box
, 
paddin­g-box
, 
conten­t-box
How far the background (image or color) should extend within an element
 
backgr­oun­d-o­rigin
 
border-box
, 
paddin­g-box
, 
conten­t-box
Origin position of a background image
NOTE that the backgr­oun­d-{­pro­perty} properties can be combined into one shorthand like this:
backgr­ound:
{-color}
{-image}
{-repeat}
{-atta­chment}
{-posi­tion}
;

For 
backgr­oun­d-clip
, border-box makes background to extend beyond the border, paddin­g-box, background extends to the inside edge of the border, conten­t-box, background extends to the edge of the content box e.g around a paragraph. With 
backgr­oun­d-o­rigin
, it's the same dimens­ions.