All posts tagged ‘cheat sheet’

File Under: Cheat Sheets, CSS
Feb
3
2010

CSS Guide

By

What Is CSS?

CSS (cascading stylesheets) is a simple mechanism for controlling the style of a web document without compromising its structure. By separating visual design elements (fonts, colors, margins, and so on) from the structural logic of a web page, CSS gives designers the control they crave without sacrificing the integrity of the data, thus maintaining its usability in multiple environments.

In addition, defining typographic design and page layout from within a single, distinct block of code — without having to resort to image maps, <font> tags, tables, and spacer GIFs — allows for faster downloads, streamlined site maintenance, and instantaneous global control of design attributes across multiple pages.

Client-side support for the various CSS properties is uneven, even among browsers that support stylesheets.

Tags: , ,
File Under: Cheat Sheets, CSS
Feb
3
2010

CSS Examples

By

Individual Properties
Style rules

 Comments
p {font-family:Helvetica, Geneva; Of those listed, the first available font will be applied.
font-style:italic;

 Text will be rendered as italic.
font-weight:bold; Text will be rendered as bold.
font-size:10pt; Text will be rendered as 10-point type.
color:#00FFFF; Text will be rendered to the hex color value #00FFFF.
background-color:blue; The element’s background color will be rendered as blue.
background-image:url(images/foo.gif)} The element will have the background image(s) specified.
.foo {text-decoration:underlined}

 Text in the class “foo” will be underlined.
{text-transform:lowercase} Text in the class “foo” will be rendered as lowercase.
#foo

 {text-align:center} Text with the ID “foo” will be center-aligned.
{text-indent:1em} Text with the ID “foo” will be indented 1 em.
p {margin-top:12px; The element’s top margin will be 12 pixels.
margin-bottom:18px; The element’s bottom margin will be 18 pixels.
padding-right:8pt; The element’s right padding will be 8 points.
padding-left:4pt} The element’s left padding will be 4 points.
body {border-color:red; Borders will be red.
border-style:solid}

 Borders will be solid.
Block-level and replaced elements
img {width:20px; The element’s width will be 20 pixels.
height:40px; The element’s height will be 40 pixels.
float:left} Text will flow to the left of the element.
p {clear:left} Moves the element below a floating element placed on the left.
Shorthand Properties
Style rules Comments
p {font:10pt bold non-serif} Text will be rendered as 10-point bold non-serif type.
{background:black} The element’s background color will be black.
{margin:25px} All of the element’s margins will be 25 pixels.
{margin:20px 10px 20px 10px} Top and bottom margins will be 20 pixels; left and right margins will be 10 pixels.
body {padding:2px}

 Padding will be 2 pixels on each side.
{padding:8px 4px 8px 4px} Top and bottom padding will be 8 pixels; left and right padding will be 4 pixels.
{border:2px solid red} There will be a red, solid border on all sides of the element.
Position (CSS – P)
Style rules Comments
#foo

 {position:absolute; top:15pt; left:15pt} The element’s absolute position will be set 15 points from the top and 15 points from the left.
{visibility:hidden} The element’s contents will be hidden.
.foo {z-index:2} The element’s z-index will be two.
p

 {overflow:visible} The element’s contents will be rendered (visible) even if they exceed its height or width.
{overflow:hidden} The element’s contents will be clipped to its height and width, and no scrolling mechanism will be provided.
Tags: , ,