Lesson 3:

Improving the
Appearance of
a Web Page
 Rose Anne Gutierrez-Cochanco, MSIT

Inserting
 Inline
CSS
Inline CSS

•Inline CSS is used for applying style to a

particular HTML Tag.
• Least recommended styling method because of the
difficulty it brings in managing larger websites. •
Useful for testing and previewing changes
The HTML Style Attribute
• The style attribute can be used to set the style of a
specific HTML element.
• The syntax should be like this:
<tagname style=“property:value”>
HTML Background Color
• The background-color property defines the
background color for an HTML element.

HTML
 Colors
HTML Colors
• In HTML, a color can be defined by using color
names or RGB, Hex and HSL values.
• Color Name: tomato
• RGB Value: rgb(255, 99, 71)
• Hex Value: #ff6347
• HSL Value: hsl(9, 100%, 64%)
Colors Names
• HTML supports 140 standard color names
RGB Value
• In HTML, a color can be specified as an RGB value
using this formula: rgb(red, green, blue) • Each
parameter (red, green, blue) defines the density of
the color between 0 and 255. • For example,
rgb(255,0,0) is displayed as red, because red is set
to its highest value, and the others are set to 0.
RGB Value
• To display the color black, all colors must be set to
0, like this rgb(0,0,0).
• To display the color white, all colors must be set to
255, like this rgb(255,255,255).
RGB Value
Hex Value
• In HTML, a color can be specified using the
hexadecimal value in the form: #rrggbb where
rr(red), gg(green) and bb(blue) are hexadecimal
 values between 00 and ff (same as decimal
0-255).
• For example, #ff0000 is displayed as red, because
red is set to its highest value (ff) and the others are
set to the lowest value (00).
Hex Value
HSL Value
• In HTML, a color can be specified using hue,
saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness).
• Hue is the degree on the color wheel from 0 to
360, 0 is red, 120 is green and 240 is blue. •
Saturation can be described as the intensity of the
color, 100% is pure color (no shade of gray), 50% is
50% gray (but you can still see the color), 0% is
completely gray (you can no longer see the color).
HSL Value
• Lightness is also a percentage, 0% is black, 50% is
neither light or dark, 100% is white.
HSL Value
HSL Saturation Effect
HSL Lightness Effect
Laboratory
Exercise 2
Changing Background
Colors
Instructions
• Open Laboratory1.html
• Save the contents to a new file named
Laboratory2.html
• Change the title to Laboratory 2
• Change the background-color of the whole web
page to “Tomato”.
• Change the background-color of the heading to
rgb(60, 179, 113)
HTML Text Color
• The color property defines the text color for an
HTML element.

Laboratory
Exercise 3
Changing Text Colors

Instructions
• Open Laboratory1.html
• Save the contents to a new file named
Laboratory3.html
• Change the title to Laboratory 3
• Change the background-color of the whole web
page to “MediumSeaGreen”.
• Change the text color of the heading to
rgb(255,255,255)
• Change the text color of all bold texts to “Tomato”
HTML Fonts
• The font-family property defines the fonts to be
used for an HTML element.

Laboratory
 Exercise 4
Changing Fonts

Instructions
• Open Laboratory1.html
• Save the contents to a new file named
Laboratory4.html
• Change the title to Laboratory 4
• Change the background-color of the whole web
page to “GreenYellow”
• Change the text color of the heading to
“RoyalBlue” and the font to “Century Gothic” •
Change the font of the paragraphs to “Verdana”
HTML Text Size
• The font-size property defines the text size for an
HTML element.
• The font-size value can be an absolute (pixels) or
relative (em) size.

Laboratory
Exercise 5
Changing Text Size

Instructions
• Open Laboratory1.html
• Save the contents to a new file named
Laboratory5.html
• Change the title to Laboratory 5
• Change the font of the heading to “Calibri” • Change
the font of all the paragraphs to “Georgia” • Change
the font size of the 1st paragraph to “20px” • Change
the font size of the 2nd paragraph to “1.5em” •
Change the font size of the 3rd paragraph to “24px”
HTML Text Alignment
• The text-align property defines the horizontal text
alignment for an HTML element.
• A text can be left or right aligned, centered or
justified.

Laboratory
Exercise 6
Changing Text Alignment

Instructions
• Open Laboratory1.html
• Save the contents to a new file named
Laboratory6.html
• Change the title to Laboratory 6
• Change the background color of the whole web
page to “LavenderBlush”
• Change the font of the header to “Century
Gothic” • Set the alignment of the header to
“center”
Instructions
• Change the font of the paragraphs to “Arial” •
Set the alignment of the paragraphs to “justify”
HTML Text Indentation
• The text-indent property is used to specify the
indentation of the first line of text.

Laboratory
Exercise 7
Text Indentation

Instructions
• Open Laboratory1.html
• Save the contents to a new file named
Laboratory7.html
• Change the title to Laboratory 7
• Change the background color of the whole web page
to “PapayaWhip”
• Set the color of the header to “FireBrick” • Set
the alignment of the header to “center” • Set the
alignment of the paragraphs to “justify” • Set
the font size of the paragraphs to “20px” • Set
the indentation of the paragraphs to “2em”
Instructions
• Set the alignment of the paragraphs to
“justify” • Set the font size of the paragraphs to
“20px” • Set the indentation of the paragraphs
to “2em”