Some HTML and CSS Fundamentals

Last Updated:   11/21/24  02:54                 Jeffrey Knauth

This document describes some of the basic concepts of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets), two programming languages which are used to create web pages.  References at the end of the page provide much more information, including examples.  It's important to understand that although HTML and CSS contain MANY facilities, you can produce very useful web pages by using just a small subset, e.g., the structuring tags and styling properties mentioned below. They were used to create the web page you are now viewing. The main objective of this document is to show how things fit together for such a page.

(click to jump to a section)
(click to jump to a section)

Contents


A source file is used to produce a web page.

The source file for a web page is a text file with an .htm or .html file extension, e.g., myvacation.htm. The .htm and .html file extensions are equivalent.

The source file is usually on some website server accessible via the internet. However it can instead just be on your PC. Usually that's where it will be while you are developing the web page (source file) and viewing that local file with a browser on the PC during testing. Then when the file is deemed ready to go, it can be uploaded to a website.

However, putting the file on a remote website is not required. The file can be very useful if just viewed locally, either on your own PC or provided to someone else to view on their PC, tablet, phone, etc. Maybe you send them the source file via email or have it on a flash drive -- no remote website required. I'll still call the result a web page even though it can be used completely apart from the internet.

Actually, a web page might involve multiple files, as described below. Such files can provide styling controls, text, images, videos, independent web pages, etc. These can be spread across multiple locations, local and remote. However the main file is the source file; it links to the other files. It is the anchor for its web page and is the focus of this document.

The source file has two major sections:  body and head.

The body contains your (structured) data.  The head contains control information to format (style) your data.  The code below for a skeleton web page shows how the sections are organized in a typical source file.

A <!DOCTYPE html> statement is put at the top of every HTML5 source file to tell the browser that this source file is expected to follow HTML5 standards.  The lang="en-us" in <html lang="en-us"> means the source file is written in US English. You can (and should) include comments in the source file to help with future maintenance; comments are ignored by the browser. Comments have two different formats, depending on where they are located in the source file. Comments in a style section look like this: /* ... */.  Elsewhere, e.g., in the body section, comments look like this: <!-- ... -->. In the source file image below I have colored the comments red and highlighted the content areas with a white background. Your text editor probably would display these differently. Also, for this tutorial display, I added background colors for the file, head, and body sections; those special backgrounds would not be seen in a text editor.

Later sections in this document will describe HTML tags and styling rules. For example in the code below, body {background: #DEE;} makes the body's background color light-green-blue. (CSS provides many ways to specify colors, from simple names like "red" to complex terms like "#CF360E50".) The defaults for most CSS properties are fine, but you can specify your own settings to get exactly what you want.

<!DOCTYPE html> <!-- you can put comments here, but only AFTER the DOCTYPE statement --> <html lang="en-us">
<head> <title>Colorful Animals</title> <!-- this text goes in the page's browser tab --> <style> body {background: #DEE;} /* format page's body */ h1 {font-style: italic; text-align: center;} /* format page's main heading */ li#dog {font-weight: bold; color: red;} /* format id="dog" list item */ /* format class="emppara" paragraphs */ p.emppara {color: blue; width: fit-content; margin: auto; font-weight: bold;} </style> <style media="print"> /* these overriding rules take effect only when printing */ p.emppara {color: white; background: black; padding: .5em;} </style> </head>
<body> <h1>Colorful Animals</h1> <!-- main heading will use special formatting --> <p class="emppara">Take note.</p> <!-- special formatting for "empara" class -->
<!-- this paragraph uses default formatting -- has no specific rule in style section --> <p>Here are my recent sightings from around the worst affected areas:</p>
<ol> <!-- creates an ordered list with no special "whole list" formatting --> <li>Purple cows</li> <!-- this list item will use default formatting --> <li id="dog">Green dogs</li> <!-- special formatting for id="dog" list item --> <li>Pink snakes</li> <!-- this list item will use default formatting --> </ol> <p class="emppara">BEWARE!!!</p> <!-- special formatting for "empara" class --> </body>
</html>

If there were no style sections in the above source file, i.e., use default formatting, the file would display like the image on the left. With the above style sections, on a screen it would display like the center image and, when printed on a black and white printer, the output would be like the image on the right. Note the special (overriding) style applied to the first and last paragraphs when the page is printed instead of displayed.

NS output CO output BW output

The body section contains your data, i.e., the information you want to convey.

The data is structured as elements, e.g., headings, paragraphs, lists (ordered and unordered) consisting of list items, tables with rows and with cells in the rows, divisions for grouping other elements, spans to designate areas for special formatting, anchors (e.g., links to other documents), preformatted areas, and images.

To do the structuring, HTML tags are used to delimit elements. These tags have a paired begin tag and end tag, e.g., <p> and </p>, with the element's data in between, e.g., <p>This is my paragraph.</p>. For some special tags, whose elements contain no data to delimit, the two tags are combined into a single begin-end tag, e.g., <hr />, <img />, and <br />.

Here are some examples of HTML start tags, which produce the types of elements listed in the paragraph above. Each of these (except <img />) has a paired end tag, </...>. Also listed are the basic document structuring elements (html, head, body, and style) shown in the above skeleton file.

<h1>
<h2>
<p>
<ol>
<ul>
<li>
<table>
<tr>
<td>
<div>
<span>
<a>
<pre>
<img>
<html>
<head>
<body>
<style>

Start tags can be modified with attributes, e.g., class, id, and style. These attributes have values, e.g., <p class="warn">, <div class="sway emp">, <li id="zebra">, <li id="hippo" class="endangered">, and <span style="color: orange;">.

The names after class and id indicate which rules in the head section are to be used to style the associated elements in the body section. Any number of elements can be in the same class, e.g., many <p class="warn"> paragraphs might be styled by a p.warn {color: red;} rule. The id attribute works similarly, but id names must be unique; so there can be only one element with an id of "zebra". If it is <li id="zebra">, that element might be styled with a rule such as li#zebra {font-weight: 700;}. Note that in selectors, "." is used for classes and "#" is used for ids.

The head section is used to style/format the elements in the body. It has rules specifying how designated elements are formatted, including the following types of styles and many more:

color of text
text alignment
background
margins
paddings
borders
width
height
font family
font style
font size
font weight
float
clear
list style type
positioning
visibility
box shadowing
text shadowing
white space

A rule consists of a selector and one or more declarations, where each declaration is a property followed by a value, as shown in the diagram below. The selector specifies the element(s) in the body to which the declaration(s) apply, e.g., which paragraphs should have the styling specified by the declaration(s). The properties and values of the declarations specify the styling details to be applied to the selected element(s), e.g., text color is brown and font style is italic. The selectors can be simple or can be quite complex to pinpoint a subset of elements.

PowerPoint diagram
Aside:  The above diagram is an <img> using a picture created with Microsoft PowerPoint. I also made a similar diagram using only HTML/CSS characters, but that is very cumbersome. I tailored it for PCs, on which it displays pretty well. For other devices it is a mess and I didn't bother to try to fix it for them.
FYI:  (PCs only)  Hover the cursor here to display an HTML/CSS version of diagram.
┌────────── declaration block ────────┐
│                                     │
Rule syntax:   selector {property: value; ... property: value;}
│         └─ declaration ─┘     └─ declaration ─┘│
└──────────────────── rule ────────────────────┘

Examples of rules  (with syntax parts colored to match above diagram)

p {color: brown; font-size: 90%; font-style: italic;}
span.term {background: tan;}
p#warn {color: red; font-weight: bold;}
ul li {margin-bottom: 1em;}
div > p.may span {background: cyan; padding: .2em .3em;}
a:hover {color: white; background: blue;}
*.shade {background: #CCC;}

Rules are grouped into style sheets. Multiple style sheets, coming from multiple places, can apply to formatting a web page. For example, in addition to style sheets in the web page's head section, the page can link to other files and import style sheets from them. Also, the browser as well as the browser user can specify style sheets. Which rule is actually used for an element involves cascading, specificity, and inheritance, which are discussed in sections below. Details about selectors and declarations can be found at MDN and W3Schools; see References.

HTML elements produce two-dimensional boxes.

Each element box has the sort of structure shown below on the left.  An example is on the right.

margin
border
padding
content
(<=== width ===>)
(<=========== NOT width ===========>)

This is a paragraph with some padding, a border, and a margin to keep it away from the edges of the containing division.

This is a division  =========> 
It contains one paragraph,
which has this background
and is surrounded by padding
and then a thick border
and then the margin, which
uses the background of the
container, the division.

The padding, border, and margin of an element have four sides:  top, right, bottom, and left.  The size of each side of each property can be specified independently and can be 0, i.e., not present.

In the following, two boxes are adjacent if they are beside each other, either horizontally or vertically, with no other boxes in between. In contrast, a child box can be contained in a parent box and have no other boxes between a side of the parent and a side of the child. Then the margin in question is between those two sides. (See the next section on tree structures for explanations of child and parent.)

Nesting produces a tree structure and familial relationships.

Nesting of boxes is fundamental to HTML, e.g., a division box might contain boxes for headings, paragraphs, ordered lists, and other divisions. The paragraphs might contain spans. The ordered list contains list items, which might contain unordered lists, whose list items might contain spans, etc. -- boxes within boxes within boxes... . It is important to note that intersecting boxes are NOT allowed, i.e., where one box is only partially within another.

Box nesting can be viewed as a simple family tree, as shown in the example diagram below. Each node (box), e.g., division 1, contains all the nodes (boxes) reached by going down paths from it, e.g., image 1, division 2, paragraph 5, list item 2, and others. All such items are in division 1's nest of boxes, although at different levels of nesting.

To understand some terminology, focus on the ordered list element in the diagram.  Follow the paths to/from that element using the list below the diagram.

element tree

Box nesting leads to inheritance.

Many properties of an element can be inherited by its descendant elements. The descendant elements can be multiple layers deep, e.g., <div>...<ol>...<li>...<span>xyz</span>...</li>...</ol>...</div>.  Even though the span is a distant descendant of the div, it can inherit certain properties from the div, e.g., color and font-style, if those properties are not declared directly by a rule for the span or by a rule for any element between the span and that div.

Cascading and specificity dictate which property values apply to an element.

Cascading and specificity control which declarations (property/value pairs) are specified directly for each element in the body. The declarations for that element's property may have been listed in multiple rules in multiple places. Multiple types of selectors may be involved -- some more directly specifying the element in question than others. Every one of the associated declarations could potentially apply, but only one can win for a particular element's property/value. It can get complicated to determine which one of these rules is the winner for a particular element's particular property.

Roughly CSS cascading works like this:  Style sheets can come from multiple sources (origins), e.g., from the browser (these are the main defaults), from the browser user (if the browser provides a way for the user to do this), and from the web page author (usually the desired source for non-default settings). If an origin provides multiple style sheets, they are merged in the order encountered to provide a single style sheet for that origin.

Determining element property values is done one element at a time and then one property at a time for that element. If a rule has multiple declarations, it is logically split into multiple rules in the style sheets, one declaration per rule and with the original selector used for each of these rules. In the following the only rules considered at this stage are those related to the element in question and to the property currently being evaluated; the other rules are ignored for now.

If there is a contest within an origin's merged style sheet, i.e., more than one of the split, single-declaration rules might apply, only the most specific selector's rule is kept for that origin. (There is an algorithm to assign a specificity weight to a rule, e.g., the weight for a rule with an id is larger than the weight for a rule with just a class which is larger than the weight for a rule with no id or class). If there is still a tie (multiple rules in the style sheet with the same high weight), just the last appropriate rule in the style sheet is kept; the search order used for this is top to bottom in the sheet. By now in the process there are only a few rules left, at most one from each origin. The final winner is based on the rule's origin, with the preferred order being first the author's rule, then the browser user's rule if the author's style sheet has no appropriate rule left, then finally the browser's rule as a default if there is no other rule left for the element and property in question.

There are other considerations, e.g., the "important!" setting for a property, which overrides and inverts some preferences; it is recommended to stay away from using this. You can also specify properties directly on tags by using the style attribute, which takes precedence over everything; however it is recommended to use CSS rules in the head section to do such styling in almost all cases.

There are other CSS facilities, which you will probably never use -- layers, at-rules, etc. They further complicate things, but are useful to professional web designers who have to deal with web sites having many complex pages. The designers can use these facilities to help present a uniform appearance across the site.

CSS can create some dynamic effects.

When you hover the mouse cursor over an element, CSS can change the web page.  After first positioning the page (see below), carefully hover the cursor over each of the green list items, leaving the cursor in place until the effect completes. The third item's effect takes about seven seconds; be patient, then move the cursor away.

To position the page to best display the effects, first click here.  (On some devices you may then need to scroll down a few lines to bring all three list items into view.)  Then hover on each item in turn.
A simple effect (ho hum)
A dramatic effect BOO! (yikes!)
A VERY dramatic effect WHO?! (someone failed anger management class FOUR times!!!)

(These effects didn't even use audio, haptics, or olfactory facilities -- stay tuned!)

HTML and CSS care about case, but not spacing.

Here's some of the fancier stuff I didn't cover.

Either I didn't mention them at all or I didn't give details about the following items; however many of them were used to create this page. You can look at the source file for this page to see how they were used. My more detailed text on HTML and CSS has more information on most of those in the table on the left. The commonly used items are listed first in that table; the facilities used to produce the "frills", e.g., the angry "WHO?" block, are at the end. The table on the right lists some other interesting HTML and CSS items that are worthwhile investigating eventually, but none of them were used to create this page. See the MDN and W3School references below for full details on all the items.

Used To Create This Web Page
  • Coloring text and backgrounds
  • Text formatting, e.g., bold, italic, font size, indenting
  • Box sizing and managing line heights
  • Classes and ids for element selection
  • Lists, ordered and unordered
  • Images
  • Tables
  • Anchors (hyperlinks)
  • :hover and :link pseudo classes
  • Horizontal rules
  • Box rounding
  • Text formatted with <pre> or white-space
  • Printing and controlling page ejects
  • @media for device-specific formatting
  • Floats of elements to the left or right
  • Flex boxes
  • Positioning of elements relative to their containers
  • Box and text shadows
  • Ability to hide or display elements
  • Transitions from one appearance to another
  • Rotating an element
Not Used To Create This Web Page
  • Animation
  • Multiple columns
  • Definition lists
  • Clip-path
  • Overflow
  • Scrolling
  • Z-index
  • Counters
  • Grids
  • Outline
  • Forms
  • Opacity
  • Widows and orphans
  • Word and letter spacing
  • Resizing blocks
  • Transforming blocks
  • Pseudo classes other than :hover and :link
  • Pseudo elements, e.g., ::before and ::after
  • Content, e.g., to use with ::before and ::after
  • JavaScript

Steps To Create a Web Page

Here's how I typically create a new web page.

  1. Use a text editor to write the content in rough form. For example I create the headings, paragraphs, and lists I eventually want, but without indenting, list markers, or other such styling.
  2. Insert this text in the body section of a skeleton .htm file.
  3. Add HTML tags to formalize the structure, but still with no styling.
  4. Now start putting rules in the head section, adding class and id attributes as needed to the HTML tags.
  5. Do this styling addition a little at a time, viewing the file with my browser as I make changes to see if things appear as I want. See the paragraph below for why "a little at a time" is important.
  6. As I observe the effects of my style editing, I may decide to change my content or its structure to better get my thoughts across.
  7. Iterate. In each edit/view cycle, don't forget to do a save with the editor and a refresh with the browser to be sure I'm actually viewing the changes I just made. Also, be sure I'm actually viewing the source file I just changed, e.g., I'm viewing the file I edited on my PC, not the unchanged file on my web server.  (Why isn't that change working?!  Duh!)

As I do this iteration, I will often make mistakes: typing a ";" instead of a ":", or I forgot to provide an end-tag or "}", or something is mis-spelled, or the property value is wrong, etc. Fortunately these are usually easy to find and fix if I made the editing changes just a few at a time -- when things go wrong, it is probably because of the last change I made. As I go along I usually check HTML/CSS reference material to learn about new facilities or to remind myself about details for things I have used before. I also use tools built into my editor and browser that catch many syntax errors. Toward the end, I check if there is anything special I need to do for things like printing.

References

History of significant changes

Home