Web Design 1 - HTML Lesson 16 - using CSS for multiple styles

Remember back in lessons 12 & 13 we added code for styles up in the head section.

When we put the styles in the "brain" of the page we are using what is called Cascading Style Sheets. This means the style will be applied to everything on the page that matches what we put a style in for. We changed the way the links looked. If we had added coded within a particluar link on the page to, say, change just that font, then the later style would "override" the first. We can also use styles in the head section for lots of other tags such as headings, paragraphs and more...

In the future this is an easy way to apply a list of styles to several pages - we save the style code in a separate file and import it into our pages. When you have a website with several pages this makes changes so much easier. When you get this lesson done I can show you how to do this - (probably easier to work with you one of one for this part....)

Let's practice this a little bit.

Go ahead and make a new page and keep it very simple. At the start just put a few plain paragraphs and headings in.

Here is mine:

and here is the code for the page above:

 

So far so good - but now let's add some style changes that will apply to the entire page.

Within the <head> section I am going to define styles for body, paragraph, h1 and links

The style section now looks like this - notice there are two types of links defined - a default one and then a new one that creates a class called orange -

Here is the page it first displays - notice the default link is white but the one using a class of orange is, in fact, orange colored text

Here is the first link when I hover - in this case the link text turns a greenish-blue color

Here is the second link when I hover - in this case the orange text turns to a bright green color - in order for this to work we simply tell the browser that this link should use the class named orange that we added to the style section

Coded as such:
<p>If you would like to learn more about the Python language then go <a href="https://www.python.org/" class="orange" target="_blank">here</a>.</p>


Assignment for HTML Lesson 16

  • Add a style section to the top of your page - include specific styles for paragraphs, links, body, and some of the headings

  • Create at least one class (this can be a link, parapgraph, or heading) and get it to display correctly on your page