FAQ
3.3 Configuring Color with Inline CSS^813.3Configuring Color with Inline CSS
Now that you are aware of how color on Web pages is specified and where to get ideas
for color schemes on Web pages, let’s start configuring color with inline styles. Inline
stylesare coded as attributes on XHTML tags.The Style Attribute
Thestyleattributeis used with the value of the style rule declaration you need to set.
Recall that a declaration consists of a property and a value. Each property is separated
from its value with a colon (:). The following code will set the text color of an <h1>tag
to a shade of red:
<h1 style="color:#cc0000">This is displayed as a red heading</h1>
If there is more than one property, they are separated by a semicolon (;). The following
code configures the heading with a red text color and a gray background color.
<h1 style="color:#cc0000;background-color:#cccccc">This is displayed
as a red heading on a gray background</h1>
The following code example uses an inline style to set the background color to green
and text color to white:
<p style="background-color:green;color:white">This paragraph is using
an inline style.</p>Table 3.2 Syntax for setting the color of text in a paragraph to red
CSS Syntax Color Type
p { color: red } Color name
p { color: #FF0000 } Hexadecimal color value
p { color: #F00 } Shorthand hexadecimal (one character for each hexadecimal pair)
p { color: rgb(255,0,0) } Decimal color value (RGB triplet)Are there different ways to configure colors using CSS?CSS syntax allows you to configure colors in a number of ways, including hexadecimal color
values, color names, and decimal color values. For example, Table 3.2 shows the syntax for
setting the color of text in a paragraph to red.
The examples in this book use either hexadecimal color value or color name to configure
colors using CSS. The color chart on this textbook’s companion Web site at
http://webdevfoundations.net/color provides examples of the color created by hexadecimal
values in the Web Color Palette.