CSS & HTML Reference Guide

A comprehensive reference for modern web development

CSS & HTML Reference 2

Contents

1 Selector 6
1.1 Type Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2 Class Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 ID Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4 Attribute Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5 Combinator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5.1 Descendant Combinator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5.2 Child Combinator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.5.3 Sibling Combinator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.5.4 Adjacent Sibling Combinator . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Cascading 7

3 Pseudo-Classes 7
3.1 Common Pseudo-Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1.1 :focus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1.2 :invalid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.3 :link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.4 :visited . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.5 :first-child . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.6 :last-child . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.7 :nth-child(n) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.8 :first-of-type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.9 :last-of-type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.10 :nth-of-type(n) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

4 Pseudo-Elements 9
4.1 Common Pseudo-Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.1.1 ::before . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.1.2 ::after . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.1.3 ::first-letter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

5 Selector Specificity 10
5.1 Calculating Specificity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
5.2 The !important Declaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

6 CSS Units 12
6.1 Length Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
6.1.1 px (Pixels) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
6.1.2 em . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
6.1.3 rem (Root em) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
6.1.4 vw (Viewport Width) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
6.1.5 vh (Viewport Height) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
6.1.6 ch (Character Width) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
6.1.7 % (Percentage) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
6.2 Unit Recommendations by Use Case . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
CSS & HTML Reference 3

6.2.1 Width and Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

6.2.2 Margin and Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
6.2.3 Borders and Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
6.2.4 Font Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

7 Display Property: Block vs Inline Elements 13

7.1 Block-Level Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
7.1.1 The Rules of a Block-Level Element . . . . . . . . . . . . . . . . . . . . . . . 13
7.1.2 Common Block-Level Elements . . . . . . . . . . . . . . . . . . . . . . . . . . 14
7.2 Inline-Level Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
7.2.1 The Rules of an Inline-Level Element . . . . . . . . . . . . . . . . . . . . . . 14
7.2.2 Common Inline-Level Elements . . . . . . . . . . . . . . . . . . . . . . . . . . 14
7.3 Inline-Block Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

8 Box Sizing 15
8.1 Box Sizing Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

9 Position Property 15
9.1 Position Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
9.1.1 position: static . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
9.1.2 position: relative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
9.1.3 position: absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
9.1.4 position: fixed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
9.1.5 position: sticky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

10 Flexbox 16
10.1 Flex Container Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
10.1.1 flex-direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
10.1.2 justify-content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
10.1.3 align-items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
10.1.4 flex-wrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
10.1.5 align-content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
10.1.6 flex-flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
10.1.7 gap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
10.2 Flex Item Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
10.2.1 align-self . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
10.2.2 flex-basis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
10.2.3 flex-grow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
10.2.4 flex-shrink . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
10.2.5 flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
10.2.6 order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
10.3 Additional Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
10.4 When to Use Flexbox vs Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

11 Media Queries 18
11.1 Basic Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
11.1.1 Min-Width (Mobile-First Approach) . . . . . . . . . . . . . . . . . . . . . . . 18
11.1.2 Max-Width (Desktop-First Approach) . . . . . . . . . . . . . . . . . . . . . . 19
CSS & HTML Reference 4

11.1.3 Range (Between Two Widths) . . . . . . . . . . . . . . . . . . . . . . . . . . 19

11.2 Common Breakpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

12 Transitions 20
12.1 Transition Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
12.2 Shorthand Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
12.3 Additional Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

13 Animations 20
13.1 Animation Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
13.2 Shorthand Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
13.3 Additional Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

14 @keyframes 21
14.1 Additional Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

15 CSS Variables (Custom Properties) 22

15.1 Defining CSS Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
15.2 Benefits of CSS Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

16 The calc() Function 23

16.1 Basic Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
16.2 Supported Operations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
16.3 Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

17 CSS Grid 24
17.1 Grid Container Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
17.1.1 grid-template-columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
17.1.2 grid-template-rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
17.1.3 grid-template-areas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
17.1.4 justify-content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
17.1.5 align-content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
17.1.6 align-items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
17.1.7 justify-items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
17.1.8 place-items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.1.9 gap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2 Grid Item Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2.1 grid-column-start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2.2 grid-column-end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2.3 grid-column . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2.4 grid-row-start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2.5 grid-row-end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2.6 grid-row . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2.7 grid-area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2.8 align-self . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2.9 justify-self . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
17.2.10 place-self . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
17.3 Additional Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
CSS & HTML Reference 5

18 HTML Essentials 27
18.1 Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
18.2 Semantic Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
18.3 Text Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
18.4 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
18.5 Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
18.6 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
18.7 Media Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
18.8 Common Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
CSS & HTML Reference 6

1 Selector
A pattern used at the beginning of a ruleset for choosing which elements will be affected by the
declarations. There are a variety of different selector types:

1.1 Type Selector

Selects all of the elements of a specific HTML tag. For example, h1 would select all <h1> elements.

1.2 Class Selector

Selects all elements with a specific HTML class attribute. Class selectors are prefixed with a ., so
for example .foo would select all HTML elements with the attribute class="foo".

1.3 ID Selector
Selects an element with a specific HTML ID attribute. ID selectors are prefixed with a #, so for
example #bar would select the HTML element with the attribute id="bar".

1.4 Attribute Selector

Selects all elements with a specific HTML attribute set to a specific value. These are surrounded by
[] and use a = as a delimiter between the attribute name and value. For example, [type="submit"]
would select all elements with a type attribute set to ”submit”.
Excluding the value will select all elements with the attribute set to any value. For example,
[type] would select all elements with the type attribute set, regardless of the value.
Attribute selectors can also use special syntax for basic pattern matching within the value.
There are a variety of options here, but these are some of the more common ones:

• [href*="[Link]"] would select all elements with an href attribute with the text ”algo-
[Link]” at any location.

• [href$="[Link]"] would select all elements with an href attribute with the text ”algo-
[Link]” at the end of the value.

• [href^="[Link] would select all elements with an href attribute with the
text ”[Link] at the beginning of the value.

1.5 Combinator
Combines multiple selectors to select elements based on their location in the DOM. There are a
few types of combinators:

1.5.1 Descendant Combinator

Represented by a single space, in the format selector1 selector2. Selects all elements that match
selector2 and are a descendant of an element matching selector1. A descendant does not need to
be a direct child (e.g. the selected element’s grandparent could match selector1).
CSS & HTML Reference 7

1.5.2 Child Combinator

Represented by >, in the format selector1 > selector2. Selects all elements that match selector2
and are a direct child of an element matching selector1.

1.5.3 Sibling Combinator

Represented by ~, in the format selector1 ~ selector2. Selects all elements that match selector2
and are a sibling of an element matching selector1. The element matching selector2 must come
after the element matching selector1.

1.5.4 Adjacent Sibling Combinator

Represented by +, in the format selector1 + selector2. Selects all elements that match selector2
and have an element matching selector1 directly before them in the DOM.

2 Cascading
The order that stylesheets are used. These stylesheets can be grouped into three main categories:

1. User Agent Stylesheets: Contain browser defaults for styles, these get the lowest level of
precedence.

2. User Stylesheets: Contain user preferences saved in the browser, which override user agent
stylesheets.

3. Author Stylesheets: Contain the CSS code we write, these get the highest level of precedence
(assuming !important has not been used).

3 Pseudo-Classes
Special keywords added to selectors that specify a special state of the selected elements. They are
prefixed with a colon (:).

3.1 Common Pseudo-Classes

3.1.1 :focus
Selects an element that currently has focus (e.g., an input field that is currently active).

input : focus {
outline : 2 px solid blue ;
}
CSS & HTML Reference 8

3.1.2 :invalid
Selects form elements whose content fails to validate according to the input’s type.

input : invalid : not (: focus ) {

outline : 2 px solid red ;
}

3.1.3 :link
Selects links that have not yet been visited by the user.

a : link {
color : red ;
}

3.1.4 :visited
Selects links that have been visited by the user.

a : visited {
color : green ;
}

3.1.5 :first-child
Selects an element that is the first child of its parent.

p : first - child {
font - weight : bold ;
}

3.1.6 :last-child
Selects an element that is the last child of its parent.

p : last - child {
margin - bottom : 0;
}
CSS & HTML Reference 9

3.1.7 :nth-child(n)
Selects elements based on their position among siblings. The n can be a number, keyword (odd,
even), or formula.

li : nth - child (2) {

color : blue ;
}
li : nth - child ( odd ) {
background - color : lightgray ;
}

3.1.8 :first-of-type
Selects the first element of its type among siblings.

p : first - of - type {
font - size : 1.2 em ;
}

3.1.9 :last-of-type
Selects the last element of its type among siblings.

p : last - of - type {
margin - bottom : 2 em ;
}

3.1.10 :nth-of-type(n)
Selects elements of a specific type based on their position among siblings of the same type.

div : nth - of - type (3) {

background - color : yellow ;
}

4 Pseudo-Elements
Special keywords added to selectors that style specific parts of selected elements. They are prefixed
with double colons (::), though single colon syntax is also supported for backwards compatibility.
CSS & HTML Reference 10

4.1 Common Pseudo-Elements

4.1.1 ::before
Creates a pseudo-element that is the first child of the selected element. Often used to add cosmetic
content using the content property.

p :: before {
content : " >";
}

4.1.2 ::after
Creates a pseudo-element that is the last child of the selected element. Often used to add cosmetic
content using the content property.

p :: after {
content : "!";
}

4.1.3 ::first-letter
Selects the first letter of the first line of a block-level element.

p :: first - letter {
font - size : 2 em ;
}

5 Selector Specificity
When multiple CSS rules target the same element, specificity determines which rule takes prece-
dence. Specificity is calculated based on the types of selectors used.

5.1 Calculating Specificity

Specificity is calculated using a point system with different weights for different selector types:

• Inline styles: 1000 points

• IDs: 100 points

• Classes: 10 points

• Pseudo-classes: 10 points
CSS & HTML Reference 11

• Attributes: 10 points
• Elements: 1 point
• Pseudo-elements: 1 point

Examples:

/* Specificity : 1 + 10 = 11 */
a [ href =" https :// algoexpert . io "] {
color : green ;
}

/* Specificity : 1 + 10 + 1 = 12 */
section . links a {
color : red ;
}

In the example above, the second rule has higher specificity (12 points) and would override the
first rule (11 points) for anchor tags inside elements with class ”links” within a section.

5.2 The !important Declaration

The !important declaration overrides all normal specificity calculations and gives a CSS rule the
highest priority. It should be used sparingly as it can make debugging and maintaining CSS more
difficult.
Syntax:

selector {
property : value ! important ;
}

Example:

p {
color : blue ! important ;
}

/* This will NOT override the above rule ,

even with higher specificity */
# special - paragraph {
color : red ;
}

Note: When !important is used, only another !important declaration with equal or higher
specificity (applied later in the cascade) can override it.
CSS & HTML Reference 12

6 CSS Units
CSS provides various units for specifying lengths, sizes, and dimensions. These units can be cate-
gorized as absolute or relative.

6.1 Length Units

6.1.1 px (Pixels)
Pixels are an absolute length unit. One pixel represents one dot on the screen.
Use case: Best for precise, fixed measurements.

6.1.2 em
A relative unit that is relative to the font size of the element itself (or its parent if used for font-size).
Use case: Good for scaling with font size. If parent has font-size: 16px, then 2em = 32px.

6.1.3 rem (Root em)

A relative unit that is relative to the root element’s font size (usually the <html> element).
Use case: Provides consistent scaling throughout the document. If root font size is 16px, then
2rem = 32px everywhere.

6.1.4 vw (Viewport Width)

1% of the viewport width. 100vw equals the full width of the viewport.
Use case: Creating responsive layouts that scale with viewport size.

6.1.5 vh (Viewport Height)

1% of the viewport height. 100vh equals the full height of the viewport.
Use case: Creating full-height sections or responsive vertical layouts.

6.1.6 ch (Character Width)

Equal to the width of the ”0” (zero) character in the element’s font.
Use case: Useful for setting widths based on character count, especially for paragraphs.

6.1.7 % (Percentage)
A relative unit that is usually relative to the parent element’s corresponding property value.
Use case: Creating fluid, responsive layouts. For width/height, it’s relative to parent’s width/height.

6.2 Unit Recommendations by Use Case

6.2.1 Width and Height
• %: To be relative to parent

• vw/vh: To be relative to viewport

• ch: For paragraph widths (optimal readability)

CSS & HTML Reference 13

• rem: For closer to absolute values

• px: As a last resort for true absolutes

6.2.2 Margin and Padding

• rem: For closer to absolute values

• em: To scale with font size

• px: For small values, last resort

6.2.3 Borders and Shadows

• px: For small values

• rem/em: Okay here too, but scaling doesn’t always look great

6.2.4 Font Size

• rem: Usually best for consistent scaling

• em: To scale to parent size

• px: As a last resort

7 Display Property: Block vs Inline Elements

Elements in HTML can be displayed in different ways based on their display property. Under-
standing the difference between block-level and inline elements is fundamental to CSS layout.

7.1 Block-Level Elements

Think of these as the paragraphs and chapters of your document. They are the major, standalone
pieces of structure.

7.1.1 The Rules of a Block-Level Element

1. Always Starts on a New Line: A block element will not sit next to other elements on the
same line. It forces a line break before and after itself.

2. Takes Up the Full Width Available: By default, a block element’s box will stretch hor-
izontally to fill the entire width of its parent container. You can see this if you give it a
background color.

3. Respects width and height: You can explicitly set the width and height properties on a
block-level element.

4. Respects Top and Bottom margin and padding: You can push a block element up or
down with margin-top and margin-bottom.
CSS & HTML Reference 14

7.1.2 Common Block-Level Elements

• <div> (The generic block container)
• <h1>, <h2>, etc. (Headings)
• <p> (Paragraphs)
• <ul>, <ol>, <li> (Lists and list items)
• <form>
• <header>, <footer>, <main>, <section>, <article>, <nav> (Semantic layout elements)

7.2 Inline-Level Elements

Inline elements flow with the text content and do not break the flow of the document.

7.2.1 The Rules of an Inline-Level Element

1. Does NOT Start on a New Line: An inline element will sit happily next to other inline
elements (or text) on the same line, as long as there is space.
2. Takes Up Only as Much Width as Necessary: Its box is only as wide as the content
inside it. It does not stretch to fill the parent.
3. Does NOT Respect width and height: You cannot set a width or height on an inline
element. The properties will be ignored.
4. Partially Respects margin and padding: You can apply padding-left, padding-right,
margin-left, and margin-right. However, margin-top and margin-bottom will be ignored. An
inline element cannot be pushed up or down.

7.2.2 Common Inline-Level Elements

• <span> (The generic inline container)
• <a> (Anchor/link)
• <strong>, <em> (Emphasis)
• <input>, <button>, <label> (Form elements)
• <img> (Image) - This one is a special case, an ”inline-block” by default in some contexts, but
it flows inline.

7.3 Inline-Block Elements

An element with its display property set to inline-block. These have a few key properties:
• They start immediately after the content before them, without a new line.
• They span the width of their content by default, but this can be changed.
• They respect width and height properties.
• They respect all margin and padding properties (unlike pure inline elements).
CSS & HTML Reference 15

8 Box Sizing
A CSS property for specifying how width and height should be calculated for the selected element.
The default value is content-box for most elements, which sets the width and height to only control
the size of the content. However, a value of border-box would include the size of the padding and
border.
Example: If an element has width: 100px, padding: 12px, and border: 24px, then with box
-sizing: content-box it would take up a total of 172px of width (note this includes padding and
border twice to account for the left and right side). However, with box-sizing: border-box it would
only take up a total width of 100px.

8.1 Box Sizing Values

• content-box (default): Width and height apply only to the content. Padding and border are
added outside.

• border-box: Width and height include content, padding, and border. This is often preferred
for easier layout calculations.

9 Position Property
The position property specifies how an element is positioned in the document. Different position
values change how the element behaves in the layout flow.

9.1 Position Values

9.1.1 position: static
The default position. Elements follow the normal document flow with no manual positioning.

9.1.2 position: relative

Used either to slightly adjust an element’s own position or to create a positioning context (a
”flag”) for absolutely positioned children. Simply setting relative without offsets won’t change
the element’s position.
Use case: Setting a positioning reference point for child elements with position: absolute.

9.1.3 position: absolute

Similar to fixed, but the reference point depends on its nearest ancestor with a non-static position
(usually relative). If no such ancestor exists, it positions relative to the entire document (not the
viewport). Use it to precisely place elements inside a specific container.
Use case: Positioning elements precisely within a container, like dropdown menus or tooltips.

9.1.4 position: fixed

Positions the element relative to the viewport (the visible screen area). It’s removed from the normal
flow and stays fixed even when the page scrolls — perfect for global UI elements like navbars or
modals.
Use case: Creating sticky navigation bars or floating action buttons.
CSS & HTML Reference 16

9.1.5 position: sticky

Behaves like relative at first, but becomes fixed once it crosses a specified scroll threshold. Com-
monly used for sticky headers or sidebars that ”stick” while scrolling.
Use case: Table headers that stick to the top while scrolling through data.

10 Flexbox
A layout model, also known as the Flexible Box Layout Module, particularly useful for building
responsive designs with row or column layouts. An element can be made a flex container with
display: flex, and all of its direct children will automatically be laid out as flex items.

10.1 Flex Container Properties

For flex containers, these are some of the most common properties used to layout their flex items:

10.1.1 flex-direction
Determines which direction is the main-axis, either row or column. Additionally, row-reverse and
column-reverse can be used to reverse the order of flex items.

10.1.2 justify-content
Determines how elements are positioned along the main-axis with possible values of flex-start,
flex-end, center, space-around, space-between, and space-evenly.

10.1.3 align-items
Determines how elements are positioned along the cross-axis (the one not selected by flex-
direction). Possible values are flex-start, flex-end, center, baseline, and stretch.

10.1.4 flex-wrap
Determines if flex items can wrap to new lines with possible values of wrap and nowrap. wrap-reverse
can also be used to wrap flex items with the lines in reverse order.

10.1.5 align-content
Determines how lines are positioned along the cross-axis when flex items are wrapping on multiple
lines. Possible values are flex-start, flex-end, center, space-around, space-between, and stretch.

10.1.6 flex-flow
A shorthand for flex-direction and flex-wrap.

10.1.7 gap
Determines the amount of space between flex items. This can take one or two length values. If
it is given two, they will be treated as a row gap and a column gap respectively. Alternatively,
a row-gap and column-gap property can be specified to individually set the gap between rows and
columns.
CSS & HTML Reference 17

10.2 Flex Item Properties

For flex items, these are some of the most common properties used to position themselves:

10.2.1 align-self
Overrides the align-items value used for the flex container.

10.2.2 flex-basis
Sets the initial size of the flex item along the main-axis (essentially this will act as width for the
row axis and height for the column axis).

10.2.3 flex-grow
Determines if the flex item is able to grow into extra space. If the value is 0, the flex item will not
grow. Otherwise, it will take up as much extra space as possible, with larger grow values taking
more space proportionally. For example, if item A has a value of 1 and item B has a value of 2,
then item B will take up twice as much extra space as item A (Note this does not mean it will be
twice as large, only that it will take twice as much of the extra space).

10.2.4 flex-shrink
Determines if a flex item is able to shrink in the case that the flex items are too large for the
container. Flex items with a value of 0 will not shrink. Otherwise they will all shrink proportionally
based on their values, similar to flex grow. The higher the value, the more the flex item will
potentially shrink.

10.2.5 flex
A shorthand property for flex-grow, flex-shrink, and flex-basis in that order.

10.2.6 order
Moves the flex-item to a different location amongst the other flex items rather than using the order
defined in the DOM. All flex items default to having a value of 0. This means a value of -1 would
move an item before all other items that have not changed their order. Likewise, a value of 1 would
place the item at the end.

10.3 Additional Resources

For more information on Flexbox, visit: [Link] lexibleB oxL ay

10.4 When to Use Flexbox vs Position

Best Practice: Use Flexbox for overall page structure and layout. Flexbox is ideal for creat-
ing responsive designs and arranging multiple elements in rows or columns. It handles spacing,
alignment, and distribution of elements naturally.
Use Position for Specific Elements: When you need to position a specific element pre-
cisely (such as a tooltip, dropdown menu, or overlay), use the position property along with offset
properties:
CSS & HTML Reference 18

• top - Distance from the top edge

• bottom - Distance from the bottom edge

• left - Distance from the left edge

• right - Distance from the right edge

Example:

/* Use Flexbox for layout structure */

. container {
display : flex ;
justify - content : space - between ;
align - items : center ;
}

/* Use position for specific element placement */

. tooltip {
position : absolute ;
top : 20 px ;
right : 10 px ;
}

11 Media Queries
Media queries allow you to apply different CSS styles based on device characteristics, most com-
monly screen width. This enables responsive design that adapts to different screen sizes.

11.1 Basic Syntax

Media queries use the @media rule to conditionally apply styles.

11.1.1 Min-Width (Mobile-First Approach)

Apply styles when the viewport is at least a certain width. This is the preferred approach for
responsive design.
CSS & HTML Reference 19

/* Styles for screens 768 px and wider ( tablets and up ) */

@media ( min - width : 768 px ) {
. container {
flex - direction : row ;
}
}

/* Styles for screens 1024 px and wider ( desktops ) */

@media ( min - width : 1024 px ) {
. container {
max - width : 1200 px ;
}
}

11.1.2 Max-Width (Desktop-First Approach)

Apply styles when the viewport is at most a certain width.

/* Styles for screens 768 px and narrower ( mobile devices ) */

@media ( max - width : 768 px ) {
. container {
flex - direction : column ;
}
}

/* Styles for screens 480 px and narrower ( small phones ) */

@media ( max - width : 480 px ) {
. container {
padding : 10 px ;
}
}

11.1.3 Range (Between Two Widths)

Apply styles when the viewport is between two widths.

/* Styles for screens between 768 px and 1024 px ( tablets ) */

@media ( min - width : 768 px ) and ( max - width : 1024 px ) {
. container {
padding : 20 px ;
}
}
CSS & HTML Reference 20

11.2 Common Breakpoints

• Mobile: Up to 767px

• Tablet: 768px - 1023px

• Desktop: 1024px and above

12 Transitions
A CSS module for smoothly transitioning between values when a value is changed. Transitions can
be defined with a combination of these properties:

12.1 Transition Properties

• transition-property: The name of the CSS property to transition.

• transition-duration: How long the transition should take.

• transition-timing-function: How the transition should progress. This can take a variety
of keyword values, such as linear and ease-in, or custom values using the cubic-bezier() or
steps() functions.

• transition-delay: How long to wait before starting the transition.

12.2 Shorthand Syntax

Alternatively, the transition property can be used as a shorthand for all of these values. The first
time value will be used for the duration, and the second will be used for a delay. Other than that,
the order does not matter.
Example:

transition : width 1 s linear 2 s ;

This would set the width to smoothly transition linearly over one second, two seconds after the
value is changed.

12.3 Additional Resources

For more information on Transitions, visit: [Link] ransitions

13 Animations
A CSS module for animating properties, very similar to transitions, but with a bit more control.
An animation is defined using keyframes as well as these properties:
CSS & HTML Reference 21

13.1 Animation Properties

• animation-name: The name of the keyframes animation.
• animation-duration: How long the animation should take.
• animation-fill-mode: If the element should stay in its animated position after the animation
completes or if it should move to the starting position of the animation before it begins,
specified with the backwards and forwards values respectively or both to follow the rules of
both values.
• animation-direction: If the animation should play in normal or reverse order. A value of
alternate can also be used to switch between normal and reverse, or alternate-reverse can
be used to do the same, but starting with the reverse direction.
• animation-iteration-count: How many times to run the animation, or infinite to run the
animation indefinitely.
• animation-play-state: If the animation is currently running or paused. This is particularly
useful for pausing an animation using JavaScript.
• animation-timing-function: How the animation should progress through the keyframes.
This can take a variety of keyword values, such as linear and ease-in, or custom values using
the cubic-bezier() or steps() functions.
• animation-delay: How long to wait before starting the animation.

13.2 Shorthand Syntax

Alternatively, the animation property can be used as a shorthand for all of these values. The first
time value will be used for the duration, and the second will be used for a delay. Other than that,
the order usually will not matter assuming the animation-name is not using a conflicting keyword
with another possible value.
Example:

animation : move 3 s ease infinite alternate 2 s ;

This would run the move animation over three seconds with the ease timing function. The
animation would continue to run indefinitely, alternating the order each time, after a two second
delay.

13.3 Additional Resources

For more information on Animations, visit: [Link] nimations

14 @keyframes
A keyword for defining points within an animation timeline. An animation is made up of a variety
of keyframes, and the browser will fill in the spaces between the keyframes based on the timing
function. Keyframes are defined using this syntax:
CSS & HTML Reference 22

@keyframes animation - name {

from {
property : value ;
property : value ;
}

50% {
property : value ;
property : value ;
}

to {
property : value ;
property : value ;
}
}

The from and to keywords are equivalent to 0% and 100% respectively.

14.1 Additional Resources

For more information on @keyframes, visit: [Link]

15 CSS Variables (Custom Properties)

CSS variables, also known as custom properties, allow you to store values that can be reused
throughout your stylesheet. They are defined using the -- prefix and accessed using the var()
function.

15.1 Defining CSS Variables

Variables are typically defined in the :root selector to make them globally available, but they can
be defined in any selector for scoped usage.
Example:

: root {
-- main - color : #00334 C ;
}

main {
background - color : var ( - - main - color ) ;
}

15.2 Benefits of CSS Variables

• Reusability: Define once, use multiple times throughout your stylesheet
CSS & HTML Reference 23

• Maintainability: Change a value in one place to update it everywhere

• Dynamic updates: Can be changed with JavaScript at runtime

• Scoping: Variables can be scoped to specific elements

16 The calc() Function

The calc() function allows you to perform mathematical calculations to determine CSS property
values. It can mix different units (like percentages and pixels) in a single calculation.

16.1 Basic Syntax

property : calc ( expression ) ;

16.2 Supported Operations

• Addition: +

• Subtraction: -

• Multiplication: *

• Division: /

16.3 Examples
Mixing units:

. container {
width : calc (100% - 50 px ) ;
height : calc (100 vh - 80 px ) ;
}

Using with CSS variables:

: root {
-- sidebar - width : 250 px ;
}

. main - content {
width : calc (100% - var ( - - sidebar - width ) ) ;
}

Complex calculations:
CSS & HTML Reference 24

. element {
padding : calc (1 rem + 2 px ) ;
margin : calc (10 px * 2 + 5 px ) ;
font - size : calc (16 px + (20 - 16) * ((100 vw - 320 px ) / (1920 -
320) ) ) ;
}

Note: For addition and subtraction, spaces around the operator are required. For multiplica-
tion and division, spaces are optional but recommended for readability.

17 CSS Grid
A layout model used for creating responsive layouts of multiple rows and columns. An element can
be made a grid container with display: grid, and all of its direct children will automatically be
laid out as grid items in a single cell.
A rectangular subsection of a grid is known as a grid area. The dividers between each row
and column are known as grid lines, and the rows and columns they create are called tracks.

17.1 Grid Container Properties

For grid containers, these are some of the most common properties used to layout their grid items:

17.1.1 grid-template-columns
Determines the number of columns and their sizes. The unit fr can be used as a fractional unit
here to create a responsive design.

17.1.2 grid-template-rows
Determines the number of rows and their sizes. The unit fr can be used as a fractional unit here
to create a responsive design.

17.1.3 grid-template-areas
Creates names for grid areas that grid items can place themselves in.
Example:
CSS & HTML Reference 25

body {
display : grid ;
grid - template - columns : [ left ] 3 fr [ middle ] 1 fr [ right ];
grid - template - rows : 1 fr 3 fr 1 fr ;
grid - template - areas :
" header header "
" main aside "
" footer footer ";
gap : 10 px ;
}

header {
grid - area : header ;
}

main {
grid - area : main ;
}

aside {
grid - area : aside ;
}

footer {
grid - area : footer ;
}

17.1.4 justify-content
Determines how grid tracks are aligned along the inline-axis (row) with possible values including
start, end, center, space-around, space-between, and space-evenly.

17.1.5 align-content
Determines how grid tracks are aligned along the block-axis (column) with possible values includ-
ing start, end, center, space-around, space-between, and space-evenly.

17.1.6 align-items
Determines how grid items are aligned in columns (called the block-axis). Possible values include
start, end, center, and stretch.

17.1.7 justify-items
Determines how grid items are aligned in rows (called the inline-axis). Possible values include
start, end, center, and stretch.
CSS & HTML Reference 26

17.1.8 place-items
A shorthand for both align-items and justify-items. If one value is given, it will apply to both.
If two values are given, they will apply to align-items and justify-items respectively.

17.1.9 gap
Determines the amount of space between grid items. This can take one or two length values. If
it is given two, they will be treated as a row gap and a column gap respectively. Alternatively,
a row-gap and column-gap property can be specified to individually set the gap between rows and
columns.

17.2 Grid Item Properties

For grid items, these are some of the most common properties used to position themselves:

17.2.1 grid-column-start
Determines what column this item starts on, based on a line number.

17.2.2 grid-column-end
Determines what column this item ends on, based on a line number.

17.2.3 grid-column
A shorthand for both grid-column-start and grid-column-end specified in the format start / end.

17.2.4 grid-row-start
Determines what row this item starts on, based on a line number.

17.2.5 grid-row-end
Determines what row this item ends on, based on a line number.

17.2.6 grid-row
A shorthand for both grid-row-start and grid-row-end specified in the format start / end.

17.2.7 grid-area
Places the item in a grid-area based on a name created in grid-template-areas.

17.2.8 align-self
Overrides the align-items value used for the grid container.

17.2.9 justify-self
Overrides the justify-items value used for the grid container.
CSS & HTML Reference 27

17.2.10 place-self
A shorthand for both align-self and justify-self in the same format as place-items.

17.3 Additional Resources

For more information on CSS Grid, visit: [Link] ridL ayout

18 HTML Essentials
18.1 Document Structure

<! DOCTYPE html >

< html lang =" en " >
< head >
< meta charset =" UTF -8" >
< meta name =" viewport " content =" width = device - width , initial - scale
=1.0" >
< title > Page Title </ title >
< link rel =" stylesheet " href =" styles . css " >
</ head >
< body >
<! - - Content goes here -->
< script src =" script . js " > </ script >
</ body >
</ html >

18.2 Semantic Elements

< header > <! - - Page or section header -->

<nav > <! - - Navigation links -->
< main > <! - - Main content -->
< section > <! - - Thematic grouping -->
< article > <! - - Self - contained content -->
< aside > <! - - Side content -->
< footer > <! - - Page or section footer -->
CSS & HTML Reference 28

18.3 Text Elements

<h1 > to <h6 > <! - - Headings -->

<p > <! - - Paragraph -->
<a href =" url " > <! - - Link -->
< strong > <! - - Bold / important -->
<em > <! - - Italic / emphasis -->
<br > <! - - Line break -->
<hr > <! - - Horizontal rule -->

18.4 Lists

<! - - Unordered List -->

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

<! - - Ordered List -->

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

18.5 Tables

< table >

< thead >
<tr >
<th > Header 1 </ th >
<th > Header 2 </ th >
</ tr >
</ thead >
< tbody >
<tr >
<td > Data 1 </ td >
<td > Data 2 </ td >
</ tr >
</ tbody >
</ table >
CSS & HTML Reference 29

18.6 Forms

< form action ="/ submit " method =" POST " >
< label for =" name " > Name : </ label >
< input type =" text " id =" name " name =" name " required >

< label for =" email " > Email : </ label >
< input type =" email " id =" email " name =" email " >

< label for =" message " > Message : </ label >
< textarea id =" message " name =" message " > </ textarea >

< select name =" options " >

< option value ="1" > Option 1 </ option >
< option value ="2" > Option 2 </ option >
</ select >

< input type =" checkbox " id =" agree " name =" agree " >
< label for =" agree " > I agree </ label >

< input type =" radio " id =" yes " name =" choice " value =" yes " >
< label for =" yes " > Yes </ label >

< button type =" submit " > Submit </ button >
</ form >

18.7 Media Elements

<! - - Image -->

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

<! - - Video -->

< video controls width ="400" >
< source src =" video . mp4 " type =" video / mp4 " >
</ video >

<! - - Audio -->

< audio controls >
< source src =" audio . mp3 " type =" audio / mpeg " >
</ audio >

18.8 Common Attributes

• class="classname" - CSS class

• id="uniqueid" - Unique identifier

• style="property: value;" - Inline styles

CSS & HTML Reference 30

• data-*="value" - Custom data attributes

• title="text" - Tooltip text

• placeholder="text" - Input placeholder

• required - Required form field

• disabled - Disabled element