Scribd
Upload
44 views

CSS2 Help Sheet

The document is a CSS help sheet that defines various CSS properties and selectors in 3 sections. It describes how to write CSS styles, the different types of style sheets (external, internal, inline), properties for formatting text like font, color, and text alignment, properties for managing page layout like width, height, margins and padding, and other properties for backgrounds, borders, lists, and positioning elements. It also provides examples and brief descriptions of common CSS selectors and pseudo-classes.

Uploaded by

nikoladjonaj
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

CSS2 Help Sheet

The document is a CSS help sheet that defines various CSS properties and selectors in 3 sections. It describes how to write CSS styles, the different types of style sheets (external, internal, inline), properties for formatting text like font, color, and text alignment, properties for managing page layout like width, height, margins and padding, and other properties for backgrounds, borders, lists, and positioning elements. It also provides examples and brief descriptions of common CSS selectors and pseudo-classes.

Uploaded by

nikoladjonaj
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

GoSquared

Syntax
Write styles for any element
selector {property: value;}

CSS Help Sheet

Margins + Padding
height width height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;

Shorthand
background border border-bottom border-left border-right border-top font list-style margin padding

External Style Sheet


<link rel=stylesheet type=text/css href=style.css />

Internal Style
<style type=text/css> selector {property: value} </style> border margin padding

Inline Style
<tag style=property: value>

Border
border-width Width of the border border-style dashed; dotted; double; groove; inset; outset; ridge; solid; none; border-color Colour of the border

Comments
/* Comments */
Pseudo Selectors

General
class ID div span color cursor display overflow String preceded by a full stop (.) String preceded by a hash (#) Formats structure or block of text Inline formatting Foreground colour Appearance of the cursor block; inline; list-item; none How to handle content that overflows its box. visible; hidden; scroll; auto visible; hidden

Position
clear float left top position z-index If any floating elements around the element both, left, right, none Floats to a specified side left, right, none The left position of an element auto, length values [pt, in, cm, px] The top position of an element auto, length values [pt, in, cm, px] static, relative, absolute Above or below overlapping elements auto, integer [higher numbers on top]

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

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

visibility

Font
font-style font-variant font-weight font-size font-family italic, normal normal, small-caps bold, normal, lighter, bolder, integer [100-900] Size of the font Specific font[s] to be used.

Background
background-color Colour of background background-image Background image url() background-repeat repeat, no-repeat, repeat-x, repeat-y backgroundBackground image scrolls with element attachment scroll, fixed background(x y), top, center, bottom, left, right position

Units
Length % em pt px Keywords bolder lighter larger
Developing for IE6 is a lost cause.

Text
letter-spacing Space between letters line-height Vertical space between baselines text-align textdecoration text-indent Horizontal alignment blink, line-through, none, overline, underline First line indentation

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 Position of the bullet or number in a list inside; outside Image to be used as the bullet in the list

textcapitalise, lowercase, uppercase transform vertical-align Vertical alignment word-spacing Spacing between words

Download this Help Sheet now at gosquared.com/liquidicity


Original by the awesome Leslie Frank: http://lesliefranke.com/2005/10/css-cheat-sheet/

2010 Go Squared Ltd.

Put it on your wall

You might also like