skip to content
.
logo picture logo text
Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages -> Publishing -> Testing -> More

Add Color - L. 03

Creating an external CSS file

In the early years of web building and HTML, styling was done with HTML tags. But, most of these tags are deprecated - not in general use. A much better method is using CSS - cascading style sheets.

One of the great things about CSS is you have one external sheet with the stylings that go on all the pages. If you want to change the background, you change it one time in the external file instead of having to go to each individual page.

Since we have a few containers with some content, let's have a little fun adding a bit of style. To do this, we will create a new file with our plain text editor to hold our CSS, save it and then link to it from our HTML file. This is referred to as using an external css file or external stylesheet. So,

  • Open up that trusty old plain text editor.
  • Go to "file" --> "new"
  • Then go to "file" --> "save"
  • Give it this name and extension (suffix)
style.css
  • Save it to the same folder as your HTML file

Linking to the external CSS file

Now we are going to put the link to our external file into the head of our HTML file. So

  • In your plain text editor
  • Go to "file" --> "Open"
  • Navigate to the folder where your index.html file is located. Click on it and then click "open"
  • Your HTML file should open in a new window.

Find the head section in the code. It begins with <head> and ends with </head> So far, it looks like this in our page:

<head>
<title>Welcome to My Web Page!</title>
</head>

Copy and paste the line below into the head section after the beginning head tag.

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

This line of code tells the browser to look for a style sheet named style.css written in plain text and use it to style the page. Since the stylesheet is stored in the same folder as the HTML page, we don't need to have the full URL to the file - just it's name.

index.html code so far:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Welcome to My Web Page!</title>
</head>

<body>
<div>
<h1>Welcome to My Page!</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas ligula diam, tincidunt vel egestas sit amet, commodo et orci.
Curabitur varius congue congue. Sed justo est, fermentum ut faucibus
in, luctus ac mi.</p>

<p>Pellentesque porttitor sagittis erat ut egestas. Donec sed
posuere ante. Ut dapibus varius leo. Ut feugiat eleifend lectus sit
amet gravida. Proin lobortis, dui sodales dapibus dapibus, felis nulla
scelerisque nunc, a cursus elit turpis id est. Nullam malesuada
pellentesque congue.</p>

<p>Duis tincidunt tincidunt odio vitae vestibulum. Donec orci
nibh, euismod quis viverra id, imperdiet nec lacus. Sed tristique
aliquam odio et accumsan. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Cras vehicula metus eget erat
tristique pellentesque.</p>

</div>
</body>
</html>

Now you have two files in your web folder: the HTML file named index.html and the css file named style.css. Now to play!

Adding color to the whole page

We're going to play a bit just so you can get a little comfortable using css. Click on your style.css file to make it active (or open it if you closed it)

Right now, your css file is empty, so let's add something. We'll start by giving the body a little style. To style anything with css, you put the name of what you are going to style, then put the stylings inside of curly brackets. We'll start by giving the background of the body a color, so here's how it could be written:

body {background-color: #ffffdd;}

#ffffdd is the hex code for a sort of light beige color. You could use a common color name or the rgb color values. I prefer using hex code - don't know why, LOL.

Now let's add a color for the text by adding - color: #660000; - to what we already have written. Now it should look like this:

body {background-color: #ffffdd; color: #660000;}

Always remember to separate each new styling with a semicolon. I usually add the semicolon to each part as I write it - even the last thing within the brackets in case I decide to add more. Then I tend not to forget it, LOL.

Save your style.css file by going to "File" --> "Save" In your browser, open a new window and open the index.html file (or refresh/reload the page if you already have it open). You should see a page with a beige background and maroon text.

Adding a different color to the paragraphs

You can give any container a background color and text color by adding that same code (with different values if they are on the same page, of course) so, let's give the paragraphs a background color and different color for the text. Add this line under the line about the body

p {background-color: #ffccff; color: #990099;}

You now should have two lines in your style.css file that look like this:

body {background-color: #ffffdd; color: #660000;}
p {background-color: #ffccff; color: #990099;}

Save the changes you've made to the CSS file. Refresh your browser page and you should see a different background color for the paragraphs and a different color of text within the paragraphs.

Play around a bit changing the hex code and making new color combinations. Be sure to have the # sign in front of the six numbers and be sure the semicolon separates the background info from the info about the text color.

Online Color Charts and

There are many charts and tools on the web that give the hex codes, rgb values and color names that can be used on websites, but some folks prefer to stick to web safe colors. Here's a few links: Web-Safe Colours and 4096 Web-Smart 

Web Safe Colors

A questions that keeps popping up is, "Are web-safe colors the best to use and why?"

Apparently, that is still up for debate as some of the comments on this article posted Jan 12, 2011 might suggest: Web-Safe Color Palette – Is It Still Relevant? Although there are probably few people who don't have a monitor capable of displaying way more than 256 colors, there are still differences in the way Macs and PC's display colors. In fact, all kinds of things can affect the way color is displayed on different computers. Here are two more articles that give more information: Keeping your Colors Safe and Do Web Safe Colors Make a Difference?

Personally, I tend to use the 4096 Web-Smart color chart. Don't know why particularly. But, since it's based on the original 256 Safe Color Palette, it seems like it might be a safer bet. Probably just an illusion, but it makes me think it's better. :^)

Next: Using "id" to specify Lesson 04 -->

Website "A" List of Lessons


Basic Web Page - Creating the Basic Page Lesson 01
Basic Web Page - Common Containers Lesson 02
Basic Web Page - Add Color with CSS Lesson 03
Basic Web Page - Using "id" to specify Lesson 04
Basic Web Page - Links Lesson 05
Basic Web Page - Floats Lesson 06
Basic Web Page - Font Face (Typeface) Lesson 07
Basic Web Page - Menu - Lesson 08