Web Design 1 - HTML Lesson 4 - Color Styles

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, and then switch over to using an external sheet later


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 Pixlr colorpicker - you can see a green 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 #6ca390 - this is the HTML code for that green color

*** One quick way to find colors is to use online sites: ColorPIcker.com, Color-Hex.com, or Coolors.co
- these allow you to locate a color, HTML code and also suggests complimentary shades for design

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:
* modify means to change your existing body tag - don't add a second one...

<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