Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
663 views

CSS 2.1 Help Cheat Sheet

“We created the original CSS Help Sheet because we spent ages staring at ugly cheat sheets while designing beautiful sites. So we thought we’d make a Help Sheet that didn’t hurt the eyes of anyone who tried to use it. The past year, we’ve found ourselves using more and more CSS3 methods, and there was never much in the way of help out there until we decided to create a Help Sheet specifically for CSS3. We’ve kept CSS2 and CSS3 on separate Help Sheets for now as not everything in CSS3 is finalised, or works in all browsers (cough, IE). We hope you enjoy using them, and that they help you create even more memorable, usable, and stylish websites. http://www.gosquared.com/liquidicity/archives/1010

Uploaded by

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

CSS 2.1 Help Cheat Sheet

“We created the original CSS Help Sheet because we spent ages staring at ugly cheat sheets while designing beautiful sites. So we thought we’d make a Help Sheet that didn’t hurt the eyes of anyone who tried to use it. The past year, we’ve found ourselves using more and more CSS3 methods, and there was never much in the way of help out there until we decided to create a Help Sheet specifically for CSS3. We’ve kept CSS2 and CSS3 on separate Help Sheets for now as not everything in CSS3 is finalised, or works in all browsers (cough, IE). We hope you enjoy using them, and that they help you create even more memorable, usable, and stylish websites. http://www.gosquared.com/liquidicity/archives/1010

Uploaded by

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

GoSquared CSS Help Sheet

Syntax Margins + Padding Shorthand


Write styles for any element height; width; background
height
border
selector {property: value;} margin-top;
border-bottom
External Style Sheet margin-right;
width border-left
margin-bottom;
<link rel=”stylesheet” type=”text/css” border-right
margin-left;
href=”style.css” /> border-top
padding-top; font
Internal Style
padding-right; list-style
<style type=”text/css”> border padding-bottom; margin
selector {property: value} margin padding padding-left; padding
</style>
Inline Style Border Comments
<tag style=”property: value”> border-width Width of the border /* Comments */
border-style dashed; dotted; double; groove; inset;
General outset; ridge; solid; none; Pseudo Selectors

class String preceded by a full stop (.) border-color Colour of the border :hover
:active
ID String preceded by a hash (#)
Position :focus
div Formats structure or block of text :link
clear If any floating elements around the element :visited
span Inline formatting
both, left, right, none :first-line
color Foreground colour
float Floats to a specified side :first-letter
cursor Appearance of the cursor left, right, none
display block; inline; list-item; none left The left position of an element Media Types
overflow How to handle content that auto, length values [pt, in, cm, px] all
overflows its box. top The top position of an element braille
visible; hidden; scroll; auto auto, length values [pt, in, cm, px] embossed
visibility visible; hidden position static, relative, absolute handheld
print
z-index Above or below overlapping elements projection
Font auto, integer [higher numbers on top] screen
font-style italic, normal speech
font-variant normal, small-caps Background tty
background-color Colour of background tv
font-weight bold, normal, lighter, bolder, background-image Background image url(’’)
integer [100-900]
Units
background-repeat repeat, no-repeat, repeat-x, repeat-y Length
font-size Size of the font
background- Background image scrolls with element
font-family Specific font[s] to be used. %
attachment scroll, fixed em
background- (x y), top, center, bottom, left, right pt
Text position px
letter-spacing Space between letters Keywords
List
line-height Vertical space between baselines bolder
text-align Horizontal alignment list-style- Type of bullet or numbering in the list lighter
text- blink, line-through, none, type disc; circle; square; decimal; lower-roman; larger
decoration overline, underline upper-roman; lower-alpha; upper-alpha; none
Developing for
text-indent First line indentation list-style- Position of the bullet or number in a list IE6 is a lost cause.
position inside; outside
text- capitalise, lowercase, uppercase
transform list-style- Image to be used as the bullet in the list
image
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