HTML and CSS Reference
In-Depth Information
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
styles
are coded as attributes on XHTML tags.
The
style
attribute
is 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>
FAQ
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 topic 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.
Table 3.2
Syntax for setting the color of text in a paragraph to red
CSS Syntax
Color Type
Color name
p { color: red }
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)
Search WWH ::
Custom Search