HTML/CSS Cheat Sheet

1. The most common & important HTML tags

Diagram of HTML element anatomy with a paragraph tag containing 'Hello World!', showing the opening tag, content, and closing tag.
No: Name: Example: Description:
1 Anchor tag <a href="https://example.com">Visit Example</a> Defines a hyperlink, which is used to link from one page to another.
2 Link tag <link href="styles.css" rel="stylesheet"> Defines the relationship between the current document and an external resource. Commonly used to link to stylesheets.
3 Image tag <img src="image.jpg" alt="Description of image"> Embeds an image in the document.
4 Script tag <script src="script.js"></script> Embeds or refers to an external JavaScript file.
5 Iframe tag <iframe src="https://www.example.com"></iframe> Embeds another HTML page within the current page.
6 Audio tag <audio src="audio.mp3" controls></audio> Embeds an audio file in the document.
7 Video tag <video src="video.mp4" controls></video> Embeds a video file in the document.
8 Division tag <div>This is a division.</div> Defines a division or section in an HTML document.
9 Span tag <span>This is a span.</span> Used to group inline-elements in a document.
10 Paragraph tag <p>This is a paragraph.</p> Defines a paragraph.
11 Heading tags <h1>This is a heading</h1> Defines HTML headings, with <h1> being the highest (or most important) level and <h6> the lowest.
12 Unordered list tag <ul><li>Item 1</li><li>Item 2</li></ul> Defines an unordered (bulleted) list.
13 Ordered list tag <ol><li>Item 1</li><li>Item 2</li></ol> Defines an ordered (numbered) list.
14 List item tag <ul><li>Item 1</li><li>Item 2</li></ul> Defines a list item.
15 Button tag <button type="button">Click Me!</button> Defines a clickable button.
16 Emphasis tag <em>This text is emphasized</em> Renders text with emphasis (typically italics).
17 Strong tag <strong>This text is strong</strong> Renders text with strong importance (typically bold).
18 Break tag <br> Inserts a single line break.
19 Horizontal rule tag <hr> Defines a thematic break in the content (typically a horizontal line).
20 Quote tag <blockquote>This is a blockquote</blockquote> Defines a section that is quoted from another source.
21 Code tag <code>console.log('Hello, World!');</code> Defines a fragment of computer code.

2. CSS Selectors & specificity scores

CSS rule anatomy diagram with 'color: blue;' example showing selector, opening tag, declaration block, attribute, property, and value.

IICE - Explanation of Specificity Score Values

The values 100a + 10b + c represent the specificity score for CSS selectors, where:

  • Inline styles - specificity score higher than any calculated selector - (1000+)
  • ID selectors - a - represents the number of ID selectors - (100)
  • Class selectors, attribute selectors, and pseudo-class selectors - b - represents the number of class, attribute, or pseudo-class selectors - (10)
  • Element/Type selectors and pseudo-element selectors - c - represents the number of type or pseudo-element selectors - (1)

CSS Selectors with specificity scores
(ranked from highest to lowest)

No: Name: Example: Description: Specificity Score:
1 Inline Style <p style="color: blue;">Text</p> Styles applied directly to an element via the style attribute. Highest specificity (1000+)
2 ID Selector #unique { color: purple; } Selects the element with the given ID attribute. 1-0-0 (100)
3 Class Selector .example { color: red; } Selects all elements with the given class attribute. 0-1-0 (10)
4 Attribute Selector [href*="https:"] { color: green; } Selects elements based on the presence or value of an attribute. 0-1-0 (10)
5 Pseudo-Class Selector a:hover { color: yellow; } Selects elements based on their state or position (e.g., :hover, :nth-child). 0-1-0 (10)
6 General Sibling Selector h1 ~ p { color: purple; } Selects all p elements that are siblings of an h1. 0-0-2 (2)
7 Adjacent Sibling Selector h1 + p { color: red; } Selects the p element that is immediately following an h1. 0-0-2 (2)
8 Child Selector div > p { color: green; } Selects all p elements that are direct children of a div. 0-0-2 (2)
9 Descendant Selector div p { color: blue; } Selects all p elements that are descendants of a div. 0-0-2 (2)
10 Pseudo-Element Selector p::first-line { font-weight: bold; } Selects a specific part of an element (e.g., ::before, ::after, ::first-line). 0-0-1 (1)
11 Type Selector p { color: blue; } Selects all elements of the given type (e.g., p, h1, div). 0-0-1 (1)
12 Universal Selector * { color: black; } Selects all elements. 0-0-0 (0)