This series of posts is titled HTML and CSS Basics. If you’re just starting out with web development, it is crucial to read and understand this series of posts.

This is the first post in this series.

Before we even begin, let’s address the fact that the main image for this post is a wall of bricks. Why is that? Because a wall of bricks is a suitable metaphor about how HTML is laid out in web browsers. With that out of the way, let’s start our article!

A wall of bricks Photo by Ilario Piatti, @ilariopiatti on Unsplash

Table of Contents

Here’s the full list of all blog posts in this series:

  1. Part 1: Browser whitespace, HTML elements, CSS element selectors
  2. Part 2: Normal document flow, block elements, and inline elements
  3. Part 3: Examples of styling block-level elements; CSS element selectors versus CSS class selectors
  4. Part 4: Controlling document flow via CSS display property
  5. Part 5: Further exploration of the CSS display property, block-level, and inline elements
  6. Part 6: The box model in CSS
  7. Part 7: CSS Positioning
  8. Part 8: Relative, absolute, and fixed positioning
  9. Part 9: Images and floats in CSS
  10. Part 10: CSS selectors and CSS targeting revisited
  11. Part 11: Building the first layout
  12. Part 12: Responsive web layouts with media queries
  13. Part 13: Converting our first layout into a responsive one
  14. Part 14: CSS resets and Emmet
  15. Part 15: Column-based CSS layouts
  16. Part 16: Frontend CSS frameworks
  17. Part 17: Introduction to SCSS
  18. Part 18: Build your own micro CSS framework
  19. Part 19: Building a layout with our micro CSS framework
  20. Part 20: Building a layout with Bootstrap
  21. Part 21: CSS animations and transitions
  22. Part 22: CSS variables
  23. Part 23: CSS grid
  24. Part 24: CSS tips and tricks for beginners

To make our code examples easier to follow and play with, we’ll be using Codepen.

Let’s start learning the basics of HTML and CSS!

Browser whitespace

Let’s say that we have an HTML file, with the following contents inside:

1
2
3
4
5
6
7
8
9
10
This is just some random text. 

We can tag it, but we don't have to.

Notice that the browser does not honor any whitespace, except 
single
    whitespace
      characters.

It doesn't honor ENTERs and TABs.

Here’s a quick question: How will the above text display in the browser?

In other words, will the browser display the above text with the exact same formatting, or will it be displayed differently?

Ultimately, this question can be rephrased to this: How does the browser deal with whitespace?

To find out, let’s check out our first Codepen example, 001 Browser whitespace pt1a.

Looking at the above referenced code, we can draw two conclusions:

  1. The browser doesn’t honor whitespace, except single whitespace characters.
  2. All the ENTERs, TABs, and whitespace characters, are all collapsed into a single whitespace character

HTML elements alter this default behavior

To alter this default behavior, we can simply add some HTML opening and closing tags around any number of words in our text example.

Thus, we can add the opening <h6> tag, and the closing </h6> tag, around the sentence that reads: It doesn’t honor ENTERs and TABs.

In our second example, titled 001 Browser whitespace and normal document flow pt1b, we’re adding four different HTML elements (aka HTML tags), as follows:

<h6>It doesn't honor ENTERs and TABs.</h6>
<h3>It doesn't honor ENTERs and TABs.</h3>
<h1>It doesn't honor ENTERs and TABs.</h1>
<div>It doesn't honor ENTERs and TABs.</div>

In the Codepen preview window, we can see that adding these tags around the exact same piece of text, makes the browser display that text differently.

The <h6> is the smallest heading element. The largest one is the <h1> tag.

The <div> element is used to group elements on the page when there’s no better tag available to group them.

Based on the above, we can add two additional conclusions for HTML:

  1. HTML elements have an opening tag: <>, and a closing tag: </>
  2. Some HTML elements only have an opening tag. No need to close a <br> or an <hr>!

Note: a <br> tag is a breaking space - similar to pressing the ENTER in a text processing software, such as MS Word. An <hr> tag is the horizontal rule tag; it gives us a horizontal line to visually separate the contents of the page.

Next, we’ll discuss some basic CSS from our example.

Getting started using CSS

Notice that on this Codepen example, we’ve also got the CSS section with some actual CSS code:

div { background: orange; border: 1px solid tomato }

What does this code do?

Targeting HTML elements on the page using CSS declarations

CSS is used to make a web page better-looking.

This is achieved using CSS declarations. Here is a “formula” for a CSS declaration:

target {
  property: value;
  property: value;
}

In our example:

  • the target is the <div> element.
  • the first property is the background property.
  • the value on the first property is orange. It is a named HTML color.
  • there are many named HTML colors, so to keep things interesting and easier to remember, we’ll be using food-named colors here. There are about 10 of those.
  • the second property is the border property.
  • the value on the border property is 1px solid tomato. As we can see here, this property has 3 values. This is sometimes possible in CSS.
  • To remove all the borders simply use: border: none property-value pair.

We’ve just learned how easy it is to get started with HTML and CSS. In the next post in this series, we’ll further expand our knowledge, by discussing just what that wall of bricks metaphor is all about.