Web Design 1 - HTML Lesson 4 - Color Styles

Before you get started: take a good look at your lesson one code: remember the html, head and body sections? They need to be in every webpage that you create, so get used to typing these in each time.

The style attribute allows you to change the way an element looks on the web page. All elements have a default value (white background, black text, etc) but you can make changes to these.

There are three main ways to apply these:

  1. Inline - code is added to the element tag directly and only effects that particular tag

  2. Embedded- styles that are written up in the head section for a page and apply only to those elements on the page

  3. External - styles that are written up in an external document that is then attached to the web page later

    All of these are part of what is called CSS (Cascading Style Sheets) - for our purposes we will be using the Inline Style to get started.


Changing the background color of your page

Create a new lesson_4.html page

We are going to edit the body tag so that the background color is changed from the default of white

HTML colors are generated with a combination of Red, Green, and Blue values (RGB) - each of these is a 2 digit hexadecimal code - we put these digits together in a 6 digit number that starts with a # sign

Look at this image from Photoshop colorpicker - you can see a blue color is selected - while there are several ways to generate shades of colors we are mostly concerned with the RGB values (Red, Green, Blue) - at the bottom you can see #2643ad - this is the HTML code for that blue color

*** One quick way to find colors is to use the website: ColorPIcker.com or Color-Hex.com
- it allows you to locate a color, HTML code and also suggests complimentary shades for design
- but there are many charts available online of shades and codes to use - just be aware that color can display differently on browsers and devices so it is not always an exact science

So, let's go ahead and add some color to your page.

You already have a <body> tag so you will simply modify it to look like this:

<body style="background-color: #2643ad">

Go ahead and save your code and then view it in the browser. Is the background blue?

If yes, move on. If not then go back and see what needs to be corrected.

Changing the color of your text and headings

You can also edit the elements for your paragraphs and headings to modify the way the text looks.
I am going to add a new paragraph and change the text color. I am also going to change the Heading 1 line so there is color.
Since my background is a dark blue I am going to use text colors that are lighter so I can see them.

The code may look like this:

<p style="color: #B9DCED">This is a paragraph that should show up in a light blue color</p>

<h1 style="color: #F3F5CE">This is a heading one that should be a very light yellow color</h1>

Go ahead and add the code from above to your page and get it to work. Once it does move on to the assignment for this lesson.

Assignment for html lesson 4

  • When this assignment is complete your lesson_4.html should include the following:

    • The title tag that indicates what lesson the page is about

    • A change to the background color of the page
      - use something other than the blue from our practice

    • At least two (2) lines of paragraph text that use different colors

    • At least two (2) different types of heading sizes that also use different colors

    • Tip: when testing it helps to actually write out what the color should be in your sentence - this makes it easy to see if it is doing what you expect

    • All code is correctly entered and meets style guidelines

    • Upload your file and images folder to Google Drive so I can view the page