Quick Reference: HTML Tags & CSS Properties

This reference guide provides quick access to commonly used HTML tags and CSS properties. Use it as a cheat sheet when you're coding and need to remember syntax or look up what a tag or property does.

Quick Navigation

HTML Tags CSS Properties HTML Attributes CSS Units

Common HTML Tags

These are the HTML tags you'll use most frequently when building websites. Each tag serves a specific purpose in structuring content.

Document Structure

<!DOCTYPE html>

Declares the document as HTML5. Must be the first line of every HTML file.

<!DOCTYPE html>

<html>

Root element of an HTML document. Wraps all other HTML content.

<html lang="en">
    <!-- All content goes here -->
</html>

<head>

Contains metadata about the document (title, stylesheets, etc.). Not visible on the page.

<head>
    <title>My Page</title>
</head>

<body>

Contains all visible content of the webpage.

<body>
    <h1>Hello World</h1>
</body>

Headings

Heading tags create a hierarchy. Use only one <h1> per page. h1 is most important, h6 is least.

<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>

Text Content

<p>

Paragraph tag. Used for blocks of text content.

<p>This is a paragraph.</p>

Makes text bold and indicates importance.

<strong>Important text</strong>

<em>

Makes text italic and indicates emphasis.

<em>Emphasized text</em>

<br>

Line break. Creates a new line (self-closing tag).

Line one<br>
Line two

Links and Navigation

<a>

Anchor tag creates hyperlinks. Requires href attribute for the destination URL.

<a href="https://example.com">Click here</a>

<nav>

Semantic tag for navigation sections.

<nav>
    <a href="/">Home</a>
</nav>

Lists

<ul>

Unordered list (bullet points).

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>

Ordered list (numbered).

<ol>
    <li>First</li>
    <li>Second</li>
</ol>

<li>

List item. Used inside <ul> or <ol>.

<li>List item content</li>

Images and Media

<img>

Displays images. Requires src attribute (image path) and alt attribute (description).

<img src="photo.jpg" alt="Description">

Semantic HTML5 Tags

Introductory content or navigation aids.

<header>
    <h1>Site Title</h1>
</header>

<main>

Main content of the document (only one per page).

<main>
    <!-- Main content -->
</main>

Self-contained content (blog post, news article, etc.).

<article>
    <h2>Article Title</h2>
    <p>Content...</p>
</article>

Generic standalone section with a heading.

<section>
    <h2>Section Title</h2>
    <p>Content...</p>
</section>

<aside>

Tangentially related content (sidebars, call-outs).

<aside>
    <p>Related information</p>
</aside>

Footer content (copyright, links, metadata).

<footer>
    <p>© 2024 My Site</p>
</footer>

Common CSS Properties

These CSS properties control the visual appearance of your HTML elements. Each property modifies a specific aspect of styling.

Text Properties

color

Sets the text color. Can use color names, hex codes, or RGB values.

color: blue;
color: #2563eb;
color: rgb(37, 99, 235);

font-family

Sets the font family. Use web-safe fonts or web fonts.

font-family: Arial, sans-serif;
font-family: Georgia, serif;

font-size

Sets the text size. Requires a unit (px, em, rem, etc.).

font-size: 16px;
font-size: 1.5em;

font-weight

Sets text weight (boldness). Common values: normal, bold, or numbers (100-900).

font-weight: bold;
font-weight: 600;

text-align

Aligns text horizontally. Values: left, center, right, justify.

text-align: center;
text-align: left;

line-height

Sets spacing between lines. Often 1.5-1.8 for readability.

line-height: 1.6;
line-height: 24px;

text-decoration

Adds decoration to text. Values: none, underline, line-through, overline.

text-decoration: underline;
text-decoration: none;

Color and Background

background-color

Sets the background color of an element.

background-color: #f0f9ff;
background-color: white;

background-image

Sets a background image. Requires url() function.

background-image: url('image.jpg');

opacity

Sets transparency. Value from 0 (invisible) to 1 (opaque).

opacity: 0.5;

Spacing

margin

Space outside an element. Can set all sides or individual (margin-top, margin-bottom, etc.).

margin: 20px;          /* All sides */
margin: 10px 20px;     /* Top/bottom, left/right */
margin-top: 15px;      /* One side */

padding

Space inside an element, between content and border. Same syntax as margin.

padding: 1rem;
padding: 10px 20px;
padding-left: 15px;

Borders

border

Shorthand for border-width, border-style, and border-color.

border: 2px solid black;
border: 1px dashed #ccc;

border-radius

Rounds the corners of an element.

border-radius: 8px;
border-radius: 50%;  /* Makes circles */

Layout Properties

display

Controls how elements are displayed. Common values: block, inline, inline-block, flex, grid.

display: block;
display: flex;

width

Sets element width. Can use px, %, em, or other units.

width: 100%;
width: 300px;

height

Sets element height. Similar to width.

height: 200px;
height: auto;

max-width

Sets maximum width. Element won't exceed this but can be smaller.

max-width: 1200px;

position

Sets positioning method. Values: static, relative, absolute, fixed, sticky.

position: relative;
position: absolute;

Common HTML Attributes

Attributes provide additional information about HTML elements. They're written inside opening tags.

Unique identifier for an element. Use for linking or CSS targeting.

<div id="header"></div>

class

Class name for styling. Multiple elements can share the same class.

<p class="highlight"></p>

href

Hyperlink destination URL. Used with <a> tags.

<a href="page.html">Link</a>

src

Source URL for images, scripts, or other embedded content.

<img src="photo.jpg" alt="Photo">

alt

Alternative text for images. Important for accessibility.

<img src="photo.jpg" alt="Sunset over mountains">

lang

Language of the content. Usually set on <html> tag.

<html lang="en"></html>

CSS Units and Values

CSS uses different units to specify sizes, colors, and other values. Understanding these units helps you write effective CSS.

Length Units

px (pixels)

Absolute unit. 1px = 1 screen pixel. Most common for sizes.

font-size: 16px;
width: 300px;

% (percentage)

Relative to parent element. 100% = full width of parent.

width: 50%;
height: 100%;

Relative to font-size of element (or parent). 1em = current font-size.

font-size: 1.5em;  /* 1.5 times parent font-size */
margin: 2em;       /* 2 times current font-size */

rem

Relative to root element font-size. More predictable than em.

font-size: 1.2rem;

Color Values

Color Names

Predefined color names like blue, red, green, etc.

color: blue;
background-color: darkgray;

Hex Codes

Six-digit hexadecimal codes starting with #.

color: #2563eb;      /* Blue */
color: #ff0000;      /* Red */
color: #000000;      /* Black */

RGB

Red, green, blue values from 0-255.

color: rgb(255, 0, 0);  /* Red */
color: rgb(0, 0, 0);    /* Black */