HTML and CSS Cheatsheet
Published on Jan 25, 2013 20:10 by KE Programmer
Table of Contents
1. HTML Elements
1.1. 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.
1.2. 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.
1.3. 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.
2. CSS
2.1. Box Model
2.2. Positioning
position:- 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.
2.3. 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.
2.4. 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.
2.5. Background
background-color– color.background-image–url("value").background-repeat– repeat, repeat-x, repeat-y, no-repeat.background-position– x-offset y-offset.
2.6. List styles
list-style-type– none, circle, disc, armenian etc.list-style-position– inside, outside.
