Parts Of An HTML Document And How It Works With CSS

This piece is part of a Learn HTML & CSS series. Check out part 1 here - What is a markup language? HTML Reference Cheatsheet.

At its basic, HTML has three parts to it:

the document type declaration -- this tells the browser what kind of file type it is
the <head> section -- this gives the meta details about the document such as the page title and character type.
the <body> section -- this contains the rest of the page and what gets rendered for your users to see.

Here's what it looks like in code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML Page</title>
</head>
<body>



</body>
</html>

There are different attributes that you can attach to your <meta> tag in order to enrich your page with more information. This information is often used by crawlers to index you page into search engines.

Here is a quick example of what the <meta> tags and their attributes can look like:

Defining keywords for search engines

<meta name="keywords" content="HTML, CSS, JavaScript">

Defining the description of your webpage

<meta name="description" content="Just to make it easier for crawlers to know what your page is about">

Defining the author of a page

<meta name="author" content="Aphinya Dechalert">

Setting the viewport to make your website look good on devices

<meta name="viewport" content="width=device-width">

Refreshing the document every 30 seconds

<meta http-equiv="refresh" content="30">

Setting the character set to use

<meta charset="utf-8">

This is mostly the barebones of an HTML document. Now, this is where the fun part begins.

Before we start looking at CSS, we must create something for the CSS to style. Think of the HTML as the skeleton that you're going to decorate. This means that if your HTML is structured incorrectly, it's going to make applying your CSS a lot harder.

So how do you structure your HTML correctly? Start by figuring out what your webpage is going to look like. Make a list of all the various visual assets that you're going to have.

Here is a list of common parts that we usually find on most web pages we encounter.

header
navigation bar
main content
sidebar
footer

Here is an example of what a simple webpage can look like with all the different parts:

This leads us to the question, how do we go about writing the HTML structure for this?

One thing you must know about HTML is that elements generally default into a block state. This means that your element stretches the entire width of your page. There are a handful of inline ones -- where the element just continues with the flow such as <a> tags for links. CSS works its magic by applying styling rules such as widths, colors, typography, and whatever else is required to make your webpage the way you want it to look.

When it comes to CSS, the application of styling naturally flows from left to right. It is good practice to write your HTML in order of appearance to make your coding life easier when it comes the time to apply your CSS. If we look at the wireframe example above, we can see four distinct sections where each of the smaller elements can be grouped together. These are the header area, the sidebar area, the content area, and the footer area.

Each of these sections has smaller components inside them. For example, the sidebar consists of the 'Latest Stories' widget, 'Featured Author' widget, and two advert widgets. The content area contains the main content area and the 'more articles' section, which are then broken down into their component pieces. The main content area, for example, contains the headings, post meta, and content. The 'more articles' section contains a list of clickable images. The main content area and the 'more article' section adds up to form the content area.

Here is an example of the HTML scaffold to give you the gist of what it can look like before the bits and pieces such as text are put in:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Simple Blog Sample</title>
</head>
<body>
  <header>
      <!-- header content here -->
      <img />
      <nav></nav>
      <form></form>
  </header>
    
  <section>
      <!-- sidebar content here -->
      <!-- divs used as widget containers -->
      <div></div> 
      <div></div>
      <div></div>
  </section>
    
  <main>
      <!-- for the main article section -->
       <article></article>
      <!-- for the 'more articles' section -->
       <section></section> 
  </main>
    
  <footer>
      <!-- footer content here -->
      <p>Copyright. Cupcake Zone.</p>
  </footer>
</body>
</html>

Here's what it looks like before CSS is applied:

Here is the actual code that got us the above screenshot:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Simple Blog Sample</title>
</head>
<body>
  <header>
      <!-- header content here -->
      <img src="https://via.placeholder.com/150"/>
      <nav>
        <a href="">home</a>
        <a href="">menu 1</a>
        <a href="">menu 2</a>
        <a href="">menu 3</a>
      </nav>
      <form>
        <input type='text' placeholder='search'>
      </form>
  </header>
    
  <section>
      <!-- sidebar content here -->
      <!-- divs used as widget containers -->
      <div>
        <h2>Latest Stories</h2>
        <a href="">JavaScript Strikes Again</a>
        <a href="">Best Kept CSS Secrets</a>
        <a href="">HTML went on a hike and got lost</a>
      </div> 
      <div>
        <h2>Featured Author</h2>
        <p>Aphinya Dechalert</p>
        <p><a href="">@dottedsquirrel</a><p>
        <img src="https://via.placeholder.com/150"/>
      </div>
      <div></div>
  </section>
    
  <main>
      <!-- for the main article section -->
       <article>
         <h1>Blog Post Heading</h1>
         <h2>some awesome sub title here</h2>
         <p>17th August 2021 / by Aphinya Dechalert / Tags: <a href="">HTML</a> , <a href="">CSS</a></p>
         <img src="https://via.placeholder.com/150"/>
         <img src="https://via.placeholder.com/150"/>
         <p>Biscuit tiramisu pastry sugar plum ice cream sesame snaps oat cake. 
           Candy canes jelly beans jujubes jelly-o muffin halvah gingerbread cotton candy. 
           Tart chocolate bar tart sweet marzipan dessert marshmallow biscuit pie. 
           Chocolate bar cupcake I love pastry caramels cupcake jelly dragée. 
           Candy pastry carrot cake.<p>
         
         <p>Cake fruitcake soufflé I love oat cake cake soufflé. 
           Jelly-o lemon drops sugar plum danish ice cream fruitcake bear claw icing jujubes. 
           Pie toffee jujubes biscuit. 
           Sesame snaps sesame snaps jujubes cheesecake cookie cake.</p>

         <p>Cheesecake candy donut tart tiramisu chocolate donut. 
           Marshmallow I love I love. 
           Sweet roll jelly soufflé sugar plum oat cake macaroon. 
           Sugar plum oat cake cake brownie I love donut sesame snaps bonbon.</p>
         
         <p>Cake fruitcake soufflé I love oat cake cake soufflé. 
           Jelly-o lemon drops sugar plum danish ice cream fruitcake...</p>

       </article>
      <!-- for the 'more articles' section -->
       <section>
         <h2>More Articles</h2>
         <img src="https://via.placeholder.com/150"/>
         <img src="https://via.placeholder.com/150"/>
         <img src="https://via.placeholder.com/150"/>
       </section> 
  </main>
    
  <footer>
      <!-- footer content here -->
      <p>Copyright. Cupcake Zone.</p>
  </footer>
</body>
</html>

Parts CSS and How It Works With HTML

A CSS rule is made up of two components - the selector and the declaration block. A declaration block contains one or more declarations. Each declaration contains a property and value pair.

A selector lets the interpreter know which HTML element you want to target. In the example below, all <p> elements are affected. The declaration block contains the rules that determine how the selector should look. All p elements will be green.

The linear arrangement of rules determines what the final HTML page looks like. For example, if you have the same selector declared, the last one in the file will be applied.

Here is an example:

h1 { color: green; font-size: 2em; }
h1 { color:red; }

In the code snippet above, h1 tags will be red and not green because there is another h1 selector that overrides the color property. font-size will remain the same.

There are five types of CSS selectors. Here is a quick explanation and reference guide:

Selector Type	Description
simple	Simple selectors are based on the element's name, id or class. Eg: `p`, `h1`, `.col` and `#checkbox` are all simple selectors.
combinator	Combinator selectors are based on combination of selectors and will only apply if the pattern matches. Eg: `.col .content p` -- only the `p` element that sits directly inside `.col` and `.content` will be affected. CSS will not be applied to `p` elements that exists outside of `.col` and `.content`.
pseudo-class	pseudo-classes represents a state that is available on a simple selector. Eg: `<a>` elements have four states based on the situation -- `link`, `visited`, `hover`, `active`. These states are called pseudo-classes and can be styled individually by using `:` -- for example -- `a:link{ color: red; }`
pseudo-elements	Pseudo-elements are used to style specific parts of an element such as the first letter, first line, before and after spaces. You can target a specific element with pseudo-elements via `::`. Eg: `p::first-line { color: red; }`
attribute selectors	Attribute selectors is used to select elements with specific attributes. In your HTML, you can set attributes inside your elements -- for example: `<input type='text' />` -- `type='text'` is your attribute and this can be targeted by the CSS like this: `input[type="text"]{ font-size: 18px; }`

How it works with HTML

A browser applies CSS rules to an HTML page to change the way things are displayed. CSS selectors tell the browser which element to apply the visual rules set to the declaration block.

When a browser renders an HTML page, it parses the HTML code and creates a Document Object Model in the computer’s memory. During parsing, it loads the associated files declared in the HTML and parses it accordingly. With CSS, the browser attaches the style to the created DOM nodes. The browser then displays the DOM on the screen.

The DOM works in a tree-like structure. This means that each element, attribute, and any piece of text becomes part of the DOM node in this tree structure. Relationships between DOM nodes use the same language as we would in relation to a gender-neutral family.

Elements can be parents of child nodes and child nodes can have siblings. Understanding how DOM nodes are related to one another can help you design and debug your CSS. This is because CSS selectors are traced through the DOM tree and applied accordingly.

Take a look at the code below.

<body>
 <h1>Tibbers the cat</h1>
 <p>Here is a list of Tibber's friends</p>
 <ul>
 	<li>Mooers</li>
 	<li>Lilac</li>
 	<li>Mr. Stark</li>
 </ul>
</body>

What the relationships look like in the DOM.

Inline, internal and external Stylesheets

There are three ways to apply CSS to an HTML document. You can do this via inline CSS, internal and external stylesheet.

Inline styles refers to the CSS declarations that impact one element only. This is contained within the style attribute of your HTML tag.

Here is an example:

<h1 style="color:red; border:solid 1px blue;">
Hello!
</h1>

An internal stylesheet is when you have your CSS rules inside the same HTML document. Use <style> to write an internal stylesheet.

<style>
 h1 { color:pink; }
 p { color:green; }
</style>

Use <link> to load an external stylesheet:

<link rel="stylesheet" type="text/cess" href="yourfile.css" />

And that's basically it in a nutshell. Selectors will be expanded with more in-depth explanations and examples in the next article.

Continue reading part 3: HTML, The Cascade, and Ways To Think In CSS