CSS Shorthand Cheat Sheet by Example

CSS Shorthand Cheat Sheet by Example leigeber.
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
Template Syntax Head Table

<html> Basic <style type="text/css">@import "URL"; </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>..<h6> Page heading, 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
Non-breaking space
Comment " Quotation mark
& Ampersand
 Ensures anything in < Less than sign
between is not interpreted > More than sign
* Does not require a closing tag.
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
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 - indents text from both sides
<title> </title> <div> </div>
Puts name of the document in the title bar; when Used to format block content with CSS
bookmarking pages, 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, using name or hex value Lists
<body text=?> <ul> </ul>
Sets text color, 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,
<body vlink=?> where xx is a counting number)
Sets color of visited links, 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 -- H1=largest, 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, usually monospace <hr noshade>
<cite> </cite> Creates a horizontal rule without a shadow
Creates a citation, usually processed in italics <img src="URL" />
<address> </address> Adds image; it is a separate file located at the URL
Creates address section, 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, in pixels
Sets size of font - 1 to 7 (should use CSS instead) <img src="URL" width=?>
<font color=?> </font> Sets width of image, 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
HTML Cheatsheet
page 2 of 2
Forms HTML5 input tag attributes

<form> </form> (not all browsers support; visit http://caniuse.com
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. 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. Columns set the width;
Sets a single-line text box for a range of numbers
rows set the height.
<input type="date/month/week/time" name=?>
<input type="checkbox" name=? value=?>
Creates a checkbox.
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 pre-checked. <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="text" name=? size=?>
Creates a one-line text area. Size sets length, in
characters.
<input type="submit" value=?>
Creates a submit button. Value sets the text in the
submit button.
<input type="image" name=? src=? border=? alt=?>
Creates a submit button using an image.
<input type="reset">
Creates a reset button
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:
<link href="mystyles.css" rel="stylesheet" type="text/css"/>
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.
Multiple properties can be listed, each separated by semi-colons.

Selectors
There are 5 types of selectors:
1. HTML tag selector

2. ID selector
3. Class selector
4. Pseudo-class selector (for hover, visited, etc.)
5. Combinations of the above with modifiers
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:
p{ /* sets all paragraphs on the page to have red text */

color:red;
}
h3 { /* sets all heading level 3s on the page to have blue text */

color:blue;
}
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:
<p id="redpara">This is a paragraph</p>
<td id="bluecell">This is a table cell</td>
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:
<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> - 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 */
}
td. bluebackground{ /* only the td tags with class=" bluebackground" will get blue background with red font text */
color:red;
}
.italtext{ /* all tags with class="italtext" will become italic */

font-style:italic;
}
Property names
For a full reference of property names to use, refer to w3schools.com (use the Learn CSS link on the left).
Here are some common properties:
color:red; sets text color

background-color:#0000FF; sets background color
background-image:url('paper.gif'); sets the background image
background-repeat:repeat-x; sets how the background image repeats
text-align:right; sets horizontal alignment of text and other tags within the tag
can also use center, left
vertical-align:top; sets vertical alignment of text and other tags within the tag
can also use middle, bottom
text-decoration:none; decoration values: none, overline, line-through, underline, blink
text-indent:50px; left indent
font-family:"Goudy", "Garamond", serif; sets font names, chosen in order if they exist on the computer
use serif or sans-serif as generic font names
font-style:italic; italic text. Can also have value:normal;
font-size:20px; sets font size
font-weight:bold; sets bold font. Can also have value:normal;
list-style-type:circle; sets bullet type for lists on <ul> and <ol> tag.
list-style-image: url('sqpurple.gif'); sets bullet type to a small image
border: 1px solid black; sets a 1 pixel wide black solid border. Use on <table>, <td>, <th>
border-collapse:collapse; removes space between td borders. Use on <table>
width:30px;
height:50px; sets width or height of the tag. Can also use %, width:50%;
padding:15px; sets extra white space padding in td tags in tables
float:left; (must be combined with width) sets a div to allow content to flow to the right of it
float:right; (must be combined with width) sets a div to allow content to flow to the left of it
CSS Layout
CSS Layout is about using DIVs to define boxes on a page to act as a page template, and hold specific pieces of content
that may change across pages. A web site may contain templates for the home page, for sub-pages, and for product-
detail pages (for a commerce site like Amazon, for instance). With just a few templates, content can be inserted to
create a consistent set of pages that looks, feels, and interacts similarly across the whole site, even though thousands of
products may be available. This makes the site friendly and easy to use if done well.
Here's an example template:

A container DIV can be used to center all of
the content within the browser. It must
Logo Banner have a style rule, such as:
Navigation #container{
Side width:900px;
MainContent
margin-left:auto;
Side margin-right:auto;
}
Footer
Assume that the names above match the classes of each DIV. For example:
<div class="Logo"><img src="logo.jpg"/></div>
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
Property Description Example Values

border Specify thickness, style, color in order 10px solid #FF0000
border- 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, 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
Padding /Margin Properties

padding Padding for all 4 sides:
- One value for all 4 sides 5px
- In clock-wise order: 2px 3px 3px 2px
Top Right Bottom Left (T R B L )
padding-top, Padding for one side of the box 10px
padding-right,
padding-bottom,
padding-left
margin Margin for all 4 sides:
- 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, Margin for one side of the box 10px
margin-right,
margin-bottom,
margin-left
Other Properties
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.

CSS Shorthand Cheat Sheet by Example

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

CSS Shorthand Cheat Sheet by Example

Caricato da

Copyright:

Formati disponibili

CSS Shorthand Cheat Sheet by Example leigeber.

Template Syntax Head Table

* Does not require a closing tag.

Basic Tags Formatting

Forms HTML5 input tag attributes

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

Multiple properties can be listed, each separated by semi-colons.

1. HTML tag selector

p{ /* sets all paragraphs on the page to have red text */

h3 { /* sets all heading level 3s on the page to have blue text */

<p id="redpara">This is a paragraph</p>

<td id="bluecell">This is a table cell</td>

<p class="bluebackground">This is a paragraph</p>

<p class="bluebackground">This is a another paragraph</p>

.italtext{ /* all tags with class="italtext" will become italic */

Here are some common properties:

color:red; sets text color

Here's an example template:

<div class="Logo"><img src="logo.jpg"/></div>

Property Description Example Values

border- Color to fill border #EDEDED

Padding /Margin Properties

Property Description Example Values

Potrebbero piacerti anche