FONT ATTRIBUTES

TODAY’S OBJECTIVES
1. distinguish the different HTML colors
specified using predefined color
names;
2. discuss the significance of adding
background color on the webpage;
and
3. design your own webpage.
Changing the Background
Color of a Page
WHY IS IT IMPORTANT TO ADD
COLOR ON OUR WEBPAGE?
 Color
Color codes are ways of representing the colors
we see everyday in a format that a computer can
interpret and display.

There are variety of formats, including HEX color

codes, RGB and HSL values, and HTML Color
Names
 HEX COLOR CODES
In HTML, a color can be specified using a
hexadecimal value in the form

#rrggbb
 HEX COLOR CODES
Example:

#00ff00

Color:

GREEN
HTML COLOR NAMES
HTML COLOR NAMES
HTML COLOR NAMES
HTML COLOR NAMES
HTML COLOR NAMES
 RGB
In HTML, a color can be specified as an RGB
values, using this formula:

rgb (red, green, blue)

Each parameter (red, green, and blue) defines
the intensity of the color between

0 and 255.
 RGB
Example:

rgb (255, 0, 0)

Color:

RED
 RGB
Example:

rgb (0, 255, 0)

Color:

GREEN
 HSL
In HTML, a color can be specified using hue,
saturation, and lightness (HSL) in the form:

Hsl (hue, saturation, lightness)

Hue – a color or a shade of color
Saturation – intensity of color

Lightness – is relative to brightness or darkness of a

particular color, from black to white
 HSL
HUE – 0 to 360. 0 is red, 120 is green, and 240 is
blue
 HSL
SATURATION – is a percentage value, 0% means a
shade of gray, and 100% is the full color

LIGHTNESS – is also a percentage, 0% is black,

50% is neither light or dark, 100% is white.
 HSL
Example:

Hsl (0, 100%, 50%)

Color:
 HSL
Example:

Hsl (240, 100%, 50%)

Color:
 HSL
Example:

hsl (300, 76%, 72%)

Color:
ADDING FONT COLOR

<p style="background-
color:blue;">BUGHAW</p>
<p style="background-color:rgb(0, 0,
255);”>BUGHAW</p>
<p style="background-color:hsl(240,
100%, 50%);”>BUGHAW</p>
<p style="background-
color:#0000ff;">BUGHAW</p>
ADDING BORDER COLOR

<h1 style="border:2px solid

Tomato;">Hello World</h1>
<h1 style="border:2px solid
DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid
Violet;">Hello World</h1>
APPLICATION

• Create your own webpage with font colors

using different variety of formats,
including HEX, RGB, HTML color names,
and HSL.
• You will be given 10 minutes to finish
your work.
• 3 students will be called to present in class.
• You will be graded individually using the
following checklist
 YES NO
PERFORMANCE RATING SCORE
APPLICATION (2pts) (1pt)
1. Did you make smart color      
combination that enhances the
content of your webpage?
1. Did you make your page visually      
appealing?
1. Did you keep your page      
structured?
1. Did apply consistency on the      
webpage?
1. Did you choose the right font color      
and size?
TOTAL  
TRUE OR FALSE. Write your favorite color when
the statement is correct, and write FALSE if not.

1.Backgrounds have a significant impact on the

design of a website.
2.There are 140 valid HTML color names
3.HTML colors are specified using predefined color
names, or RGB, HEX, HSL values
4.RGB means Red, Green, Black.
5.HEX are written as ff0000.