Scribd
Upload
57 views51 pages

Module 3 Improving The Appearance of Your Web Page

This document discusses various CSS properties for styling HTML elements including: 1. Inline CSS using the style attribute can set properties of specific HTML elements. 2. Background color, text color, fonts, text size, text alignment and text indentation can be defined using CSS properties like background-color, color, font-family, font-size, text-align, and text-indent. 3. Colors can be defined by names, RGB, Hex, and HSL values and there are exercises provided to change these color properties for different elements.

Uploaded by

Just Me
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
57 views51 pages

Module 3 Improving The Appearance of Your Web Page

This document discusses various CSS properties for styling HTML elements including: 1. Inline CSS using the style attribute can set properties of specific HTML elements. 2. Background color, text color, fonts, text size, text alignment and text indentation can be defined using CSS properties like background-color, color, font-family, font-size, text-align, and text-indent. 3. Colors can be defined by names, RGB, Hex, and HSL values and there are exercises provided to change these color properties for different elements.

Uploaded by

Just Me
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 51

Module 3: Improving the

Appearance of a Web Page


Inserting
Inline CSS
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.
Activity 6
Activity 6
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.
Activity 7
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.
Activity 8
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”
Instructions
• 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.
Activity 9
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”
Instructions
• 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.
Activity 10
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.
Activity 11
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”
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”

You might also like