Frontend Engineering, Volume II

CSS: Example 1f—Make a Style Sheet for the Project

© 2013, Martin Rinehart


We left our project using only HTML. Now we will add a little CSS. The first step is to create a stylesheet for the project, and link all the project pages to the stylesheet. Then we will style the menu links and the menu's gray choices (not available—this is the current page).

This example is simpler than most in that we can do it entirely with CSS, save for the addition of the <link> tags in our pages' <head> sections.

It will resemble most real website work in that it is complicated by the fact that the home page is in a main folder, the other pages are in a sub-folder.

Linking a Style Sheet

An external stylesheet has no requirements except that it contain style rules. As with any computer file, it is a good practice to start and end with a comment that identifies the file. A CSS comment is written like this:

/* This is a CSS comment. */

Our First Style Sheet

A style sheet should end with the suffix .css. We always begin our stylesheets with a single rule. This is the way we start project.css:

/* project.css */

body { background-color: red; }

/* end project.css */

Why red? Because you will see immediately if your style sheet is correctly linked (or not) and you will be exceedingly unlikely to upload it to your ISP without using a finished color selection. Isn't this red awful?

Create your own project.css file. Don't use your HTML template. Include just the three lines you see above:

  1. start comment
  2. body color rule (red for testing)
  3. end comment

Save your CSS file as project.css in the same folder as your project's pages. (Not the folder that holds the home page.)

Linking HTML to the External Style Sheet

This is the code to add to the <head> section of your page to link to this style sheet:

<link
    rel='stylesheet'
    type='text/css'
    href='project.css'
>

This assumes that the style sheet and the HTML page are in the same folder. (You added the style sheet to the same sub-folder that holds all the pages except the home page.) A home page in a parent folder would need href='project-folder/project.css'. We'll add the <link> to all our pages and do a manual edit to fix the home page.

Our pages have this text in their existing <head> sections:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link
        rel='shortcut icon'
        href='http://www.MartinRinehart.com/favicon.ico'
    >

We want to add the new <link> between the last meta and the favicon <link>.

These instructions are specific to Notepad++. Your editor should have similar functionality if you are not using Notepad++.

Using Notepad++'s "Find in Files" feature we can easily search for:

UTF-8">

And replace it with:

UTF-8">\r\n\r\n\t<link\r\n\t\trel='stylesheet'\r\n\t\ttype='text/css'\r\n\t\thref='sample-website.css'\r\n\t>

Well, maybe not quite so easily. We got the replacement text correct by working one line at a time through the HTML we wanted to write, using a single file. Replace, inspect, press Ctrl+Z to undo the changes, correct as necessary and repeat, until we had the replace text right. Then use Find in Files to fix them all at once. Go slow when you check that "In all sub-folders" box!

When you've got this right, don't forget to make that manual edit to the home page. It won't be red until you do.

We now have all our pages looking quite awful, with that horrible red background. From here on, it's simple.

Style the Links

First, terminology. An <a href=... is called a "link" as it links to other pages (and other things). A <link> is also called a "link" as it links, although in an entirely different way, to other resources, such as style sheets. Here we want to style the "links" that make up the navigation menu.

Let's begin with the background color for the body. Change it to white (#ffffff if you prefer) or some light, not distracting color. We're partial to #f8f4f0 and other parchment-like shades.

Change the background-color rule in project.css. Ours reads:

body { background-color: #f8f4f0; }

Choose a color that works for your website. You can't go wrong with plain white.

Test! With that one change suddenly all your pages stopped being red. And you get the idea that one change, on one place, will change your whole site. That's what CSS does to earn its keep.

Now for the links themselves, start with a background and border for all the <a> and <font> elements in the nav div. (In the markup, that's <div id='nav'>. Remember, selectors are grouped when you separate them with commas. If you separate them with spaces, you are specifying descendant selectors. Here we group two descendant selectors.

    #nav a, #nav font {
        background: #d0c0a0;
        border: 3px groove #806040;
    }

Put the rule above into your style sheet and all of your pages suddenly have a much nicer menu.

Test!

Add a pseudo-class :hover and your links come to life. (No, we definitely don't want the grayed (disabled) <font> element to come to life.)

Add this rule to your stylesheet:

		#nav a:hover {
			background: white;
			border-color: #0000ff;
		}
	

Test! You should now have menu links that change when you hover.

Time to have some fun? Add each of the following, one at a time, to the #nav a, #nav font block. Fiddle with them. (Picture a really fussy designer looking over your shoulder, saying, "What if ...".) Make them all your own. Test each one as you enter it.

display: inline-block;

Should have minimal effect. Explained in Chapter 3.

line-height: 2em;

Two regular lines tall. Change this after you have entered the paddings.

margin: 5px;

Margins are outside the visible box. They keep one element away from its nearby friends.

padding-left: 3px;

padding-right: 3px;

We've already used padding. This time, we specify which sides we want padded.

text-decoration: none;

By default, links are text-decoration: underline;.

transition: background-color 1s, border-color 0.25s;

This is from Chapter 10, but it's is so much fun! This is a CSS3 transition: an animated change. Try varying the timings. (1s means "1 second.")

white-space: nowrap;

Make sure that at least one of your links uses more than one word in its link text. By dragging your browser's right edge, simulate setting its width for different devices. You'll find at least one—probably a tablet or phone width—that splits your link into two pieces. It's quite ugly. This forces the browser to wrap between the choices.


Feedback: MartinRinehart at gmail dot com

# # #