Coding Color for the Web
By Stephen Bucaro
If you're using a WYSIWYG (What You See Is What You Get) webpage design
tool, you can select colors from a pallet. But what if you're coding by hand, or what
if, as a professional, you want to know exactly how colors are specified for webpage
elements? Let's start by learning the difference between using HTML attributes
and using style properties.
Using HTML Attributes
HTML defines the visual elements of a webpage using tags. All html tags
consist of the tag identifier enclosed within < and > characters. For example a
paragraph is defined by the tag <p>. XHTML is very similar to regular HTML
except all tags must be closed. To close a <p> tag, you would follow the
paragraph's text with a </p> tag.
HTML tags can have attributes. Attributes allow you control specific visual features
of the HTML element. For example, the entire background of a webpage is enclosed within
<body></body> tags. The background color of the body can be set using the
bgcolor attribute in the body opening tag as shown below.
There is however a small problem with using HTML attributes to control color. For
one thing, not all HTML elements recognize any given attribute. In fact very few
HTML elements recognize the bgcolor attribute. For another thing, many HTML
attributes are deprecated. Deprecated means the W3C ( World Wide Web
Consortium) does not recommend their use because they may not be supported
in future browsers.
Using Style Properties
The fact is, the W3C would like to get rid of all HTML attributes in favor of style
properties. Style properties are a feature of CSS (Cascading Style Sheets). Shown below
is an example of setting the background color in the <body> tag using style properties.
<body style="background-color: blue;">
The example above uses inline style, that is, the style properties are set
right in the HTML element's opening tag. Style can also be set using a block of code
embedded in the <head> section of the webpage, or in a separate file which
is linked to the webpage. Shown below is an example of setting the same property
in a code block.
The code block shown above, if placed within the head section of the webpage,
would set the background color of all paragraphs on the webpage to blue. But it
would apply to only the page with the embedded code block. To set a style to
apply to all paragraphs on several pages, you would need to place the style code
in a separate file and link it to each page using link code similar to that shown below.
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
Using Color Names
Whether you set color using HTML attributes or style properties, there are several
different methods you can use ot define the color; color names, decimal numbers,
or hexadecimal numbers. Of course, if you are setting a basic color like white,
blue, or yellow, it's easiest to just use the color name. But what if you want to
set the color to mediumslateblue?
The fact of the matter is that not all web browsers recognize the color name
mediumslateblue, and if a particular web browser does recognize the color name
mediumslateblue, there's no guarantee that a different browser will display exactly
the same color for mediumslateblue. The only way to define a color exactly is to
use either decimal or hexadecimal numbers.