Web Design 1 - HTML Lesson 9 - using internal CSS styles

So far we have been using the inline style of css.

Remember that CSS stands for Cascading Style Sheets. This will set the default styles to use for elements, and changes that might be made later in the code will override them. We use internal CSS to take care of some of our major design work for a website. This saves time as you don't need to keep typing in all the style sections in each element as you go. If you do want to override the default style then a simple inline style section can be used. Let's see how these work:

Create a new page for lesson 9 - I called mine lesson_9.html

We will now add code to the head section to change the styles of some of our tags:


* this entire style section goes INSIDE the head section
- put it right after the closing title tag
and before the closing head tag...

<style>

body {
background-color: #6D0020;
}

p {
color: #FFFFFF;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 14px;
}

h1 {
color: #999999;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight: bold;
}

a:link, a:visited, a:active {
color: green;
text-decoration: underline;
}

a:hover {
color: red;
text-decoration: none;
}

</style>

 

Now go ahead and add some content in the body of the page and see how this works. If your fonts and colors are not showing up then we just need to find the bugs in the code.

Just type in the code without adding any in-line styles. For instance:

<p>This is a paragraph.</p>

<h1>This is Heading One</h1>

<p><a href="index.html">Take me to the index page</a></p>

As a note - hyperlinks have four possible conditions - in this example we are using the same style for 3 but changing the style for when a user hovers their mouse over the link


Assignment for HTML Lesson 9

  1. Add a style section

  2. Include changes of style for:
    one paragraph, two headings, the background color of the page, and a hyperlink

    try to use different ones than the examples I gave you....

  3. Include links to this lesson on index page, and a link back to your index from this lesson

  4. Upload all files to x10 and check to be sure they work

  5. If you are caught up then go back to your index page and start applying the internal CSS styles.