Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Coding Color for the Web

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.

<body bgcolor="blue">

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.

background-color: blue;

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2021 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268