Creating a One-Page Website

The one-page website is not a typical website, but this tutorial starts with a single page to make it easy to experiment.

Start With the Content

Assuming you have an audience in mind - and something you want them to read - create your HTML or XHTML file and save it with an .html file extension. For example, you may want to create a web page with your favourite recipe on it.

Note: This website uses XHTML - which means it conforms to the strict W3C guidelines. This means all the tags are opened and closed, they are in lower case, and outdated tags are not used. I recommend you get into the habit of writing to the more stringent standards, as it will mean less maintenance and a longer life for your code. To get more details about XHTML see:

W3C Introduction to XHTML

Exercise: Create XHTML for your CSS Exercises

For the exercises on this page I have created a sample XHTML page for you to experiment with.

To copy this page to your computer:

  1. Click the link below to open this page: No Styles Energy Bar Recipe
  2. To view the source XHTML code in your browser:
    • For Opera, click View | Source
    • For Firefox, click View | Page Source
    • For Internet Explorer 6 or earlier, click View | Source
  3. Open Notepad to a new empty page.
  4. Copy and paste the content from the web page source into Notepad.
  5. In Notepad, save the file with an .html extension.

To test to see if your copy and paste worked:

  1. Open your new file in a web browser.
  2. Check the page.

    It should look like the page that you copied.

Decide Where to Put Your CSS

There are three places you can put CSS tags:

  • Inside an HTML tag.

    This is not recommended because the effort required to maintain HTML with imbedded CSS tags is enormous.

    The W3C are attempting to eliminate HTML tags with imbedded CSS through the implementation of standards.

  • Within a section of your HTML or XHTML file.

    This is called Inline CSS.

    Inline CSS can be good for small websites, but maintaining many pages, each with their own CSS, can be difficult. Changing the style of the entire website requires changing every page.

  • In a file with a .css extension.

    This is called External CSS.

    This is the most flexible option. Changes to an entire website can be made quickly and easily with External CSS.

To use Inline CSS:

  1. Open your .html file in Notepad.
  2. Find the head section within the <head> and </head> tags
  3. Inside the head section, add the style section <style></style>
  4. Inside the style section, in lower case:

    <style>type your styles between the tags</style>

To use External CSS:

  1. Open your .html file in Notepad.
  2. Find the head section within the <head> and <\head> tags
  3. Within this head section, add a reference to your stylesheet:

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

  4. Create your stylesheet in Notepad and save it using the name you used in the link.

    In this case, it was: nameofstylesheet.css

Add Your Style

CSS tags are XHTML tags with formatting instructions. There are two types of style tags: selectors and classes. A selector tag is specific to one XHTML tag. A class tag can be used to modify the style within any tag.

The syntax of a style selector is:

selector {parameter:value; parameter:value}

The syntax of a style class is:

.class {parameter:value; parameter:value}

Sample CSS Tags:

body{font-family:verdana, arial, helvetica, sans-serif;
font-size:small; background-color:#F3E88E}

h1{font-size:x-large; font-style:italic; color:blue}

h2, h3{font-size:large; color:#28497E}

h4, h5, h6{font-size:medium; color:#8B008B}

.emphasis{font-weight:bold}

Selectors

A CSS selector tag is a tag that defines the style format for a particular XHTML tag. For example, in the Sample CSS Tags above, the tags body, h1, h2, h3, h4, h5, and h6 are CSS selector tags that correspond to the XHTML tags with the same names. The CSS style parameters and values are inside the curly brackets.

Some things to note in the sample:

  • Font-family: There are several font families specified for the body selector.

    This list is done in order of preference. I prefer the browser to use Verdana font, but if the browser cannot show Verdana, then Arial is the next option. If the browser cannot show Arial, then Helvetica is the next option. If the browser cannot show any of the specified font families, the sans-serif specification defaults to any non-serif font the browser can show. (Several font families are typically used for each selector.)

  • Font-size: Pixels or relative size.

    You can specify a specific size for a font in pixels, but since you do not know what browser size / screen resolution your audience is using, specifying the small, medium, large, x-large, and xx-large is considered a safe practice. (Test your results when using relative sizes, Internet Explorer (IE) versions 4 and 5 think small is much larger than other web browsers do. You may need to start at x-small for IE.)

  • Font-style: Bold, Italic, etc.

    Used sparingly, bold or italic or other font styles can make for interesting displays.

  • Color: You can use RGB(Red, Green, Blue) hex, or the common English name of a color.

    The sample file uses RGB hex as well as the common name: green. It is up to you which method you want to use. (Warning: using the common name for a color can result in unappealing colors depending on the viewer's monitor!)

    For suggestions on color see this website for good advice: Color Psychology

  • Grouping of selectors: Note that h2 and h3 are combined in the sample file.

    This applies the same formatting to both these tags. The selectors h4, h5, and h6 are also combined. You can group any number of selectors together like this.

  • Cascading: How these styles combine:
    • The font-family and background-color specified for the body tag is used for the entire page.
    • The font-size, font-style, and color specified for h1 overrides the body specifications.
    • The font-size and color specified for h2, h3, h4, h5, and h6 overrides the body specifications.
    • Any tag not specifically defined, like the paragraph p tag follows the body specification.

Classes

A class is used to modify any selector or text on a web page.

In the Sample CSS Tags above, the tag .emphasis is a class.

There are two ways to use a class:

  • Inside a tag. This class applies to everything within the start and end of the tag. For example, to make an entire paragraph take the style of emphasis use:

    <p class="emphasis">Your entire paragraph text. </p>

  • Over a span of text. A class applies to any text within the start and end of the span tag. For example, to apply emphasis to words within a paragraph use:

    <span class="emphasis"> text to have emphasis </span>

Exercises: Create CSS

Inline CSS Exercise

To experiment adding Inline CSS tags, use your copy of the No Styles Energy Bar Recipe page from the exercise above entitled: Create XHTML for your CSS Exercises

  1. Open your .html file in Notepad.
  2. Inside the <head></head> section add the style section <style></style>
  3. Copy the code below into the .html file between the <style></style> tags:

body{font-family:verdana, arial, helvetica, sans-serif;
font-size:medium; background-color:#F3E88E}

h1{font-size:xx-large; font-style:italic; color:blue}

h2, h3{font-size:x-large; color:#28497E}

.emphasis{font-weight:bold}

Test to see if you have correctly imbedded the styles:

  1. Save the .html file.
  2. Open the .html file in a browser, or if it is still open in your browser, refresh the page.
  3. Check your page.

    Your page will now have a yellow background, blue headings, and black text. The page below uses this style sheet, so your page should now look like this:

    Yellow Energy Bar

External CSS Exercise

To experiment with CSS tags in an external file:

  1. Open Notepad to a new empty page.
  2. Copy and Paste the content below into Notepad:

/*** Sample page Green ***/

body{font-family: verdana, arial, helvetica, sans-serif; font-size:medium; background-color:#9dce95}

h1{font-size:xx-large; font-style:italic; color:green }

h2, h3{font-size: x-large; color: #436A0D }

.emphasis{font-weight:bold}

Test your new CSS file:

  1. In Notepad, save your new file with a .css extension.
  2. Open your copy of the No Styles Energy Bar Recipe page from the exercise above entitled: Create XHTML for your CSS Exercises.
  3. Inside the head section of your .html file add a link to your stylesheet:

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

  4. If you added inline CSS from the Inline CSS Exercise inside the head section of this file, either delete it, or put comment tags around it.

    The comment tags are:

    • Start comment: <!--
    • End comment: -->
  5. Save the .html file.
  6. Open the .html file in a browser, or if it is still open, refresh the page.
  7. Check your page.

    Your page will now have a green background, green headings, and black text. The sample below uses this style sheet, so your page should now look like this:

    Green Energy Bar

Class Tag Exercise

The next exercise is a little more challenging. The Green Energy Bar link shows a page with bolded text. This text is bolded using the .emphasis class tag. This class is included in the CSS samples from the exercises above.

Modify your own .html file to include the .emphasis class.

Try both of these methods:

  • Use the class inside a tag:

    <p class="emphasis">To bold an entire paragraph. </p>

  • Use the class over a span of text:

    <span class="emphasis"> to bold a portion of text only </span>

Consider A Quick Note on Loading Time

Websites need to load quickly to keep a user's attention.

Using one .css file for all of a website's pages means that the CSS file is loaded into memory once, and then used by all of the pages without reloading. This eliminates any slow down caused by having to reload styles for each page.

The trade off is that the first page of the website that loads suffers all of the lag of loading the .css file into memory.

If you have a problem with website that is loading too slowly, and you have a large .css file, consider separating the .css file into different files for each page or for a group of pages. This will make maintaining the site more difficult, but it might reduce the load time for the entry page of the website.

If you use Inline CSS, the web page always has lag time for loading the styles into memory.

Understand Cascading

"Cascading" refers to the fact that it is possible to have more than one style specified for the same element. With more than one possible center of style control, there are rules for determining which style is used, or what combination of styles are used - essentially, how they will cascade together.

Precedence Order for Multiple CSS:

  1. Each browser has a default set of styles for text and heading formats. If no styles are coded for a web page, or if the browser is very old, or if the CSS has errors and will not load, the browser uses its defaults. To see an example of your own browser's defaults open this sample, which has no style tags: No Style Energy Bar Recipe
  2. You can specify your own style sheets, called user-specified style sheets. If you have changed your style preferences in your browser, you have created your own user-specified style sheets. People with impaired vision or old monitors often do this. The user-specified style sheet takes precedence over all the CSS tags defined on a web site. The sample page may actually display using your own user-specified style sheet!

    Note: A web programmer can override user-specified style sheets with the !important command on a style element within the website-defined style sheets. This gives a web programmer absolute control over the display, but it is not recommended because it can also make the website unusable for people with impaired vision.

  3. CSS tags imbedded within HTML tags take precedence over inline CSS and external CSS.

    Note: Imbedding CSS within the HTML tags is not recommended because it violates all current web standards. Imbedded CSS is easy to write, but time-consuming to maintain. The current web standards were created to stop this type of coding.

  4. When a web page has both inline CSS and a link to an external CSS file, the inline CSS takes precedence over the external CSS.

    Note: Combining inline CSS and external CSS is not recommended because it can be confusing for the web developer and can waste time during site maintenance.

  5. When a web page has a link to more than one external CSS file, and there are conflicting style definitions, web browsers use a mathematical formula to determine what style to display. If you are going to use more than one external CSS file, I recommend you test the results to see what actually displays.

    Note: If you want to know the details behind the calculations, please see the concise explanation at the Web Design Group's website: CSS Structure and Rules

See What It Really Looks Like

After spending time adding style to your web page, you may be surprised to know that it may not look like you thought it should.

You may have tested the look in a couple of web browsers, but the look of your web page depends upon the both the monitor and the web browser your audience is using. There is a new acronym for this phenomenon: WYSINWOG - What You See Is Not What Others Get.

It may be impossible to test your web page on every possible monitor, but you can test your web page on many different browsers.

It is important to note that there are many web browsers - and many different versions of the same web browser. Any version of any web browser can be used to view your website.

Your web page is likely to look slightly different in each one.

For more information on which web browsers are used most today, a summary of browser-use statistics are available at: W3C Browser Statistics

Some web developers assume that most people use Internet Explorer, so there is no need to have their web pages look good and work well in any other browser. If this is what you believe, you do not need to test your web page on any other browser.

If you want your website to look good regardless of which web browser your audience is using, it is important to test your website with several different web browsers. All web browsers are free, you just need to google them to find their download sites. The browser statistics link above should help you decide which web browsers to consider for your testing.

CSS Tutorial Introduction

Understanding Basics and Definitions

Creating a One-Page Website

Adding Navigation for Multi-Page Websites

Digging Into the Design of a Website

Finding References to Good Website Design

Glossary