Archive for the ‘Cheat Sheets’ Category

File Under: Browsers, Cheat Sheets

Mobile Browser Chart

Mobile
Layout Engine Browser Java Plug -ins Add-Ons CSS 1 CSS 2 CSS 3 gif89 png acid2 acid3 DHTML HTML5 i-frame XML RSS
Gecko Mobile Firefox X X X X X s X X X s X s X X X
Trident Explorer 7 X X X X s X X X X X X
Webkit Android X X X X s X X X s X s X X X
Mobile Safari X X X X s X X X s X s X X X
Presto Opera Mobile X X X X X s X X X s X s X X X
Opera Mini X X X s X X s s s s X X X
Key
supported X
sort-of supported s
not supported
File Under: Cheat Sheets, HTML

HTML Cheatsheet

Keep this cheatsheet handy — it contains the most common HTML tags and their proper syntax.

 
Continue Reading “HTML Cheatsheet” »
File Under: Cheat Sheets, CSS

Inline Stylesheet Code

If you want to use stylesheets to format one particular piece of content on a web page, you can apply an inline style.

Here’s the code:

<a href="http://www.webmonkey.com" style="font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 1px 0; border: 1px solid #000; background: #31757B; color: #fff; text-decoration: none; font-weight:bold" title="">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em; font-weight:bold;">Go To</span> Webmonkey!</a>

File Under: Cheat Sheets, CSS

CSS Properties


Name of
Property
Rule syntax

Possible values
font-family <selector> {font-family:<value>} <family-name> (specify) or <generic-family> [serif, sans-serif, cursive, fantasy, monospace]


font-style <selector> {font-style:<value>} normal, italic

font-weight <selector> {font-weight:<value>} normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900


font-size <selector> {font-size:<value>} <absolute-size>, <relative-size>, <length>, <percentage>


font $
<selector> {font:<value>} , , ,

Color and Background
Name of
Property
Rule syntax Possible values

color <selector> {color:<value>}

<color>


background-color <selector> {background-color:<value>}

<color>


background-image <selector> {background-image:url(<value>)} URL (relative or absolute path)

background $
<selector>{background:<value>} <background-color> (i.e., <color>)

Text properties
Name of
Property
Rule syntax Possible values

Text-decoration <selector>{text-decoration:<value>} underline, line-through

text-transform <selector>{text-transform:<value>} capitalize, uppercase, lowercase, none

text-align <selector>{text-align:<value>} left, right, center, justify

text-indent <selector>{text-indent:<value>} <length>, <percentage>
Box properties

Name of
Property
Rule syntax Possible values
margin $

<selector>{margin:<value>} <length>, <percentage>, auto(sequence:t r b l)

margin-top

<selector>{margin-top:<value>} <length>, <percentage>, auto

Margin-right

<selector>{margin-right:<value>} <length>, <percentage>, auto

margin-bottom

<selector>{margin-bottom:<value>} <length>, <percentage>, auto

margin-left <selector>{margin-left:<value>} <length>, <percentage>, auto

padding $
<selector>{padding:<value>} <length>, <percentage>, (sequence:t r b l)

padding-top
<selector>{padding-top:<value>} <length>, <percentage>


padding-right
<selector>{padding-right:<value>} <length>, <percentage>


padding-bottom
<selector>{padding-bottom:<value>} <length>, <percentage>


padding-left
<selector>{padding-left:<value>} <length>, <percentage>


border-color
<selector>{border-color:<value>} <color>


border-style
<selector>{border-style:<value>} solid, double, groove, ridge, inset, outset


border $
<selector>{border:<value>} <border-width>, <border-style>, <color>

Block-level and Replaced Elements
width <selector>{width:<value>} <length>, <percentage>, auto


height <selector>{height:<value>} <length>, auto

float <selector>{float:<value>} left, right

clear <selector>{clear:<value>} none, left, right
Position (CSS – P)
Name of
Property
Rule syntax Possible values
position <selector>{position:<value>} absolute, relative

top

<selector>{top:<value>} <length>, <percentage>, auto

left

<selector>{left:<value>} <length>, <percentage>, auto

visibility

<selector>{visibility:<value>} hidden, visible, inherit

z-index <selector>{z-index:<value>}

<number>, auto

overflow <selector>{overflow:<value>} visible, hidden, auto


$ = Shorthand Property

File Under: Cheat Sheets, CSS

CSS Attributes

Class and ID

Classes let you create grouping schemes among styled HTML tags by adding the style definition of a particular class to the style definitions of several different tags. In the stylesheet, a class name is preceded by a period (.) to identify it as such:

	.foo {property 1:value 1; property 2:value 2} 

A very simple example:

	<style>

    P {font-family:sans-serif; font-size:10pt}
    H1 {font-family:serif; font-size:30pt}
    H2 {font-family:serif; font-size:24pt}
    .red {color:red}
    .green {color:green}
    .blue {color:blue}

    </style> 

The tags and classes can then be used in combination:

	<h1 class="red">This is rendered as 30-point red serif text.</h1>
	<p class="red">This is rendered as 10-point red sans-serif text.</p> 

Or not:

	<p>This is rendered as 10-point sans-serif text in the default color.</p> 

The ID attribute is used for a uniquely defined style within a stylesheet. In the stylesheet, an ID name is preceded by a hash mark (#) to identify it as such:

	#foo {property 1:value 1; property 2:value 2}
	<h2 id="foo">Text rendered in the foo style.<h2> 

Text-Level Attributes:<SPAN> and <DIV>

The <span> tag is generally used to apply a style to inline text:

	<p>This text is rendered as foo-style and this is not. 

The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements:

    <div class="foo">
    <p>The "foo" style will be applied to this text, and to <a href="page.html">this text</a> as well.
    </div> 

The style attribute provides a way to define a style for a single instance of an element:

<p style="font-size:10pt; color:red">This text is rendered as red, 10-point type</p>

The class, ID, and style attributed can be applied within the <span> and <div> elements. Used with class or ID, the <span> and <div> tags work like customized HTML tags, letting you define logical containers and apply a style to their contents.