CSS Cheatsheet

CSS Cheatsheet

SYNTAX
Syntax
selector {property: value;}
External Style Sheet
<link rel=”stylesheet” type=”text/css” href=”style.css” />
Internal Style
<style type=”text/css”>
selector {property: value;}
</style>
Inline Style
<tag style=”property: value”>
GENERAL
Class String preceded by a period
ID String preceded by a hash mark
div Formats structure or block of text
span Inline formatting
color Foreground color
cursor Appearance of the cursor
display
block; inline; list-item; none
overflow How content overflowing its box is handled

visible, hidden, scroll, auto
visibility
visible, hidden
FONT
font-style
Italic, normal
font-variant
normal, small-caps
font-weight
bold, normal, lighter, bolder, integer (100-900)
font-size Size of the font
font-family Specific font(s) to be used
TEXT
letter-spacing Space between letters
line-height Vertical distance between baselines
text-align Horizontal alignment
text-decoration
blink, line-through, none, overline, underline
text-indent First line indentation
text-transform
capitalize, lowercase, uppercase
vertical-align Vertical alignment
word-spacing Spacing between words
BOX MODEL
CSS Box Model height; width;
margin-top; margin-right; margin-bottom; margin-left;
padding-top; padding-right;
padding-bottom; padding-left;
BORDER
border-width Width of the border
border-style
dashed; dotted; double; groove; inset; outset;
ridge; solid; none
border-color Color of the border
POSITION
clear Any floating elements around the element?

both, left, right, none
float Floats to a specified side

left, right, none
left The left position of an element

auto, length values (pt, in, cm, px)
top The top position of an element

auto, length values (pt, in, cm, px)
position
static, relative, absolute
z-index Element above or below overlapping elements?

auto, integer (higher numbers on top)
BACKGROUND
background-color Background color
background-image Background image
background-repeat
repeat, no-repeat, repeat-x, repeat-y
background-attachment Background image scroll with the element?

scroll, fixed
background-position
(x y), top, center, bottom, left, right
LIST
list-style-type Type of bullet or numbering in the list

disc; circle; square; decimal; lower-roman;
upper-roman; lower-alpha; upper-alpha; none
list-style-position Position of the bullet or number in a list

inside; outside
list-style-image Image to be used as the bullet in a list
* The properties for each selector
are in the order they should appear when using shorthand notation.

Shorthand*


background
border
border-bottom
border-left

border-right
border-top
font
list-style
margin
padding

Comments


/* Comment */

Pseudo Selectors


:hover
:active
:focus
:link
:visited
:first-line
:first-letter

Media Types


all
braille
embossed
handheld
print
projection
screen
speech
tty
tv

Units


Length
%
em
pt
px
Keywords
bolder
lighter
larger

Named Colors and Hex Values in HTML

The following table contains a list of named colors you can use in HTML and CSS code to create a more colorful website. The colors are shown with their corresponding RGB hexcode values along with a representative color swatch.

Name Hexcode
Aqua #00FFFF
Black #000000
Blue #0000FF
Fuchsia #FF00FF
Gray #808080
Green #008000
Lime #00FF00
Maroon #800000
Navy #000080
Olive #808000
Purple #800080
Red #FF0000
Silver #C0C0C0
Teal #008080
White #FFFFFF
Yellow #FFFF00

Elements

Appearing in alphabetical order is a list of all the HTML5 elements contained in the current HTML5 specification. A brief description is included as a quick reference when looking for the perfect element.

Element Description
A Use to create hyperlinks
Abbr Use for abbreviations
address Contact information
Area Hyperlink in an image-map
article* Provides section formatting for short expository items like articles, blogs, etc.
aside* Slightly related piece of content for host page
audio * Used to add audio for playback associated with web page
b Bold text
base Base URL
bdi* Isolate text that might be formatted in a different direction from text around it
bdo Use to specify the direction of text
blockquote Block quotation
body Document body
br Line break
button Creates a button.
canvas* Use to define a page region in which drawing can occur
caption Table title
cite Cited title of a work
code Code fragment
col Column in a table
colgroup Group of table columns
command* Use to define user GUI elements
datalist* Use to create a list of input elements for pull-down menus
dd Description
del Deleted text
details* Provides additional information or controls to users on demand
dfn Defining instance
div Generic container
dl Description list
dt Term or name
em Emphasis
embed * Links to external application or interactive content
fieldset Related form controls
figcaption* Provide a caption for a figure element
figure* Standalone flow content element; may be static or dynamic
footer* Concluding information for a document section
form Defines a user-submittable form
h1 – h6 Headings
head Container for metadata about the document, scripts, and styles
header* Header for the document
hgroup* Heading group
hr Horizontal rule / thematic break
html Root element
i Italic text
iframe Nested browsing content
img Image
input Input control
ins Inserted text
kbd User input
keygen* User-accessible control to generate key pairs for security or encryption
label Caption for a form control
legend Explanatory caption
li List item
link Metadata for linking external documents
map Define an image-map
mark* Mark or highlight a run of text in one document, for reference in another document
menu List of commands
meta Metadata
meter* Define a visual indicator for some type of measurement
nav* Use to define a navigation bar or area in a web page
noscript Define content to display in case the script can’t be run
object External content
ol Ordered list
optgroup Define a group of options
output* Some kind of output from script calculation or API call
p Paragraph
param Use to provide parameters to plugins
pre Preformatted text
progress* A visual meter for task completion (progress bar)
q Quoted text
rp* Use for putting parentheses around ruby annotations
rt* Use to mark the text of a ruby annotation
ruby* Use to annotate ideographic languages like Chinese or Japanese
s Mark text as removed, with strike through formatting.
samp Sample output
script Embedded script
section* Generic document or application section
select Option selection form control
small Small text
source* Use to specify multiple sources for audio and video
span A generic text wrapper
strong Important text. Is usually formatted as bold
style Presentation information, typically CSS
sub Subscript text
summary* Summary, legend, or caption for input details information
sup Superscript text
table Table
tbody Group of table rows
td Table cell
textarea Text input area
tfoot Table footer row group
th Table header cell
thead Table heading row group
time* Value for representing date and/or time
title Document title
tr Table row
track* Specify a supplementary media track
u Underline
ul Unordered list
var Use to specify a mathematical or programming variable, or a placeholder
video * Use to playback video content in web page
wbr * Use to denote possible line break point for text flow

* New in HTML5

CSS Property Reference

The following table shows CSS properties that are supported by most browsers today, along with their allowed values.

Name Values
animation <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
animation-delay <time>
animation-direction normal | alternate | reverse | alternate reverse
animation-duration <time>
animation-fill-mode none | forwards | backwards | both
animation-iteration-count infinite | <number>
animation-name none | <identifier>
animation-play-state running | paused
animation-timing-function <timingfunction>
backface-visibility visible | hidden
background-attachment scroll | fixed | inherit
background-clip border-box | padding-box | content-box | inherit
background-color <color> | inherit
background-image <uri> | none | inherit
background-origin border-box | padding-box | content-box | inherit
background-position [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit
background-size <length> | <percentage> | auto | cover | contain
background [‘background-color’ || ‘background-image’ ||‘background-repeats’ ||‘background-attachment’ ||background-position] | inherit
border-collapse collapse | separate | inherit
border-color [ <color> ]{1,4} | inherit
border-image none | <image>
border-image-outset [‘sides’ || ‘horizontal’ || ‘vertical’ || ‘top’ || ‘bottom’ || ‘right’ || ‘left’] | inherit
border-image-repeat [‘type’ || ‘horizontal’ || ‘vertical’ || ‘stretch’ || ‘repeat’ || ’round’] | inherit
border-image-source none | <image>
border-image-slice [<number> | <percentage>]{1,4} && fill?
border-image-width [ <length> | <percentage> | <number> | auto ]{1,4}
border-radius [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
border-spacing <length> <length>? | inherit
border-style <border-style>{1,4} | inherit
border-top border-right border-bottom border-left [ <border-width> || <border-style> ||border-top-color ] | inherit
border-top-color border-right-color border-bottom-color border-left-color <color> | inherit
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius [ <length> | <percentage> ]{1,2}
border-top-style border-right-style border-bottom-style border-left-style <border-style> | inherit
border-top-width border-right-width border-bottom-width border-left-width <border-width> | inherit
border-width <border-width>{1,4} | inherit
border [ <border-width> || <border-style> ||border-top-color ] | inherit
bottom <length> | <percentage> | auto | inherit
box-shadow none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-column
break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-column
caption-side top | bottom | inherit
clear none | left | right | both | inherit
clip <shape> | auto | inherit
color <color> | inherit
columns <‘column-width’> || <‘column-count’>
column-count <number> | auto
column-fill auto | balance
column-gap <length> | normal
column-rule <‘column-rule-width’> || <‘column-rule-style’> || <‘column-rule-color’>
column-rule-color <color>
column-rule-style [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit
column-rule-width <length> | [thin | medium | thick]
column-span none | all | inherit
column-width <length> | auto
content normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
counter-increment [ <identifier> <integer>? ]+ | none | inherit
counter-reset [ <identifier> <integer>? ]+ | none | inherit
cursor [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit
direction ltr | rtl | inherit
display inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
empty-cells show | hide | inherit
float left | right | none | inherit
font-family [ [ <family-name> | <generic-family> ] [,<family-name>| <generic-family> ]* ] | inherit
font-size <absolute-size> | <relative-size> | <length> |<percentage> | inherit
font-style normal | italic | oblique | inherit
font-variant normal | small-caps | inherit
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
font [ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]?‘ font-size’ [ / ‘line-height’ ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
height <length> | <percentage> | auto | inherit
@keyframes [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
left <length> | <percentage> | auto | inherit
letter-spacing normal | <length> | inherit
line-height normal | <number> | <length> | <percentage>| inherit
list-style-image <uri> | none | inherit
list-style-position inside | outside | inherit
list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
list-style [ ‘list-style-type’ || ‘list-style-position’ ||list-style-image ] | inherit
margin-right margin-left <margin-width> | inherit
margin-top margin-bottom <margin-width> | inherit
margin <margin-width>{1,4} | inherit
max-height <length> | <percentage> | none | inherit
max-width <length> | <percentage> | none | inherit
min-height <length> | <percentage> | inherit
min-width <length> | <percentage> | inherit
opacity <number> | inherit
orphans <integer> | inherit
outline-color <color> | invert | inherit
outline-style <border-style> | inherit
outline-width <border-width> | inherit
outline [ ‘outline-color’ || ‘outline-style’ || outline-width] | inherit
overflow visible | hidden | scroll | auto | inherit
overflow-wrap normal | break-word | inherit
overflow-x visible | hidden | scroll | auto | inherit
overflow-y visible | hidden | scroll | auto | inherit
padding-top padding-right padding-bottom padding-left <padding-width> | inherit
padding <padding-width>{1,4} | inherit
page-break-after auto | always | avoid | left | right | inherit
page-break-before auto | always | avoid | left | right | inherit
page-break-inside avoid | auto | inherit
perspective none | <length>
perspective-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]
position static | relative | absolute | fixed | inherit
quotes [<string> <string>]+ | none | inherit
right <length> | <percentage> | auto | inherit
table-layout auto | fixed | inherit
text-align left | right | center | justify | inherit
text-decoration none | [ underline || overline || line-through || blink ] | inherit
text-indent <length> | <percentage> | inherit
text-transform capitalize | uppercase | lowercase | none |inherit
top <length> | <percentage> | auto | inherit
transform none | <transform-function>+
transform-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?
transform-style flat | preserve-3d
transition [ none | <single-transition-property> ] || <time> || <timing-function> || <time>
transition-delay <time>
transition-duration <time>
transition-timing-function <timing-function>
transition-property none | <single-transition-property># [ ‘,’ <single-transition-property># ]*
unicode-bidi normal | embed | bidi-override | inherit
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> |<length> | inherit
visibility visible | hidden | collapse | inherit
white-space normal | pre | nowrap | pre-wrap | pre-line |inherit
widows <integer> | inherit
width <length> | <percentage> | auto | inherit
word-spacing normal | <length> | inherit
z-index auto | <integer> | inherit
Top