Getting Started Using CSS

Let’s start this lesson with a comparison:

A website is like a wall of bricks.

Normal document flow

A wall of bricks and a web page are somewhat similar in the fact that they both consist of building blocks:

• A wall has bricks.
• A web page has HTML elements.

While each brick is the exact same size, the focus here is on the width. The elements of a web page come in two sizes:

• Inline elements
• Block elements

An inline element is just like a regular brick.

Just as bricks line up next to each other to form a row of bricks, inline elements also line up next to each other to form a row of inline elements.

Contrary to an inline element, a block element stretches the entire width of the space that it has available.

Simply put, an HTML page consists of a number of bricks of different widths:

• Inline bricks (inline elements): Their width depends on the amount of text they contain.
• Block bricks (block elements): Their width is, by default, set to 100% of the width place where they live (in our metaphor, the wall).

Before looking at an example, let’s just briefly mention how the elements are stacked on a web page:

• Top to bottom
• Left to right

This is where our wall of bricks metaphor starts to break down. The way that the bricks on a wall are usually stacked is:

• Bottom to top
• Left to right (probably true, because the majority of people are right-handed)

Stacking elements on a web page is commonly referred to as the normal document flow.

The normal document flow of elements on a web page is identical to how text on a page in a book is usually read in the English language, that is, left to right, and top to bottom.

An example of a document

To illustrate this better, let’s look at our example.

Here’s the HTML code of our example:

Some of the code in our CSS is commented out using the opening (/*) and closing (*/) multiple-line CSS comment syntax. A comment tells the browser not to read the code text between these delimiters as a part of the code. Therefore, comments are handy for putting whatever additional information we need that will help us understand the code better or remind us of something that needs to be updated or kept in mind.