Styling your page font type, font size, colors, text decoration, alignment, set margin, table paddin

1
Styling your page(font type, font size, colors,
text decoration, alignment, set margin, table
padding, etc.)

• References
• W3Schools (http//www.w3schools.com)

2
Styling your page(font type, font size, colors,
text decoration, alignment, set margin, table
padding, hypertext colors etc.)

• Overview
• How 1 (Inline style)
• How 2 (internal style)
• How 3 (external style)

3
How to change the font or text attributes without
using ltfontgt tag since its deprecated?
? How
4
How 1 (Inline style)
Previously, you learnt about style attribute
applied to paragraph. Recall this example (from
previous slide) ltp style"color red
font-family arial font-size 14pt"gt This is a
paragraph lt/pgt
Notice the way of writing the style attribute
(see the red text) is different from the way of
writing other attributes. It can be lengthy...
This attributes are called as CSS (cascading
style sheet) properties.
5
How 1 (Inline style)
ltp style"color red font-family arial
font-size 14pt"gt This is a unique paragraph with
its own style. lt/pgt This approach of doing
style is called as Inline style An
inline style should be used when a unique style
is to be applied to a single occurrence of a html
element such as to this unique paragraph.
6
How 2 (Use ltstylegtlt/stylegt html tag)
7
How 2 (Use ltstylegtlt/stylegt html tag)

• Use notepad, and do this Example
• lthtmlgt
• ltheadgt
• ltstylegt
• h1 color red
• h3 color blue
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtThis is header 1lt/h1gt
• lth3gtThis is header 3lt/h3gt
• lt/bodygt
• lt/htmlgt

ltstylegt tag is a container tag, it must reside in
ltheadgt tag. Try to change the lth1gt text attribute
(such as color, font-family, font-size,
text-align, text-decoration, etc) to different
styles. Do figure out how to do that.
8
How 2 (Use ltstylegtlt/stylegt html tag)
Add more styles (CSS properties) to lth1gt, and
test it out.

• Use notepad, and do this Example
• lthtmlgt
• ltheadgt
• ltstylegt
• h1 color red
• h3 color blue
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtThis is header 1lt/h1gt
• lth3gtThis is header 3lt/h3gt
• lt/bodygt
• lt/htmlgt

h1 font-family"times new roman"
font-size20pt text-aligncenter text-decoratio
nunderline colorgreen
9
How 2 (Use ltstylegtlt/stylegt html tag)

• Use notepad, and do this Example
• lthtmlgt
• ltheadgt
• ltstylegt
• h1 color red
• h3 color blue
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtThis is header 1lt/h1gt
• lth3gtThis is header 3lt/h3gt
• lt/bodygt
• lt/htmlgt

For this approach, we called it as Internal
Style Sheet An internal style sheet should be
used when a single html document has a unique
style. You define internal styles in the head
section with the ltstylegt tag.
10
How 3 (Use external style sheet)
11
How 3 (Use external style sheet)

• An external style sheet is ideal when the style
  is applied to many pages.
• With an external style sheet, you can change the
  look of an entire Web site by changing one file
  (what file is that? Anyone can guess??).
• Each html page must link to the style sheet using
  the ltlinkgt tag. The ltlinkgt tag goes inside the
  head section.

12
How 3 (Use external style sheet)

• Example
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"mystyle.css"gt
• lt/headgt

An external file which contains CSS properties
written by using notepad, but with the extension
name XXX.css
13
How 3 (Use external style sheet)
p, table font-family verdana, arial, "sans
serif" margin-left 10pt alink
colordarkgreen avisited colorgrey aactive
colordarkgreen ahover colormediumblue

• Example of the contents for mystyle.css
• body
• color black
• background-color ffffff
• h1,h2,h3
• font-family verdana, arial, "sans serif"

14
How 3 (Use external style sheet)

• You can try this example now!!!