Css Cheat Sheet

Download as pdf or txt
Download as pdf or txt
You are on page 1of 2

CSS Cheat Sheet

Syntax
/* Comments */
@media type {
selector {
property: value;
}
}

Box Model
Note:
media type is optional

TOP
BORDER

Embedded Style
<head>
<style type="text/css">
selector { property: value; }
</style>
</head>
External Style Sheet
<head>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>
Selectors
*

All elements

tag

All tag elements

tag *

All elements within tag

tag tag2

tag2 elements within tag

tag, tag2

All tag and tag2 elements

tag > tag2

tag2 is a child of tag

tag + tag2

tag2 preceded by tag

.class

Elements with class class

tag.class

All tags with class class

#id

Element with id id

tag#id

Tag with id id

CONTENT

PADDING
MARGIN
BOTTOM
Boxes

margin

margin-top
margin-right
margin-bottom
margin-left

padding

padding-top
padding-right
padding-bottom
padding-left

border

border-top
border-right
border-bottom
border-left

border-color

border-top-color
border-right-color
border-bottom-color
border-left-color

border-style

border-top-style
border-right-style
border-bottom-style
border-left-style

border-width

border-top-width
border-right-width
border-bottom-width
border-left-width

RIGHT

HEIGHT

Inline Style
<tag style="property: value;">

LEFT

WIDTH

Pseudo-selectors

Size and colors


Relative
sizes

em | rem | ex | ch
vw | vh | vmin | vmax | %

Absolute
sizes

cm | mm | in | px | pt | pc

Ads content before element

:first-child

Adds style to first child

Colors

:first-letter

Adds style to first character

:first-line

Adds style to first line

:active

Adds style to active element

:after

Adds content after element

:before

Hex #ff00ff
RGB rgb(255,0,255)

Positioning
position

absolute | fixed | relative |


static | inherit

float

left | right | none | inherit


Sets the offset from the edge

:focus

Adds style to focused element

:hover

Adds style when mouse is over

:link

Adds style to unvisited link

top, right,
bottom, left

:visited

Adds style to visited link

clear

left | right | both | none | inherit


I fixed the document now

display

Specifies element placing in


the document flow

overflow

visible | hidden | scroll | auto |


inherit

visibility

visible | hidden | collapse |


inherit

z-index

auto | int | inherit

Text
font-family

Specifies the font family

font-size

Specifies the font size

font-style

normal | italic | oblique | inherit

font-variant

normal | small-caps | inherit

font-weight

normal | bold | bolder | lighter |


int (100- 900) | inherit

Dimensions

color

Sets the color of text

height

auto | int | % | inherit

line-height

normal | int | % | inherit

max-height

none | int | % | inherit

text-align

left | right | center | justify |


inherit

max-height

none | int | % | inherit

textdecoration

none | underline | overline |


line-through | blink | inherit

max-width

none | int | % | inherit

min-height

int | % | inherit

text-indent

int | % | inherit

min-width

int | % | inherit

texttransform

none | capitalize | uppercase |


lowercase | inherit

width

auto | int | % | inherit

vertical
-align

int | % | baseline | sub |


super | top | text-top
middle | bottom | text-bottom | inherit

background

Format:
background (color) (image)
(repeat) (position)

white
-space

normal | nowrap | pre |


pre-line | pre-wrap| inherit

cursor

Set the type of cursor

wordspacing

normal | length | inherit

quotes

Set type of quotation


marks

Other