Friday, January 25, 2013

HTML and CSS Cheatsheet

HTML Elements

Block Elements

<h1>...</h1> to <h6>...</h6> - Document headings.
<div>...</div> - Container for flow content.
<p>...</p> -  Paragraph of text.
<header>...</header> - Introductory links. (HTML5)
<nav>...</nav> - Navigational links. (HTML5)
<article>...</article> - Self contained, re-usable composition. e.g. blog post (HTML5)
<section>...</section> - Generic section of a document/article. (HTML5)
<aside>...</aside> - Related content e.g. sidebar (HTML5)
<footer>...</footer> - Footer text. (HTML5)
<blockquote>...</blockquote> - Block of quotation.
<audio>...</audio> - Sound. (HTML5)
<video>...<video> - embed video. (HTML5)
<figure>...</figure> - encapsulate an image/illustration. (HTML5)
<figcaption>...</figcaption - caption associated with a figure.
<form>...</form> - contains elements for data input.

Inline Elements

<span>...</span> - inline container.
<q>...</q> - inline quotation.
<cite>...</cite> - title of some work.
<strong>...</strong> - give text strong importance.
<em>...</em> - stress emphasis.
<a>...</a> - hyperlinks.
<img /> - images.

Form Input Elements

<input /> - text input element.
<textarea>...</textarea> - multiline plain text editing.
<select><option>...</option>...</select> - present a menu of options.
<fieldset>...</fieldset> - group input elements.
<legend>...</legend> - caption for fieldset.
<label>...</label> - caption for input element.

CSS


Box Model

float - left, right; 
clear - left, right, both;
border-radius - top-left top-right bottom-left bottom-right (length values like em, pixels etc)
margin - top right bottom left (width values)
border - width style color;
padding - top right bottom left;
width - width-value;
height - height-value;

Positioning

static - default behavior, in the flow;
relative - relative parent element, original space reserved,  in the flow;
absolute - out of flow;
fixed - relative to screen, does not move.

Font properties

font-family - family-or-generic-name;
font-size - length-value;
font-style - normal, italic, oblique;
font-variant - small-caps, normal;
font-weight - normal, bold;
line-height - normal, height-value;

Text Properties

text-align - left, right, center, justify;
text-decoration - none, underline, overline, line-through, blink;
text-indent - length-value;
text-shadow - color, x-offset, y-offset;
text-transform - capitalize, uppercase, lowercase;

Background

background-color - color;
background-image - url("value")
background-repeat - repeat, repeat-x, repeat-y, no-repeat;
background-position - x-offset y-offset

List styles

list-style-type - none, circle, disc, armenian etc
list-style-position - inside, outside;

Others

display - none, inline, block;



See Excellent tutorials at: