4.5: Basic Color Styles

Last updated
Save as PDF

Page ID: 93804

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

Colors can be applied to various page elements with the color and background-color properties. Color values can be given by a color name, a hexadecimal value representing the combination of red, green, and blue hues to be applied, or by an rgb(red,green,blue) functional form where each hue is given as a decimal or percentage value. For example, color specifications can take the following forms:

    color:red
    color:#FF0000
    color:#F00
    color:rgb(255,0,0)
    color:rgb(100%, 0%, 0%)

These color assignments are discussed more fully in a later tutorial. For now, you can use common system color names to bring color styling to your pages. There are 16 basic color names recognized as standard Windows colors and shown in Figure \(\PageIndex{1}\). These colors can be applied to page elements with the style settings color:name or background-color:name coded in the style sheet associated with the element.

Screenshot 2023-03-08 at 1.57.15 PM.png — Figure \(\PageIndex{1}\): Basic color properties and names. (("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0))

Text and Background Colors

Text colors are applied by assigning a color value in the style sheet associated with the container tag enclosing the text. For instance, a heading can be displayed in blue by assigning this color name in an in-line style sheet for the <hn> tag.

<h1 style="color:blue;">A Blue Heading</h1>

If an entire paragraph is to have a particular text color, then that color name can be applied with a style sheet associated with its <p> tag.

<p style="color:red;">...red paragraph text...</p>

In certain cases, you may wish to display all text on a page in a particular color. This is easily done by assigning the color property to the <body> tag. The following code displays all text on a page in green by using an embedded style sheet associated with the body selector.

<style>
    body {color:green;}
</style>

Any text container can also be given a background color by applying the background-color property. Just make sure that the color chosen is complementary to the text color and does not make it difficult to read the text. In the following style sheet, yellow is used as the page background color behind its green text.

<style>
  body {color:green; background-color:yellow;}
</style>

Rule Colors

The same background-color styling can be applied to horizontal rules to change their filled in color. In the following example, rules are displayed with various style properties to produce different colors, sizes, and page positioning. At the same time, the foreground (text) color of the page is blue and the background color is yellow. Browser output is shown in Figure \(\PageIndex{2}\).

<body style="color:blue; background-color:yellow;">
<p>
  A blue horizontal rule 10 pixels in height, 300 pixels in width, and
  aligned at the right margin:
</p>

<hr style="background-color:blue; height:10px; width:300px; text-align:right;">
<p>
  A red horizontal rule 2 pixels in height, 75% of the page width, and
  centered:
</p>

<hr style="background-color:red; height:2px; width:75%; text-align:center;">

<p>
  A green horizontal rule 10 pixels in height; 25% of the page width, and
  aligned at the left margin:
</p>

<hr style="background-color:green; height:10px; width:25%; text-align:left;">
</body>

Figure \(\PageIndex{2}\): Styled horzontal rules. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

In this example, all rule styling is applied with in-line style sheets. The individual rules have different settings for which an embedded style sheet with a single hr selector is not appropriate. Body styling also uses an in-line style sheet. Although, in this case, an embedded style sheet with a body selector could have been used to apply foreground and background colors.

The color and background-color properties can be applied to all HTML5 elements. Many different color combination can be used to produce a full spectrum of colors. Extended discussion of color values and styling is saved for a later tutorial. Use of the basic color names can get you started in introducing color variety to your pages.