Lesson 6:

CSS COLOR & TEXT

ICT 2 | Web Development

I
OBJECTIVES
• Explain the different use of CSS color and text
• Distinguish how to write different method of CSS color
and text; and
• Apply CSS color and text to HTML pages
CSS COLOR
FOREGROUND COLOR
color
allows you to specify the color of text inside an
element.
BACKGROUND COLOR
background-color
sets the color of the background for that box.
 3 WAYS OF CSS COLOR
RGB Value
Values for red, green, and blue are expressed
as numbers between 0 and 255.

color: rgb(102,205,170);
 3 WAYS OF CSS COLOR
HEX Code
Hex values represent values for red, green, and
blue in hexadecimal code.

color: #66cdaa;
 3 WAYS OF CSS COLOR
Color Name
Colors are represented by predefined names.
However, they are very limited in number.

color: MediumAquaMarine;
 OPACITY
allows you to specify the opacity of an element and any
of its child elements
CSS TEXT
SPECIFYING TYPEFACES
font-family
allows you to specify the typeface that should be
used for any text inside the element.
SIZE OF TYPE
font-size
enables you to specify a size for the font
3 UNITS OF TYPE SIZE

12 px 75 % 0.75 em
Pixels Percentages Ems
BOLD
font-weight
allows you to create bold text.
normal, bold
ITALIC
font-style
to create italic text
normal, italic, oblique
UPPERCASE OR LOWERCASE
text-transform
used to change the case of text
uppercase, lowercase, capitalize
LEADING
line-height
s use for the vertical space between lines of text
LETTER & WORD SPACING
letter-spacing word-spacing
You can control the space between each letter
with the letter-spacing property
ALIGNMENT
text-align
allows you to control the alignment of text
left, right, center, justify
VERTICAL ALIGNMENT
vertical-align
it does have this effect when used with table
cells (the <td> and <th> elements).
text-top, baseline, text-bottom
STYLING LINKS
:link
allows you to set styles for links that have not
yet been visited.
STYLING LINKS
:visited
allows you to set styles for links that have been
clicked on.
RESPONDING TO USERS
:hover
applied when a user hovers over an element
with a pointing device such as a mouse.
RESPONDING TO USERS
:active
applied when an element is being activated by a
user; for example, when a button is being
pressed or a link being clicked
RESPONDING TO USERS
:focus
applied when an element has focus.