Learn Programming through LIVE online classrooms

CSS Cheat Sheet

Posted in CSS

CSS stands for Cascading Style Sheets

The documents written in HTML are formatted and presented using CSS. There are many features in HTML and CSS is the most popular addition to it. Rather than changing the web page itself, with CSS, only the styles need to be changed, which means fewer chances to the overall code. Further, HTML contained a  lot of repeated code for each web page, which can be put in a common file with CSS and used across web pages.

CSS contains – selector and declaration block. A declaration block consists of property-value pairs. 

Example, 

#title {color:blue; font-size: 16px; font-weight:bold}

Here, title is the selector and the declaration block is the entire thing inside the curly braces.

Saved as - .css file

CSS Cheat sheet 

1. Font

Property

Values

Example

font-style

normal/italic/inherit/oblique

font-style: normal

font-variant

normal/inherit/small-caps

font-variant: small-caps

font-weight

normal/bold/bolder/lighter/100-900/inherit

font-weight:bold

font-size

?px/?%/small/medium/large

font-size: large

font-size :5

font-family

verdana/calibri.. etc…

font-family: verdana

2. Text

Property

Values

Example

text-align

left/right/center/justify

text-align: justify;

letter spacing

normal/length/?%

letter spacing : 3%;

Text-outline

None/length/color

Text-outline: red

word-wrap

normal/length

word-wrap: normal;

direction

ltr/rtl/inherit

Direction: ltr;

text-wrap

normal/unrestricted/none

text-wrap: normal

text-indent

?%/?px

text-indent: 2%

word-spacing

normal/?%/?px

word-spacing: normal

text-transform

none/uppercase/lowercase/capitalize

text-transform: lowercase

text-emphasis

none/dot/open/filled/circle/triangle

text-emphasis: filled

text-justify

auto/distribute/inter-word

text-justify:distribute

3. User Interface

Property

Values

Example

appearance – apply platform specific styling

normal | inherit | [icon | window | desktop | work-space | document | tooltip | dialog | button | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menu | menubar | pull-down-menu | pop-up-menu | list-menu | radio-group | checkbox-group | outline-tree | range | field | combo-box | signature | password]

appearance: password;

cursor

auto | crosshair | default | pointer | move | e-resize | neresize | nw-resize | n-resize | se-resize | sw-resize | swresize | s-resize | w-resize | text | wait | help

.help

{ cursor: help;

}

nav-index - specifies the sequential navigation order of current element. Similar to tab index in html. Values can be auto or a positive number representing the navigation order. First value is 1.

auto | inherit 

number

nav-index: 1;

nav-up

auto | inherit <id> [current | root | <target-name>

auto (browser decides where to navigate to)/ id (specific ID to be navigated to)/ target_name (target frame to navigate to)/inherit (value computed based on element’s parent; root or current)

nav-up: auto;

nav-down

auto | inherit <id> [current | root | <target-name>

nav-down: #b2;

nav-left

auto | inherit <id> [current | root | <target-name>

nav-left: #b1;

nav-right

auto | inherit <id> [current | root | <target-name>

nav-right: #b2;

resize

none | both | horizontal | vertical | inherit

resize: horizontal;

icon

auto | inherit 

url

icon: url(“like.png”);

4. Backgrounds

Property

Values

Example

background-size

auto/cover/?px/?%

background-size: cover

background-image

url/none

background-image: none

background-repeat

no-repeat/repeat-x/repeat-y/repeat

background-repeat: repeat

background-attachment

fixed/scroll

background-attachment: fixed

background-color

color/transparent

background-color: white

background-position

can be any position from different combinations like top left, top right, top center. Same with bottom. can be mentioned in terms of position x-% and y-%

background-position: top-left;

background-origin

the starting point of the background

background-origin: 0;

background-clip - lets you control how much of the background image should extend beyond the element’s content or padding

content-box/padding-box/border-box/no-clip/?%/?px

background-clip: no-clip

5. Borders

Property

Values

Example

border-width

thin/thick/medium/?px

border-width: medium

border-width: 20px

border-style

none/dashed/dotted/inset/double/solid

border-style : dotted

border-color

name of the color

border-color: black

border-left:

border-left-color

border-left-width

 

border-left-color: black

border-left-width : 10px

border-right:

border-right-color

border-right-width

 

border-right-color : black

border-right-width : 15px

border-top:

border-top-width

border-top-color

 

border-top-width : 10px

border-top-color : blue

border-bottom:

border-bottom-color

border-bottom-width

 

border-bottom-color : black

border-bottom-width : 15px

border-decoration-break

maintain consistent design amongst fragments of broken element

slice/clone

border-decoration-break: slice;

border-radius

border-top-right-radius 

border-bottom-right-radius 

border-bottom-left-radius 

border-top-left-radius

?px

border-top-left-radius : 20px

border-image

?%/stretch/repeat/round/none

border-image : repeat

border-image : 12px

6. Box Model  

Property

Values

Example

float

left | right | none

float : right

height

auto length %

height : 10px

max-height

none length %

max-height : 10px

max-width

none length %

max-width : 120%

min-height

none length %

min-height : 50%

min-width

auto % length

min-width : 30px

6.1. margin 

Property

Values

Example

margin-bottom

auto/length %

margin-bottom : 20px

margin-left

auto/height %

margin-left : auto

margin-right

auto/height %

margin-right : 30%

margin-top

auto/length %

margin-top : 40mm

6.2. padding 

Property

Values

Example

padding-bottom

length %

padding-bottom : 20px

padding-top

length %

padding-top : 20px

padding-right

length %

padding-right : 20px

padding-left

length %

padding-left : 20px

display

none/inline/block/inline-block/list-item/run-in/compact/table/inline-table/table-row-group/table-headergroup/table-footer-group/table-row/table-column-group/table-column/table-cell/table-caption/ruby/ruby-base/ruby-text/ruby-base-group/ruby-text-group

display : inline

marquee-direction

forward/reverse

marquee-direction : forward

marquee-loop

infinite/integer

marquee-loop : 10

marquee-play-count

infinite/integer

marquee-play-count : 50

marquee-speed

slow/normal/fast

marquee-speed : slow

marquee-style

scroll/slide/alternate

marquee-style : scroll

overflow

visible/hidden/scroll/auto/no-display/no-content/overflow-x/overflow-y

overflow : visible

overflow-style

auto/marquee-line/marquee-block

overflow-style : auto

overflow-x

visible/hidden/scroll/auto/no-display/no-content

overflow-x : scroll

rotation

angle

rotation : 20deg

rotation-point

position (paired value off-set)

rotation-point : 50% 50%

visibility

visible/hidden/collapse

visibility: hidden

clear

left/right/both/none

clear: left

7. Template layout 

Property

Values

Example

box-align

start/end/center/base

box-align : start

box-direction

normal/reverse

box-direction : normal

box-flex

normal

box-flex : normal

box-flex-group

integer

box-flex-group : 2

box-lines

single/multiple

box-lines : single

box-orient

horizontal/vertical/inline-axis/block-axis

box-orient : inline

box-pack

start/end/center/justify

box-pack : justify

box-sizing

content-box/padding-box/border-box/margin-box

box-sizing : margin-box

tab-side

top/bottom/left/right

tab-side : left

8. Table

Property

Possible values

border-collapse

collapse/separate

empty-cells

show/hide

border-spacing

?%/?px

table-layout

auto/fixed

caption-side

top/bottom/left/right

9. Columns 

Property

Values

Example

column-count

auto/number

column-count : 10

column-fill

auto/balance/balance-all

column-fill : balance

column-gap

normal/?px

column-gap : 5px

column-rule-width

thin/medium/thick/?px

column-rule-width : medium

column-rule-width : 2px

column-rule-style

border-style – dotted/solid/hidden/double/

dashed/groove/hidden/inset/outset/inherit

column-rule-style : dotted 

column-rule-color

color

column-rule-color : black

column-width

auto/?px

column-width : 10px

column-span

1/all

column-span : all

10. Colors 

Property

Values

Example

color

inherit/color

color : green

opacity

inherit/number level

opacity : 4

11. Grid positioning 

Property

Values

Example

grid-columns

none/inherit/?px/?%/x%-y%

grid-columns : 10px

grid-rows

none/inherit/?px/?%/x%-y%

grid-rows : 40%

12. List and Markers 

Property

Values

Example

list-style-type

none/asterisks/box/check/circle/diamond/disc/hyphen/square/decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/lower-greek/lower-latin/upper-latin/hebrew/armenian/georgian/cjk-ideographic/hiragana/katakana/hiragana-iroha/katakana-iroha/footnotes

{list-style-type : circle}

{ list-style-type : upper-roman}

list-style-position

?%/?px

list-style-position : 20px

list-style-image

none/url

list-style-image : url(‘hackrhome.gif’);

marker-offset

auto/?px

marker-offset : auto

13. Animations

Property

Values

Example

animation-name

none/ID

animation-name : myfirstanim

animation-duration

time

animation-duration : 5s

animation-timing-function

ease/linear/ease-in/easeout/ease-in-out/cubic-Bezier(number, number, number, number)

animation-timing-function : linear;

animation-delay

time

animation-delay : 5ms

animation-iteration-count

inherit/number

animation-iteration-count : 5

animation-direction

normal/alternate

animation-direction :  alternate

animation-play-state

running/paused

animation-play-state : running

animation-fill-mode

None/backwards/ forwards/both/initial/inherit

animation-fill-mode : both

14. Outline

Property

Values

Example

outline-color

Color name

outline-color : green

outline-style

none/dotted/dashed/solid/double/groove/ridge/inset/outset

outline-style : solid

outline-width

thin/medium/thick/?px

outline-width : medium

outline-width : 20px

outline-offset

inherit/?px

outline-offset :  15px

Property

Values

Example

target-name

current/root/parent/new/modal/"string"

target-name : parent

target-new

tab/window/none

target-new : window

target-position

front/back/above/behind

target-position : front

16. Paged Media 

Property

Values

Example

fit

fill/hidden/meet/slice

fit : fill

fit-position

top/center/bottom or left/center/right ?%/?px

fit-position : top 35%

orphans

integer

orphans : 4

image-orientation

auto/angle (deg/rad/turn/grad)

image-orientation : 0grad

page

auto/id

page : auto

page-break-after

auto/always/avoid/left/right

page-break-after : always

page-break-before

auto/always/avoid/left/right

page-break-before: left

page-break-inside

auto/avoid

page-break-inside : avoid

size

auto/landscape/portrait/?px

Size : landscape

windows

integer

Windows : 4

17. Positioning

Property

Values

Example

bottom/right/top/left

auto/%/length

bottom: 20%

top : auto

left : 40px

right : 25px

z-index

auto/number

z-index : 2

clip

shape/auto

clip : auto

position

fixed/static/relative/absolute

position : static

18. Transitions 

Property

Values

Example

transitions-delay

time (ms/s)

transitions-delay : 20ms

transitions-duration

time (ms/s)

transitions-duration : 2s

transitions-property

none/all

transitions-property: none

transition-timing-function

ease/linear/ease-in/ease-out/ease-in-out/cubicBezier(number, number, number, number)

transition-timing-function: ease-in-out;

19. 3D / 2D Transform 

Property

Values

Example

backface-visibility

visible/hidden

backface-visibility : hidden

perspective

length | none | initial | inherit

perspective : 100px

perspective-origin

[ [?%/?px/left/center/right ] [?%/?px/top/center/bottom ]] ?px ]/[ [ [ left/center/right ] or [ top/center/bottom ] ] ?px ]

perspective-origin : 10px 30px

perspective-origin : 10% 30%

perspective-origin : left center;

transform

none/matrix/matrix3d/translate3d/tranlateX/translateY/translateZ/scale/
scale3d/scaleX/scaleY/scaleZ/rotate/rotate3d/rotateX/rotateY/rotateZ/
skewX/skewY/skew/perspective

transform: skewy(40deg);

transform: scalex(10);

transform: rotate(50deg);

transform-origin

[ [ [ ?%/?px/left/center/right ] [ ?%/?px/top/center/bottom ]? ] <length> ]/[ [ [ left/center/right ] or [ top/center/bottom ] ] ?px ]

transform-origin : 20% 50%;

transform-origin : center;

transform-origin : 20px 50px;

transform-style

flat/preserve-3d

transform-style : preserve-3d

21. Speech

Property

Values

Example

cue-before – play a sound file before an element

url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit]

.voice{cue-before:url(“music.wav”)};

cue-after - play a sound file after an element

url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit]

.voice{cue-after:url(“music.wav”)};

pause

Time

pause: 25ms

pause-before

<time> | none | x-weak | weak | medium | strong | x-strong

pause-before : 25ms

pause-after

<time> | none | x-weak | weak | medium | strong | x-strong

pause-after : 25ms

phonemes – give a phonetic pronunciation to elements

<string>

#computer {phonemes : “com\000 pu\092 ter\120”}

voice-stress

normal | strong | moderate | none | reduced

voice-stress : moderate;

voice-pitch

<frequency> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]

voice-pitch: high;

voice-pitch: 350hz;

voice-pitch: 45%

voice-duration

auto | <time>

voice-duration: auto;

voice-duration: 60s;

voice-volume

silent | [[x-soft | soft | medium | loud | x-loud] || <decibel>]

voice-volume: 25db;

voice-volume: silent;

voice-volume: soft;

voice-family

[[<name> | <generic-voice>],]* [<name> | <generic-voice>] | preserve

<generic-voice> = [<age>? <gender> <integer>?]

voice-family : “child”, “female”

voice-rate

[normal | x-slow | slow | medium | fast | x-fast] || <percentage>

voice-rate: slow;

voice-rate: 30%;

speak

none | normal | spell-out | digits | literal-punctuation | no-punctuation | inherit-number

speak : none;

caption-side – position for table caption

top | bottom | left | right | inherit

caption-side: left;

rest-before

<time> | none | x-weak | weak | medium | strong | x-strong

rest-before: medium;

rest-before: 20ms;

rest-after

<time> | none | x-weak | weak | medium | strong | x-strong

rest-after: medium;

rest-after: 20ms;

22. Pseudo-class

Property

Meaning

:active

the active element

:focus

Element in focus 

:link

an unvisited link

:enabled

an element when enabled

:disabled

an element when disabled

:hover

element when you mouse over 

:checked

Checked element

:selection 

an element currently selected or highlighted by the user

:lang

allows the author to specify a language to use in a specified element

:nth-child(n)

an element that is the nth sibling

:nth-last-child(n)

an element that is the nth sibling counting from the last sibling

:first-child

first sibling

:last-child

last sibling

:only-child

only child element

:nth-of-type(n)

an element that is the n-th sibling of its type

:nth-last-of-type(n)

n-th sibling of its type counting from the last sibling

:first-of-type

first sibling of its type

:last-of-type

an element that is the last sibling of its type

:only-of-type

only child of its type

:empty

Element with no children

:root

Root element of the document

:target

Target specified by a URL

:not(x)

element not represented by the argument ‘x’

23. Pseudo-element

Property

Meaning

Example

::first-letter

Adds special style to the first letter of a text

p::first-letter { 

  font-size: 150%;

  color: #FFF00;

}

::first-line

Adds special style to the first line of a text

p::first-letter { 

  font-size: 150%;

  color: black;

}

::before

Inserts some content before an element

p::before { 

  content: "Welcome to hackr: ";

}

::after

Inserts some content after an element

p::after { 

  content: "Thank you for watching";

}

 

Absolute Measurements

Symbol

Representation

%

percentage

ms

millisecond

s

second

in

inches

mm

millimetre

cm

centimetre

pt

point (1/72 inch)

pc

pica (12 points)

24. Angles/Time/Frequency

Unit

Representation

deg

degree

grad

gradient

rad

radian

turn

turns

ms

millisecond

s

second

Hz

hertz

khz

kilohertz

25. Relative measurement

Unit

Representation

px

pixel of the device

gd

grid defined by layout-grid

em

font size of current element

rem

font size of root element

ex

x-height of the element’s font

vh

viewport height

vm

viewport height or width (lower value)

vw

viewport width

26. Selector types

Type

Meaning

Example

class

multiple elements of various types

.class{properties of the class}

id

single element

#id{properties of the id}

universal

applicable to all elements

*{properties}

group

apply style to multiple elements

p h1 h2 {properties}

type

element of the specified type

p {properties}

tree descendant

element that is below another (any level)

# elementname h3 {properties}

child

element one below the parent element

# elementname > h3 {properties}

sibling 

adjacent

general

adjacent share the same parent and in the same immediate sequence

general share the same parent but can be in any sequence

h2 + p {properties}

h2 ~ p {properties}

27. Generated content

Property

Value

Example

bookmark-label

Content/attr/label string

bookmark-label : “This is bookmark”

bookmark-level

None/integer

bookmark-level : 2;

bookmark-target

Self/url/attr

bookmark-target : url(http://hackr.io);

counter-reset

None/number

counter-reset : 5

crop

Auto/shape

Crop : auto

display

none/inline/block/inline-block

Display : block;

content

normal | none | inhibit 

url

Content : normal

float-offset

length 

float-offset : 20px 20px

hyphenate-after

auto/integer

hyphenate-after : 15

hyphens

none/auto/manual

hyphens : manual

hyphenate-lines

no-limit/integer

hyphenate-lines : no-limit

hyphenate-resource

none/url

hyphenate-resource : url(http://hackr.io)

hyphenate-before

auto/integer

hyphenate-before : 10

hyphenate-character

auto/string

hyphenate-character : “\1234”

counter-increment

none/number

counter-increment : 10

marks

crop | cross/none

marks : crop

move-to

normal/here/id

move-to : normal

image-resolution

auto/normal/dpi

image-resolution : auto

page-policy

start/first/last

page-policy : last

quotes

none/string

quotes : “’” “’”

string-set

[id string] [id string]

string-set : header content();

text-replace

none [string string]

text-replace : “foo” “bar”

28. Line box

Property

Value

Example

alignment-adjust

auto | baseline | before-edge | text-before-edge | middle | central | after-edge | textafter-edge | ideographic | alphabetic | hanging | mathematical

length | %

alignment-adjust : middle

alignment-baseline

baseline | ise-script | beforeedge | text-before-edge | afteredge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical

alignment-baseline : hanging

drop-initial-after-align

central | middle | after-edge | text-after-edge | ideographic | alphabetic | mathematical | %

drop-initial-after-align : 30%

drop-initial-before-align

caps-height | <alignment-baseline>

drop-initial-before-align : central

drop-initial-before-adjust

before-edge | text-before-edge | central | middle | hanging | mathematical | length | %

drop-initial-before-adjust : 10px

drop-initial-before-adjust : 10%

drop-initial-before-adjust : middle

drop-initial-value

initial integer

drop-initial-value : 20

drop-initial-size

auto integer % line

drop-initial-size : 25%

baseline-shift

sub | super | length %

baseline-shift : super

dominant-baseline

baseline/hanging/middle

dominant-baseline : middle x=25 y = 50

line-stacking-shift

consider-shifts | disregard-shifts

line-stacking-shift : disregard-shifts

line-stacking-strategy

inline-line-height | block-line-height | max-height | grid-height

line-stacking-strategy: max-height

inline-box-align

Initial | last| integer 

inline-box-align : 2

inline-box-align : initial

line-height

Normal/number/ length/ %

line-height : 30%

text-height

auto | font-size | text-size | max-size

text-height : auto

vertical-align

Baseline | sub | super | top | text-top | middle | bottom | text-bottom length | %

vertical-align : middle

People are also reading:

Ramya Shankar

Ramya Shankar

A cheerful, full of life and vibrant person, I hold a lot of dreams that I want to fulfill on my own. My passion for writing started with small diary entries and travel blogs, after which I have moved on to writing well-researched technical content. I find it fascinating to blend thoughts and research and shape them into something beautiful through my writing. View all posts by the Author

Leave a comment

Your email will not be published
Cancel