[an error occurred while processing this directive]
Go to Bottom Nav - August 17, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

This page will give you some examples of how to use local styles to set the color and/or background color and image of various elements of your web page.

The style Attribute

The attributes we have used so far have been simple attribute and value pairs such as align="right" and so on. The style attribute incudes a bit more information. In the style attibute, you may define several parameters at once.

The attribute style may be added to any tag; in some though (like a break tag), it makes little sense. For elements like the body, paragraphs, headings, and others, the style attribute allows you to affect their colors, among other things. Using the style attribute is the simplest form of using Cascading Style Sheets. In this case, it is referred to as a "local style."

background-color

The default background color of most web browsers is white. One way to change this color is with a local style in the body tag. It looks like this:

<body style="background-color:color_value;">

The color_value may be defined in ways.

  1. WIth the sixteen seventeen predefined color names which are are: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua, and orange.

    <body style="background-color:fuchsia;">

  2. By using a hexadecimal number; preceded by a hash (#).

    <body style="background-color:#ff00ff;">

  3. As an expression of red, green, and blue; or rgb in values from 0 to 255.

    <body style="background-color:rgb(255,0,255);">

  4. As an expression of red, green, and blue; or rgb in percentages.

    <body style="background-color:rgb(%100,0%,100%);">

  5. With the advent of CSS3, you may also specify alpha-transparency! Use rgba notation; "rgb" as indicated above and the "a" value is between zero and one. The example below with be half transparent.

    <body style="background-color:rgba(255,0,255,.5);">

These ways of specifying color values may be used with other definitions in the style attribute.

The background-color definition may be used in other elements like paragraphs, headings, tables, divs, sections, articles, and so on. If you want the element to have a transparent background, use background-color:transparent; if you wish it to inherit the background color, use backgroun-color:inherit.

color

color is used to define the foreground color of an element. For elements such as headings, paragraphs, and lists, that is the text. If you have specified a dark background color, you will need to make the text lighter for good contrast and optimum readability.

<p style="color:green;">

The code above is used to make the text in this paragraph green.

Combining color and background-color

You may wish to specify both color and background color for some elements such as headings or paragraphs like this one. The paragraph tag code for this one is shown below.

<p style="color:lime;background-color:black;">

Note the syntax with these style definitions; the definition is separated from its value by a colon; definition/value pairs are separated by semicolons.

background-image

Use the background-image definition when you want to have a background image behind the foreground portions of an element. As with other web images, use .gif, .png, or .jpg files for these background images. This is a very common use for the body tag.

<p style="background-color:color_value;background-image:url(path_to_image_file)">

Note the use of both background color and image. This is a good idea for redundancy purposes; if your background image is dark, set a similar background color so your text will show while the background image loads. It will also protect your user if they have images turned off or if the image file is somehow corrupted.

Background images will normally start at the upper left corner of the element and repeat (or tile) throughout the element. Background images will usually scroll with the page as well. All of these defaults may be changed; I will leave it to you to discover how in your book or on the web.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu