CSS is full of anomalies and idiosyncrasies. There’re important terminologies we must firmly understand and agree:

1. Types

There’re three common types of CSS in a document:

1.1. Inline CSS

Inline CSS is written directly in the open tag of an element. E.g., <p style="color: blue">Lorem Ipsum</p>.

Other documentations may call this type of CSS as inline styles.

1.2. Internal CSS.

Internal CSS is embedded in a document via style element. E.g., <style>p { color: blue }</style>. The most common place where we meet internal CSS is inside the head tag of HTML documents.

Other documentations may call this type of CSS as internal styles or embedded styles.

1.3. External CSS.

External CSS is written in a separate style sheet and linked to a document via conventions of document language. E.g., <link rel="stylesheet" href="http://xyz.io/app.css">.

Other documentations may call this type of CSS as external styles.

2. Origins

There’re three common CSS origins in a document:

2.1. Author style sheet

Author style sheets are specified by an author (e.g., a frontend developer) via conventions of document language.

2.2. User agent style sheet

User agent style sheets are provided by default from an user agent (e.g., Chrome browser) in ways that satisfy general presentation expectations for document language.

2.3. User style sheet

User style sheets often come from end users (e.g., your mom) who use an user agent to customize font size, colors…

3. Elements

Similar to HTML, there’re also some types of elements in CSS:

3.1. Root element

There’s no official definition about root element. But from common sense, we can assume that root element is element that is at the top of document tree. In HTML documents, it is the html element.

3.2. Positioned element

An element is said to be positioned if its position property has a value other than static.

3.3. Replaced element

An element whose content is outside scope of CSS formatting model is a replaced element. In other words, content of replaced elements cannot be styled because they’re from outside document source. For example, the content of the img element is replaced by its src attribute’s value, the content of input field is entered by users. Typical replaced elements are img, object, video or form elements like textarea, select and input

Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined).

3.4. Non-replaced element

An element whose content is inside scope of CSS formatting model (e.g., the p element) is a non-replaced element because its content is found within the element while formatting a document.

3.5. Block-level element

Element that are formatted visually as blocks are called block-level elements. In other words, they stack vertically in normal flow. E.g., div, li, p

Block-level elements often take up all available width.

Common values of the display property of block-level elements are: block|list-item|table.

3.6. Inline-level element

Elements that do not form new blocks of content are called inline-level elements. In other words, they are distributed horizontally. E.g., span, strong

Inline-level elements often take up as much width as necessary for their content.

Common values of the display property of inline-level elements are: inline|inline-block|inline-table.

4. Boxes

4.1. Principal box

Every element generates a primary rectangular box called principal box.

4.2. Block-level box

Principal boxes of block-level elements are called block-level boxes.

4.3. Inline-level box

Principal boxes of inline-level elements are called inline-level boxes.

4.4 Block container box

A block-level box, which is not generated by a table or a replaced element, is called block container box. This type of box contains only block-level boxes or inline-level boxes.

4.5. Block box

A box, which is both block-level box and block container box, is called block box. For example:

<div class="block-box">
    <span>Lorem Ipsum</span>
    <img src="lorem-ipsum.png">

The div above is a block box because it is a block-level box that is not generated by table or replaced element and contains only inline-level boxes.

4.6. Anonymous block box

If a block container box has a block-level box inside it, we assume that inline-level elements before and after the block-level box are enclosed in anonymous block boxes. For example:

<div class="block-box">
    <u>anonymous block box</u>
    <p>normal block box</p>
    anonymous block box

Note that those inline elements still has properties of an inline-level element. Nothing changes internally.

4.7. Inline box

An inline box is one that is both inline-level box and whose contents participate in its containing inline formatting context. A non-replaced element with a display value of inline generates an inline box.

4.8. Anonymous inline box

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element:

<p id="box" class="inline-box">
    <em>an inline box</em>
    and an anonymous inline box

4.9. Inline-block box

This is a box that is like a block box internally, but acts like an inline box externally.

4.10. Containing block box

The containing block of an element is defined as follows:

  1. The block in which the root element lives is a containing block named initial containing block. For continuous media, it has the dimensions of the viewport.
  2. For other elements, if the element’s position is relative or static, the containing block is formed by the content edge of the nearest ancestor block container box or which establishes a formatting context.
  3. If the element has fixed position, the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.
  4. If the element has absolute, the containing block is established by the nearest ancestor with a position of absolute, relative or fixed, in the following way:
    1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.2, if the inline element is split across multiple lines, the containing block is undefined.
    2. Otherwise, the containing block is formed by the padding edge of the ancestor.

If there is no such ancestor, the containing block is the initial containing block.

5. Flows

5.1. Normal flow

Normal flow is the left-to-right, top-to-bottom rendering of text in Western languages and the familiar text layout of traditional HTML documents.

5.2. Out-of-flow

An element is called out-of-flow if it is floated, absolutely positioned, or is the root element.

5.3. In-flow

An element is called in-flow if it is not out-of-flow.

6. Values

6.1. Initial value

Each property has a default value, which is defined in the property’s definition table, is called initial value. This value is not browser’s default.

6.2. Specified value

While processing document, user agents must first assign a value to each property based on the following mechanisms:

  1. If the cascade results in a value, use it.
  2. Otherwise, if the property is inherited and the element is not the root element, use the computed value of the parent element.
  3. Otherwise use the initial value.

6.3. Computed value

From specified values, relative lengths (e.g., em) will be converted into absolute lengths, relative URIs will be converted into absolute URIs. The converted results are called computed values.

Child elements generally inherit computed values of their parent as its specified values.

7. Viewport

Viewport is a window or other viewing area on a device’s screen through which users can consult a document.


8. Formatting context

8.1. Block formatting context

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties.

8.2. Inline formatting context

An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.

A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the ‘vertical-align’ property. When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxes. Line boxes are stacked with no vertical separation (except as specified elsewhere) and they never overlap.

9. Media Queries

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device… Below are common queries:

9.1. all

Suitable for all devices.

9.1. screen

Intended primarily for color computer screens.

9.3. print

Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.

9.4. tv

Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).