Color Definitions - HTML 4

You can define individual colors for any text on the Web page, as well as define a background color for the entire Web page or some portion thereof. CSS uses the following properties to define color:

  • color defines the font color and is also used to define colors for links in their various states (active, visited).
  • background or background-color defines the background color for the entire page or defines the background for a particular element (for example, a background color for all first-level headings, similar to the idea of highlighting something in a Word document).

Text
To change the color of text on your Web page

  1. Determine the selector. For example, will the color apply to all firstlevel headings, to all paragraphs, or to a specific paragraph?
  2. Use the color property.
  3. Identify the color name or hexadecimal value.

The basic syntax for the style declaration is:

selector {color: value;}

Here is a collection of style declarations that use the color property:

body {color: olive; font-family: Verdana, sans-serif;
background-color: #FFFFFF; font-size: 85%;}
hr {text-align: center;}
.navbar {font-size: 75%; text-align: center;}
h1 {color: #808000;}
p.chapternav {text-align: center;}
.footer {font-size: 80%;}

In the preceding CSS rules, the color for all text on the page is defined by using the body selector. The color is applied to all text in the body of the document unless otherwise defined. For example, the first-level heading is defined as forest green by using hexadecimal notation.

Links
Pseudo classes allow you to define style rules based on information outside the document tree.

The most common CSS use of pseudo classes is to define a style rule for a given element in the document tree — a technical term that just means that the browser builds a hierarchical representation of all elements in a document, much like a family tree, where every element has a parent and may contain a child. For example, :link is a pseudo class that defines style rules for any link that hasn’t yet been visited.

There are five common pseudo classes that you can use with hyperlinks:

  • :link defines formatting for links that haven’t been visited.
  • :visited defines formatting for links that have been visited.
  • :focus defines formatting for links that are selected by the keyboard (for example, by using the Tab key) and are about to be activated by using the Enter key.
  • :hover defines formatting for links when the mouse cursor hovers over them.
  • :active defines formatting for links when they are selected (clicked by the mouse).

The pseudo class name is preceded by a colon (:).

Pseudo classes can be used with

  • Elements (such as the element that defines hyperlinks)
  • Classes
  • IDs

For example, to define the style rules for visited and unvisited links, use the following syntax:

  • This sets the color of any hyperlink pointing to an unvisited URL to red by using its hexadecimal value:
  • a:link {color: #FF0000;}
  • This sets any hyperlink that points to a visited URL to appear in the named color green:
  • a:visited {color: green;}
  • This designates unvisited links with a class of internal to appear in (named color) yellow:
  • a.internal:link {color: yellow;}

Links can occupy multiple states at one time. For example, a link can be visited and hovered over at the same time. Always define link style rules in the following order: :link, :visited, :visible, :focus, :hover, :active.

CSS applies last rule seen to display your page. In this case, if you put the pseudo class selectors in the wrong order, your results may not be what you want. For example, if visited follows hover, and the two have overlapping rules, hover effects apply only to links that haven’t yet been visited.

The following CSS rules render the document with olive as the color for links that haven’t been visited and yellow as the color of visited links:

body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;}
a:link {color: olive;}
a:visited {color: yellow;}

Netscape 4 ignores hover. But it doesn’t hurt anything in Netscape 4 to use hover (it’s just ignored) unless it’s a visitor’s only clue that the text is a link.

Some browsers don’t support pseudo classes with elements such as input or select (these are forms elements). Current browsers support their use with the a element. Test your results if you want to use pseudo classes with an element other than .

The CSS specification defines :link and :visited as mutually exclusive, and it is up to the browser application to determine when to change the state (visited versus unvisited) for any given link. For example, a browser might determine that a link is unvisited if you clear your history data.

Backgrounds
To change the background color for your Web page, or a section of that page, follow these steps:

  • Determine the selector. For example, will the color apply to the entire background, or will it apply only to a specific section?
  • Use the background-color or background property.
  • Identify the color name or hexadecimal value.

The basic syntax for the style declaration is:

selector {background-color: value;}

In the following collection of style declarations, the first style declaration uses the background-color property and sets it to light green by using hexadecimal notation:

body {color: #808000; font-family: Verdana, sans-serif;
background-color: #EAF3DA; font-size: 85%;}

You can apply a background color to a block of text — for example, a paragraph — much like you define the background color for the entire page.

You use background as a shorthand property for all individual background properties or background-color to set just the color.

selector {background: value value value}

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics