CSS Shorthand Cheat Sheet by Example
CSS Shorthand Cheat Sheet by Example
com
Margin & Padding
#div { #div { #div { #div {
margin-top: 0; margin-top: 10px; margin-top: 0; margin-top: 50px;
margin-right: 5px; margin-right: 20px; margin-right: auto; margin-right: 50px;
margin-bottom: 10px; margin-bottom: 0; margin-bottom: 0; margin-bottom: 50px;
margin-left: 15px; margin-left: 20px; margin-left: auto; margin-left: 50px;
(auto, 0, px, pt, em or %) } } }
}
#div { #div { #div {
#div { margin:10px 20px 0; margin:0 auto; margin:50px;
margin:0 5px 10px 15px; (top right/left bottom) (top/bottom left/right) (top/right/bottom/left)
(top right bottom left) } } }
}
Border
#div { #div { #div {
border-width: 5px; border-right-width: 2px; border-top-width: 3px;
(thin, thick, medium or set value) (default = medium) border-right-style: solid; border-right-width: 2px;
border-style: dotted; border-right-color: border-bottom-width: 3px;
(solid, dashed, dotted, double, etc) (default = none) #666666; border-left-width: 2px;
border-color: blue; } }
(named, hex, rgb or 0-255) (default = value of elements/
elements parent color property) #div { #div {
} border-right:2px solid #666; border-width:3px 2px;
} }
#div {
border:5px dotted blue;
}
Background Font
#div { #div {
background-color: #CCCCCC; font-family: Verdana, Arial, Helvetica;
(named, hex, rgb or 0-255) (default = transparent) (Verdana, Arial, Times New Roman, etc) (default = browse based)
background-image: url(images/bg.gif); font-size: 12px;
(url or none) (default = none) (xx-small, medium, x-large, set value, etc) (default = medium)
background-repeat: no-repeat; font-weight: bold;
(repeat, repeat-x, repeat-y or no-repeat) (default = (normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
repeat) font-style: italic;
background-attachment: scroll; (normal, italic or oblique) (default = normal)
(fixed or scroll) (default = scroll) font-variant: normal;
background-position: top left; (normal or small-caps) (default = normal)
(top, right, left, bottom or center) (default = 0% 0%) line-height: 1.5;
} (normal, px, pt, em, num or %) (default = normal)
}
#div {
background:#CCC url(images/bg.gif) no-repeat 0 0; #div {
} font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}
List Color
#div { Aqua: #00ffff to #0ff
list-style-image: url(images/bullet.gif); Black: #000000 to #000
(url or none) (default = none) Blue: #0000ff to #00f
list-style-position: inside; Dark Grey: #666666 to #666
(inside or outside) (default = outside) Fuchsia:#ff00ff to #f0f
list-style-type: square; Light Grey: #cccccc to #ccc
(circle, disc, square, etc) (default = disc) Lime: #00ff00 to#0f0
} Orange: #ff6600 to #f60
Red: #ff0000 to #f00
#div { White: #ffffff to #fff
list-style:square inside url(images/bullet.gif); Yellow: #ffff00 to #ff0
}
GoSquared HTML Help Sheet
Download this Help Sheet now at gosquared.com/liquidicity or put it on your wall 2008 Go Squared Ltd.
HTML Cheatsheet
page 1 of 2
Links
<a href="URL">clickable text</a>
Creates a hyperlink to a Uniform Resource Locator
<a href="mailto:EMAIL_ADDRESS">clickable text</a>
Creates a hyperlink to an email address
<a name="NAME">
Creates a target location within a document
<a href="#NAME">clickable text</a>
Creates a link to that target location
HTML Cheatsheet
page 2 of 2
Tables (use only for data layout - use CSS for page layout) Table attributes (only use for email newsletters)
<table> </table> <table border=?>
Creates a table Sets the width of the border around table cells
<tr> </tr> <table cellspacing=?>
Sets off each row in a table Sets amount of space between table cells
<td> </td> <table cellpadding=?>
Sets off each cell in a row Sets amount of space between a cell's border and
<th> </th> its contents
Sets off the table header (a normal cell with bold, <table width=?>
centered text) Sets width of the table in pixels or as a percentage
<tr align=?>
Sets alignment for cells within the row
(left/center/right)
<td align=?>
Sets alignment for cells (left/center/right)
<tr valign=?>
Sets vertical alignment for cells within the row
(top/middle/bottom)
<td valign=?>
Sets vertical alignment for cell (top/middle/bottom)
<td rowspan=?>
Sets number of rows a cell should span (default=1)
<td colspan=?>
Sets number of columns a cell should span
<td nowrap>
Prevents lines within a cell from being broken to fit
CSS Study Guide
A stylesheet (CSS file) provides formatting for one or many web pages (HTML files).
Example:
Web page (HTML file)
Web page (HTML file)
Web page (HTML file) Style sheet (CSS file)
<html> p{
<head>
<title>my title</title>
color:red;
<link href="mystyles.css" rel="stylesheet" type="text/css"/> }
</head>
<body>
</body>
</html>
Link tag
The <link> tag is required inside the <head> tag to tell the HTML file where to go to get its style rules/formatting. It
must be of the format:
Where mystyles.css is the name of the CSS file where style rules are found.
rel ="stylesheet" type="text/css" is required to tell the browser it's a stylesheet file.
The above assumes that the CSS file is in the same folder as the HTML file. If not, then the HREF attribute needs to point
to the CSS file. Example: href="..\styles\mystyles.css" would be in a "styles" folder next to the folder that contains the
HTML file.
CSS Rules
CSS rules are created inside the CSS file, and are of the form:
Selector {
property: value;
property2: value2;
}
Where selector determines which HTML tags the rule applies to.
Property is a CSS property name, and value is the value to set the property to.
Note that the { } : and ; are required.
HTML Selector
Any HTML tag can be used as a selector. When used, all tags on the HTML web page will get the properties (formatting)
applied to it for that rule. Examples:
td { /* sets all tds inside tables on the page to have green text */
color: green;
}
ID Selector
Using ID allows the author to mark ONE (and only ONE) tag for each web page with a unique name, and apply formatting
for only that tag. To mark the HTML tag, use id="name", such as:
Now, a rule can be applied using the hashtag selector: #idname such as:
#redpara{ /* only the tag with id="redpara" will get red text */
color:red;
}
#bluecell{ /* only the tag with id="bluecell" will get blue text */
color:blue;
}
Class Selector
Using CLASS allows the author to mark MANY tags on each web page with a class name, and apply formatting for those
tags. To mark the HTML tag, use class="name", such as:
<td class="bluebackground italtext">This is a cell in a table</td> - Both bluebackground and italtext rules apply
Now, a rule can be applied using the period (.) selector: .classname such as:
.bluebackground{ /* only the tags with class=" bluebackground" will get blue background text */
background-color:blue;
}
To allow more flexibility, HTML tag selectors can be combined with Class selectors by placing the HTML tag name before
the period. For example:
p.bluebackground{ /* only the p tags with class=" bluebackground" will get blue background text */
background-color:blue;
}
td. bluebackground{ /* only the td tags with class=" bluebackground" will get blue background with red font text */
background-color:blue;
color:red;
}
Assume that the names above match the classes of each DIV. For example:
To get a layout like the above, some of the DIVs must be set to float, and must be given widths. Floating a DIV allows the
content to flow along side of it. The following styles must be used:
.Logo{
float: left;
width:200px;
}
.Banner{
width:700px;
}
.MainContent{
float: left;
width:700px;
}
.Side{
width:200px;
}
All DIVs on the page likely have a height property set as well (not shown above).
The CSS Box Model
Border Properties
border-style Style of border on all 4 sides none, hidden, dotted, dashed, double, groove, insert,
outset, ridge, solid
border Combined styles for width, style, color 10px solid #FF0000
in that order
border-top, Style for one side of the borders 10px solid #FF0000
border-bottom,
border-left,
border-right
Other Properties
Property Description Example Values
float Set a block to one side of the page left, right, none
The floating block must have a width
clear Turns off float effects left, right, both, none
display How an HTML element should be display. inline, block, none
{display:none} hides the element and does
not take up any space.
visibility Show or hide an element. visible, hidden
{visibility:hidden} hides the element but still
takes up the same space.
The above can be used to automatically center a container DIV (that has a fixed width) on a page.
If you want a DIV to never flow next to a FLOATED DIV (or other element), setting:
clear: both;
will always put that DIV on a new line, at the left side of the page.