You are on page 1of 11

CSS Shorthand Cheat Sheet by Example leigeber.

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) } } }

#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

.com/liquidicity or put it on your wall © 2008 Go Squared Ltd.<h6> Page heading. More than sign * Does not require a closing tag. biggest to smallest image <ol> Ordered list </li> <hr> Horizontal rule password </ul> <ul> Unordered list radio <p> Paragraph <pre> Preformatted text reset <span> Forms submit Inline formatting <form> Defines a form text <strong> Bold text <sub> Subscript text <fieldset> Group of related form items <sup> Superscript text <input type= Form element [see input types] “?”>* <option> Menu item in a select box Frames <select> Drop-down menu <frame> Defines a single frame <textarea> Multi-row text area <frameset>Frame document <iframe> Inline frame Special Characters &nbsp.comment here --> Ensures anything in &lt. . </style> <table> <head> HTML: <tag></tagclose> or <tag> <link rel=”stylesheet” href=”?” External <title></title> XHTML: <tag></tagclose> or <tag /> type=”text/css”>* CSS link <thead> Meta tags <script language=”Javascript” <tr> CSS With Attribute Embedded <th> HTML: <tag attribute=”?”> type=”text/javascript”> javascript Javascript </th> </head> XHTML: <tag attribute=”?” /> <meta name="?" content="?" />* Meta info </tr> <body> </thead> Content General Tables </body> <body> Visible part of the page <caption> Table caption <tbody> </html> <table> Defines a table <tr> <head> Part not displayed on page <tbody> Body section of table <td> CSS Media <html> Creates an HTML page </td> <td> Table cell all <title> Creates the Page name in title bar </tr> <td Number of columns cell spans handheld </tbody> colspan=”?”> print Links <td Number of rows cell spans projection <tfoot> <img src=”URL”>* Displays an image rowspan=”?”> screen <tr> <a href=”#?”> Link to anchor in current <tfoot> Footer section of the table <td> Meta Types page <th> Table header cells </td> <a href=”URL”> Link to another page <th Number of columns table header </tr> http-equiv <a href=”URL#”> colspan=”?”> cell spans </tfoot> Link to anchor in another name <thead> Header section of table page <a href=”mailto: EMAIL”> E-mail link <tr> Table row </table> Lists <ol> Structure Lists Input Types <li> <br />* Line break <dd> Definition button </li> </ol> <code> Source code listing <dl> Definition list checkbox <div> Formats structure or block of text file <dt> Definition term <ul> <em> Italic text hidden <li> Item in a list <li> <h1>. Ampersand <!-. Quotation mark &amp. Non-breaking space Comment &quot. GoSquared HTML Help Sheet Template Syntax Head Table <html> Basic <style type="text/css">@import "URL". Download this Help Sheet now at gosquared. Less than sign between is not interpreted &gt.

using name or hex value <li> </li> <body alink=?> Encompasses each list item Sets color of active links (while mouse-clicking) <dl> </dl> Creates a definition list Text Tags <dt> <pre> </pre> Precedes each defintion term Creates preformatted text <dd> <h1> </h1> --> <h6> </h6> Precedes each defintion Creates headlines -.indents text from both sides <title> </title> <div> </div> Puts name of the document in the title bar. <body vlink=?> where xx is a counting number) Sets color of visited links. using name or hex value Lists <body text=?> <ul> </ul> Sets text color. usually processed in italics <img src="URL" align=?> <em> </em> Aligns image left/right/center/bottom/top/middle (use CSS) Emphasizes a word (usually processed in italics) <img src="URL" border=?> <strong> </strong> Sets size of border surrounding image (use CSS) Emphasizes a word (usually processed in bold) <img src="URL" height=?> <font size=?> </font> Sets height of image. it is a separate file located at the URL Creates address section. in pixels Sets font color (should use CSS instead) <img src="URL" alt=?> <font face=?> </font> Sets the alternate text for browsers that can't Defines the font used (should use CSS instead) process images (required by the ADA) 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 . in pixels Sets size of font . usually processed in italics <img src="URL" /> <address> </address> Adds image. using name or hex value Creates an unordered list <body link=?> <ol start=?> </ol> Sets color of links. using name or hex value Creates an ordered list (start=xx.1 to 7 (should use CSS instead) <img src="URL" width=?> <font color=?> </font> Sets width of image. this is what is bookmarked <span> </span> Used to format inline content with CSS Body attributes (only used in email newsletters) <body bgcolor=?> Sets background color. when Used to format block content with CSS bookmarking pages. usually monospace <hr noshade> <cite> </cite> Creates a horizontal rule without a shadow Creates a citation.H1=largest. HTML Cheatsheet page 1 of 2 Basic Tags Formatting <html> </html> <p> </p> Creates an HTML document Creates a new paragraph <head> </head> <br> Sets off the title & other info that isn't displayed AInserts a line break (carriage return) <body> </body> <blockquote> </blockquote> Sets off the visible portion of the document Puts content in a quote . H6=smallest <b> </b> Graphical elements Creates bold text (should use <strong> instead) <hr> <i> </i> Inserts a horizontal rule Creates italicized text (should use <em> instead) <hr size=?> <tt> </tt> Sets size (height) of horizontal rule Creates typewriter-style text <hr width=?> <code> </code> Sets width of rule (as a % or absolute pixel length) Used to define source code.

Sets a single-line text box with a calendar showing the date/month/week/time <input type="checkbox" name=? value=? checked> Creates a checkbox which is Defines a form for details) <select multiple name=? size=?> </select> Creates a scrolling menu. Size sets the number of <input type="email" name=?> menu items visible before user needs to scroll. Size sets length.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. Columns set the width. <input type="image" name=? src=? border=? alt=?> Creates a submit button using an image. visit http://caniuse. Sets a single-line text box for a range of numbers rows set the height. <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 . Value sets the text in the submit button. <input type="search" name=?> <input type="radio" name=? value=?> Sets a single-line text box for searching Creates a radio button. <input type="color" name=?> <input type="radio" name=? value=? checked> Sets a single-line text box for picking a color Creates a radio button which is pre-checked. <input type="submit" value=?> Creates a submit button. <input type="reset"> Creates a reset button Tables (use only for data layout . HTML Cheatsheet page 2 of 2 Forms HTML5 input tag attributes <form> </form> (not all browsers support. Sets a single-line textbox for email addresses <select name=?> </select> <input type="url" name=?> Creates a pulldown menu Sets a single-line textbox for URLs <option> <input type="number" name=?> Sets off each menu item Sets a single-line textbox for a number <textarea name=? cols="x" rows="y"></textarea> <input type="range" name=?> Creates a text box area. <input type="text" name=? size=?> Creates a one-line text area. <input type="date/month/week/time" name=?> <input type="checkbox" name=? value=?> Creates a checkbox. in characters.

.css" would be in a "styles" folder next to the folder that contains the HTML file.css is the name of the CSS file where style rules are found. then the HREF attribute needs to point to the CSS file.css" rel="stylesheet" type="text/css"/> Where 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. each separated by semi-colons. } Where selector determines which HTML tags the rule applies to. The above assumes that the CSS file is in the same folder as the HTML file. If not.\styles\mystyles. Property is a CSS property name. and are of the form: Selector { property: value. CSS Study Guide A stylesheet (CSS file) provides formatting for one or many web pages (HTML files). rel ="stylesheet" type="text/css" is required to tell the browser it's a stylesheet file. property2: value2. 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. CSS Rules CSS rules are created inside the CSS file. It must be of the format: <link href="mystyles. Multiple properties can be listed.. and value is the value to set the property to. Note that the { } : and . <link href="mystyles. Example: href=". are required.

Combinations of the above with modifiers HTML Selector Any HTML tag can be used as a selector. Class selector 4. } #bluecell{ /* only the tag with id="bluecell" will get blue text */ color:blue. } h3 { /* sets all heading level 3s on the page to have blue text */ color:blue. HTML tag selector 2. and apply formatting for only that tag. visited. 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. etc. ID selector 3. } td { /* sets all tds inside tables on the page to have green text */ color: green. such as: <p id="redpara">This is a paragraph</p> <td id="bluecell">This is a table cell</td> Now. use id="name". To mark the HTML tag. } . all tags on the HTML web page will get the properties (formatting) applied to it for that rule.) 5. Pseudo-class selector (for hover.Selectors There are 5 types of selectors: 1. } ID Selector Using ID allows the author to mark ONE (and only ONE) tag for each web page with a unique name. Examples: p{ /* sets all paragraphs on the page to have red text */ color:red. When used.

bluebackground{ /* only the tags with class=" bluebackground" will get blue background text */ background-color:blue. bluebackground{ /* only the td tags with class=" bluebackground" will get blue background with red font text */ background-color:blue. For example: p. a rule can be applied using the period (. color:red. To mark the HTML tag.italtext{ /* all tags with class="italtext" will become italic */ font-style:italic.bluebackground{ /* only the p tags with class=" bluebackground" will get blue background text */ background-color:blue. such as: <p class="bluebackground">This is a paragraph</p> <p class="bluebackground">This is a another paragraph</p> <td class="bluebackground italtext">This is a cell in a table</td> .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. } td.) selector: .classname such as: .Both bluebackground and italtext rules apply Now. } . use class="name". } . } To allow more flexibility. HTML tag selectors can be combined with Class selectors by placing the HTML tag name before the period.

sets how the background image repeats text-align:right. sets font size font-weight:bold. blink text-indent:50px. Can also use %. Use on <table> width:30px. decoration values: (use the Learn CSS link on the left). chosen in order if they exist on the computer use serif or sans-serif as generic font names font-style:italic. Here are some common properties: color:red. overline. sets vertical alignment of text and other tags within the tag can also use middle. <th> border-collapse:collapse. sets extra white space padding in td tags in tables float:left. sets background color background-image:url('paper. height:50px. width:50%. (must be combined with width) sets a div to allow content to flow to the left of it . sets a 1 pixel wide black solid border. italic text. Can also have value:normal. line-through.gif'). bottom text-decoration:none. underline. sets bold font. list-style-type:circle. sets the background image background-repeat:repeat-x. list-style-image: url('sqpurple. sets width or height of the tag. sets bullet type to a small image border: 1px solid black. removes space between td borders. sets horizontal alignment of text and other tags within the tag can also use center. left indent font-family:"Goudy". <td>. sets font names. sets bullet type for lists on <ul> and <ol> tag. left vertical-align:top. serif. "Garamond". font-size:20px. Use on <table>.gif').Property names For a full reference of property names to use. sets text color background-color:#0000FF. padding:15px. Can also have value:normal. refer to w3schools. (must be combined with width) sets a div to allow content to flow to the right of it float:right.

jpg"/></div> To get a layout like the above. } . and for product- detail pages (for a commerce site like Amazon. . } Footer Assume that the names above match the classes of each DIV. A web site may contain templates for the home page. width:200px. and hold specific pieces of content that may change across pages. It must Logo Banner have a style rule. For example: <div class="Logo"><img src="logo. and must be given widths. The following styles must be used: . } All DIVs on the page likely have a height property set as well (not shown above). such as: Navigation #container{ Side width:900px.Side{ width:200px. Floating a DIV allows the content to flow along side of it.Logo{ float: left. Side margin-right:auto.MainContent{ float: left. even though thousands of products may be available.Banner{ width:700px.CSS Layout CSS Layout is about using DIVs to define boxes on a page to act as a page template. width:700px. MainContent margin-left:auto. Here's an example template: A container DIV can be used to center all of the content within the browser. and interacts similarly across the whole site. With just a few templates. for instance). feels. for sub-pages. some of the DIVs must be set to float. content can be inserted to create a consistent set of pages that looks. } . This makes the site friendly and easy to use if done well. } .

style. Style for one side of the borders 10px solid #FF0000 border-bottom. color in order 10px solid #FF0000 border. ridge. groove. insert. Color to fill border #EDEDED color border-width Width of border on all 4 sides 10px border-style Style of border on all 4 sides none. dotted. color 10px solid #FF0000 in that order border-top. style. double. dashed. outset. border-left.The CSS Box Model Border Properties Property Description Example Values border Specify thickness. solid border Combined styles for width. border-right Padding /Margin Properties Property Description Example Values . hidden.

The above can be used to automatically center a container DIV (that has a fixed width) on a page. visible.padding Padding for all 4 sides: . padding-bottom. If you want a DIV to never flow next to a FLOATED DIV (or other element). none The floating block must have a width clear Turns off float effects left.One value for all 4 sides 5px . will always put that DIV on a new line. both. at the left side of the page. Margin for one side of the box 10px margin-right. right. block.In clock-wise order: 2px 3px 3px 2px Top Right Bottom Left (T R B L ) padding-top. . margin-left Other Properties Property Description Example Values float Set a block to one side of the page left. inline. hidden {visibility:hidden} hides the element but still takes up the same space. visibility Show or hide an element. padding-left margin Margin for all 4 sides: . setting: clear: both. margin-bottom. none display How an HTML element should be display. Padding for one side of the box 10px padding-right. right.One value for all 4 sides 5px .In clock-wise order: 2px 3px 3px 2px Top Right Bottom Left (T R B L ) margin-top. none {display:none} hides the element and does not take up any space.