Scribd
Upload
2K views1 page

Css Cheat Sheet: Shorthand

This CSS cheat sheet provides a concise reference to CSS syntax, selectors, properties and values for formatting text, boxes, tables, lists, and positioning elements. It includes shorthand properties, external and internal style sheets, box model properties, borders, fonts, text, links, backgrounds, lists, positioning and floats. Pseudo-classes and IDs, classes, tags are explained. Units and media types are defined.

Uploaded by

Petrit Kabashi
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2K views1 page

Css Cheat Sheet: Shorthand

This CSS cheat sheet provides a concise reference to CSS syntax, selectors, properties and values for formatting text, boxes, tables, lists, and positioning elements. It includes shorthand properties, external and internal style sheets, box model properties, borders, fonts, text, links, backgrounds, lists, positioning and floats. Pseudo-classes and IDs, classes, tags are explained. Units and media types are defined.

Uploaded by

Petrit Kabashi
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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">

SYNTAX

BOX MODEL
height; width; margin-top; margin-right; margin-bottom; margin-left; paddingtop; padding-right; padding-bottom; padding-left;

Comments
/* Comment */

BORDER
borderwidth Width of the border

GENERAL

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

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

border-style dashed; dotted; double; groove; inset; outset; ridge; solid;


none

bordercolor

Color of the border

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

overflow How content overflowing its box is handled

Floats to a specified side


left, right, none

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

visible, hidden, scroll, auto

visibility

visible, hidden

The left position of an element


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

FONT
font-style
Italic, normal

top position z-index

The top position of an element


auto, length values (pt, in, cm, px) static, relative, absolute

font-variant normal, small-caps font-weight bold, normal, lighter, bolder, integer (100-900) font-size Size of the font

Element above or below overlapping elements?


auto, integer (higher numbers on top)

font-family Specific font(s) to be used background-color

BACKGROUND
Background color Background image
repeat, no-repeat, repeat-x, repeat-y

TEXT

Units
Length % em pt px Keywords bolder lighter larger

background-image background-repeat

letter-spacing line-height text-align

Space between letters Vertical distance between baselines Horizontal alignment

background-attachment Background image scroll with the element?


scroll, fixed

text-decoration blink, line-through, none, overline, underline text-indent text-transform vertical-align word-spacing First line indentation
capitalize, lowercase, uppercase

background-position

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

LIST
list-styletype list-styleposition list-styleimage Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none

Vertical alignment Spacing between words

Position of the bullet or number in a list


inside; outside

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.

http://lesliefranke.com/files/reference/csscheatsheet.html[20.01.2013 10:39:31]

You might also like