Style and color


Comments are read by humans, and ignored by the computer. You should use comments to make it clear what you are doing. I put a comment at the beginning of each section. Sometimes I add a comment when I do something unusual.

Comments begin with   <!--   and end with   -->
You can put anything in a comment, except do not put   --   within a comment.

Style - Internal styles

Internal styles can be used to change the appearance of the elements in a page. For example, you can make the background color for all paragraphs lime and the color of the text navy.

To code an internal style, we put a style element within the head container.
Inside the style element we specify we want to change the appearance of every p element in the page. Then we specify the background-color and the color . You can see the punctuation and format in the sample. Internal style sheets are usually satisfactory, but external style sheets are better.

Style - External styles

External styles are exactly like internal styles, except the styles are put in a separate file. This is very valuable. One style sheet file can be used with many html pages. This is very good when you want to make many pages look the same. You have probably noticed many of my web pages have a similar look. I use one common style sheet for most of my instructional pages.

Most styles are put in external style sheets. External style sheets are easier to manage.

You can see the link, needed to use a style sheet in an external file, in the sample.

Style - Inline style

Another technique is to a style property and its value inside a html element. To do this put a style attribute in the html element. You do not need to select what you are changing with the style; it is this element. Inside the value of the style attribute, put the style property and value. Look at the sample.

Style - Conflicting styles

If there are several conflicting styles, the closest and most specific one wins. For example, if there is an inline style and an external style that conflict, the inline style wins. Another example, if there is an internal style and an external style, the internal style wins.

Color - Color names

You often need a color for the value of a style property.

There are approximately 140 standard color names. The link provides a listing of color names names

Color - Color numbers

If you wish to use more colors use color numbers. See the discussion in the linked page.

Other property values

Here are some other values you may use with some style properties.

We have just looked at color names and color numbers
A specific word, such as small, which is specified as a possible value for a style property
The length specified in some units. Most common is in pixels. A pixel is one dot in the computer screen. For example, a screen might have 1600 dots across the screen; in that case a length of 1000px would be about 2/3 of the way across the screen.
Percent specifies how much of the available space is to be used. For example, if an element is in a division that is 400 pixels wide, and its width is specified as 50%, it will be about 200 pixels wide.
A Uniform Resource Locator (URL) specifies how to find something on the Internet. For example:

Lab 3

Now you are ready to build your lab 3 web page.
Follow the link on the left to read the lab 3 requirements and build your lab 3 web page.

Put your web page on the Internet

Upload your index.html page and your lab 1.html and lab 3.html pages to our Internet server, voyager.
Do this the same way you uploaded your lab 2.html page.

Complete lab

The following web pages need to have been uploaded to your public_html directory in voyager:

  • lab1.html
  • lab2.html
  • lab3.html
  • index.html
Look at these pages with your Firefox browser.
Make sure each page works correctly on voyager.
Make sure the links from the index page work for each of the three lab pages.
Make sure each of the three lab pages has a link back to the index page.
Then submit assignment 3 in Canvas. The assignment submission should say:
Lab 3 is complete.

Reading assignment

Read information that your find relivant from the book you selected.