HTML and CSS Cheatsheet

Just bringing you the coding cheatsheet you needed . . .

CSS Tips and Properties

Deprecated Attribute What to use instead
align Use float property instead
valign Use vertical-align property instead
char The correct answer is to use text-align: "x"; where x is the character to align on, but it’s not implemented anywhere yet. But this attribute isn’t supported either, so no big loss.
bgcolor Use background property instead
cellpadding Using padding property instead
cellspacing Use border-spacing property instead
summary Use <caption> property instead
frame Use border property instead
Selector Usage
* All elements.
div All div tags.
div,p All divs and paragraphs.
div p Paragraphs inside divs
div > p All p tags, one level deep in div
div + p p tags immediately after div
div ~ p p tags preceded by div
.classname All elements with class
#idname Element with ID
#idname Element with ID
div.classname divs with certain classname
div#idname div with certain ID
#idname* All elements inside #idname
Path Definition
picture.jpg The "picture.jpg" file is located in the same folder as the current page.
images/picture.jpg The "picture.jpg" file is located in the images folder in the current folder.
/images/picture.jpg The "picture.jpg" file is located in the images folder at the root of the current web.
../picture.jpg The "picture.jpg" file is located in the folder one level up from the current folder.
Propertie Definition
height Sets the height of an element. If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.
width specifies the width of the element's content area.
padding Creates space around an element's content, inside of any defined borders.
margin Creates space around elements, outside of any defined borders.
border The CSS border properties allows you to specify the style, width, and color of an element's border.

HTML Structure

Tag Name Description
<html> HTML Tag Represents the root of an HTML document and contains all other HTML elements. Should include the lang="en" attribute.
<head> Head Tag Container for metadata that is placed between the <html> and <body> tag.
<meta> Meta Tag Defines meta data about an HTML document. The charset attribute specifies the character encoding of the HTML document. HTML5 encourages use of the UTF-8 character set.
<title> Title Tag Defines the title of the document and is displayed in the browser's toolbar.
<link> Link Tag Specifies relationships between the current document and an external resource. This could be a stylesheet, external fonts, etc.
<body> Body Tag Defines the document's body and contains all the contents of an HTML document.

Semantic HTML

Tag Name Description
<header> Header Tag Represents a container for introductory content or a set of navigational links. You can have several <header> elements in one HTML document, however it should not be placed in a <footer>, <address> or another <header> element.
<nav> Nav Tag Defines a set of navigation links
<article> Article Tag Specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the site and still make sense.
<section> Section Tag Defines a section in a document.
<footer> Footer Tag Defines a footer for a document or section.Typically contains authorship information, copyright information, contact information, sitemap, back to top links, and/or related documents.
<figure> Figure Tag Specifies self-contained content, like illustrations, diagrams, photos, code, listings, etc.
<figcaption> Figcaption Tag Defines a caption for a <html> element.