Welcome to my HTML and CSS Cheat sheets!

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web ApplicationsLearning HTML and CSS is fun especially you are getting the output that you want correctly1.

It is fun to study HTML and CSS especially the correct the design is generated. It is easy to learn but the problem is remembering all the formats,elements, attributes etc. Therefore, making cheet sheets is recommended to make the scripting more productive.

Click the buttons to download foundation framework and atom text editor that will help you code faster...
Foundation 6.0 Atom

HTML
TAG DESCRIPTION
HEAD
<link rel=”stylesheet” href=”?” type=”text/css”> External CSS link
<script language=”Javascript” type=”text/javascript> Embedded javascript
<meta name="?" content="?" /> Tag provides metadata about the HTML document
GENERAL
<body> </body> Visible part of the page
<head> </head> Part not displayed on page
<htmlr> </html> Creates an HTML page
<title> </title> Displays an image
LINKS
< img src="URL"> hyperlink
< a href="#"> Link to anchor in current page
< a href="URL"> Link to another page
STRUCTURE
<div> Formats structure or block of text
<em> Italic text
<h1>...<h1> Page heading, h1 is the biggest..h6 is the smallest
<hr> Horizontal rule
<p> Paragraph
<span> Inline formatting
<strong> Bold text
<sub> Subscript text
<sup> Superscript text
TABLE
<caption> Table caption
<table> Defines a table
<thead> Header section of table
<tbody> Body section of table
<th> Table header cells
<th colspan=”?”> Number of columns table header cell spans
<tr> Table row
<td> Table cell
<td colspan=”?”> Number of columns cell spans
<td rowspan=”?”> Number of rows cell spans
<tfoot> Footer section of the table
LIST
<dd> Definition
<dl> definition list
<dt>> Denition term
<ol> Ordered list
<ul> Unordered list
<li> Item in a list
FORM
<form> Defines a form
<input type=“?”> Form element: button, checkbox, radio, submit,reset, submit, text
<option> Menu item in a select box
<select> Drop-down menu
<textarea> Multi-row text area

HTML5

TAG DESCRIPTION
NEW ELEMENTS FOR HTML5
<article> Defines an article in the document
<aside> Defines content aside from the page content
<audio> specifies a standard way to embed audio in a web page.
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for the document or a section
<hgroup> Used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<ime> Defines a date/time
<video> specifies a standard way to embed a video in a web page.
<wbr> Defines a possible line-break
NEW FORM ELEMENTS
<datalist> Defines pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
NEW INPUT TYPES NEW INPUT ATTRIBUTES
color autocomplete
date autofocus
datetime form
datetime-local formaction
email formenctype
month formmethod
number formnovalidate
range formtarget
search height and width
tel list
time min and max
url multiple
week pattern

CSS

SYNTAX
selector {propert:value;}
External Style Sheet
<link rel="stylesheet" type="text/css href="stylec2.css" />
Internal Style Sheet
<style type="text/css">
selector {propert:value;}
</style>
Inline Style
<tag style="property: value">
GENERAL
Class String preceded by a period
ID String preceded by a hash mark
div Formats structure or block of text
span Inline formatting
color Foreground color
cursor Appearance of the cursor
display block; inline; list-item; none
overflow How content overflowing its box is handled
visible, hidden, scroll, auto
visibility visible, hidden
FONT
font-style Italic, normal
font-variant normal, small-caps
font-weight bold, normal, lighter, bolder, integer (100-900)
font-size Size of the font
font-family Specific font(s) to be used
TEXT
letter-spacing Space between letters
line-height Vertical distance between baselines
text-align Horizontal alignment
text-decoration blink, line-through, none, overline, underline
text-indent First line indentation
text-transform capitalize, lowercase, uppercase
vertical-align Vertical alignment

Selectors

BOX MODEL
height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;
BORDER
border-width Width of the border
border-style dashed; dotted; double; groove; inset; outset; ridge; solid;none
border-color Color of the border
POSITION
clear Any floating elements around the element?: (both, left, right, none)
float Floats to a specified side:(left, right, none)
left The left position of an element:(auto, length values (pt, in, cm, px)
top The top position of an element: auto, length values (pt, in, cm, px)
position static, relative, absolute
z-index Element above or below overlapping elements? : auto, integer (higher numbers on top)
BACKGROUND
background-color Background color
background-image Background image
background-repeat repeat, no-repeat, repeat-x, repeat-y
background-attachment Background image scroll with the element?; scroll, fixed
background-position (x y), top, center, bottom, left, right
LIST
list-style-type Type of bullet or numbering in the list: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
list-style-position Position of the bullet or number in a list: inside; outside
list-style-image Image to be used as the bullet in a list