Scribd
Upload
42 views

Css Cheat Sheet: Shorthand

This document is a CSS cheat sheet that provides a concise reference to CSS syntax, selectors, properties and values. It includes sections summarizing box model properties, borders, positioning, fonts, text, backgrounds, lists and other CSS topics. CSS syntax, selectors like classes, IDs and pseudo-classes are defined. Common properties for fonts, text, backgrounds, borders and positioning are listed along with their possible values.

Uploaded by

Francisco Hernández Dávila
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Css Cheat Sheet: Shorthand

This document is a CSS cheat sheet that provides a concise reference to CSS syntax, selectors, properties and values. It includes sections summarizing box model properties, borders, positioning, fonts, text, backgrounds, lists and other CSS topics. CSS syntax, selectors like classes, IDs and pseudo-classes are defined. Common properties for fonts, text, backgrounds, borders and positioning are listed along with their possible values.

Uploaded by

Francisco Hernández Dávila
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

11/02/13

CSS Cheat Sheet

CSS CHEAT SHEET


Shorthand*
background border border-bottom border-left border-right border-top font list-style margin padding 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"> borderw idth borderstyle bordercolor

SYNTAX

BOX MODEL
height; w idth; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; paddingbottom; padding-left;

Comments
/* Comment */

BORDER
Width of the border
dashed; dotted; double; groove; inset; outset; ridge; solid; none

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

GENERAL
Class ID div span color cursor display String preceded by a period String preceded by a hash mark Formats structure or block of text Inline formatting Foreground color Appearance of the cursor
block; inline; list-item; none

Color of the border

POSITION
clear float left top Any floating elements around the element?
both, left, right, none

Floats to a specified side


left, right, none

Media Types
all braille embossed handheld print projection screen speech tty tv

overflow How content overflow ing its box is handled


visible, hidden, scroll, auto

The left position of an element


auto, length values (pt, in, cm, px)

visibility

visible, hidden

The top position of an element


auto, length values (pt, in, cm, px)

FONT
font-style Italic, normal fontvariant fontw eight
normal, small-caps bold, normal, lighter, bolder, integer (100-900)

position static, relative, absolute z-index Element above or below overlapping elements?
auto, integer (higher numbers on top)

BACKGROUND
background-color background-image background-repeat backgroundattachment background-position Background color Background image
repeat, no-repeat, repeat-x, repeat-y

Units
Length % em pt px Keyw ords bolder lighter larger

font-size Size of the font fontfamily Specific font(s) to be used

TEXT
letterspacing line-height text-align textdecoration text-indent texttransform verticalalign w ordSpace betw een letters Vertical distance betw een baselines Horizontal alignment
blink, line-through, none, overline, underline

Background image scroll w ith the element?


scroll, fixed (x y), top, center, bottom, left, right

LIST
list-style- Type of bullet or numbering in the list type disc; circle; square; decimal; lower-roman; upperroman; lower-alpha; upper-alpha; none

First line indentation


capitalize, lowercase, uppercase

list-style- Position of the bullet or number in a list position inside; outside list-style- Image to be used as the bullet in a list image

Vertical alignment Spacing betw een w ords

lesliefranke.com/files/reference/csscheatsheet.html

1/2

11/02/13

CSS Cheat Sheet

spacing
* The properties for each selector are in the order they should appear when using shorthand notation.

lesliefranke.com/files/reference/csscheatsheet.html

2/2

You might also like