Introduction to HTML Style

1
Introduction to HTML Style

• One goal of a web site is to have a consistent
  look and feel throughout so that pages flow from
  one to the other visually.
• This is accomplished using HTML provided style
  properties.
• You can do almost anything with styles -- but you
  are still suggesting how to display things, not
  controlling.
• You can define your own styles and use them
  easily throughout your web site.

2
Introduction to HTML Style

• Styles can be suggested at three differeing
  levels.
• For a specific HTML tag (inline styles).
• For a specific web page (document-level
  stylesheets).
• For an entire web site (external stylesheets).

3
Inline Styles

• Occur within specific tags
• ltfont size2gtblah blah blahlt/fontgt
• ltfont face"Arial"gtblah blah blahlt/fontgt
• Format is different from that used in style
  sheets.
• Applies only to the specific tag it occurs in.
• Use when you know that this is a unique situation
  - you don't need to repeat this style again or
  often.
• Use when you know you will not change the style.
• Its hard to find all the occurences.

4
Document Level Styles

• Occur within header of document.
• Format is same as with stylesheets.
• Applies only to the specific web page it occurs
  in.
• Use when you construct a page that differs
  radically from the rest of your web site (and
  even then you might not want to use it - you can
  always build multiple external style sheets).

5
External Stylesheets

• Exist as separate documents linked to the HTML
  page.
• Format is selector followed by property values.
• body background AABBDD
• h1 font-family arial
• Applies to every web page linked to it.
• ltlink rel"stylesheet" type"text/css"
  href"stylesheet_name.css"gt
• Use to create and maintain a consistent look and
  feel throughout your web site.
• Changing styles is easy -- do it at one place.

6

• Style Sheets
• CSS Lets you control over 50 properties.
• The most common are
• Font-family
• Font-size
• Font-weight
• Line-height
• Letter spacing
• Color

7

• Style Sheets Setting Fonts
• Common PC Fonts
• Arial
• Courier New
• Times New Roman
• Verdana

8

• Style Sheets Setting Fonts
• Common UNIX Fonts
• Helvetica
• Times

9

• Style Sheets Setting Fonts
• Common Macintosh Fonts
• Helvetica
• Courier
• Times
• Verdana
• Arial
• Palatino

10
ltHEADgt ltSTYLE TYPEtext/cssgt P COLOR
CCCCCC FONT-SIZE 24 pt H1COLOR
990033 H2COLOR 003399 H3COLOR
FF0099 BODYCOLOR 996633 FONT-SIZE 28
pt FONT-FAMILY ARIAL, HELVETICA, SANS-SERIF lt
/STYLEgt lt/HEADgt
11

• Specify Font Weight
• Normal
• Bold
• Bolder
• Lighter
• Font-Weight Bold

12
Specify Line Height Line-Height 30pt Specify
Letter Spacing Letter-Spacing 2pt Specify Text
Indents Text-Indent 24pt
13
Specify Color H2 COLOR FFFFFF Background-Co
lor CCFFFF
14
Creating a Style Sheet

• Create a word document with the main style
  elements for an entire web site
• Use the same syntax as if you were coding for a
  single web page.
• Name the document stylesheet.css
• / This is the format for a comment /

15
/ StyleSheet /   BODY COLOR CCFFFF
FONT-SIZE 24pt H1 COLOR 000000 FONT-SIZE
32pt H2 COLOR 3300FF FONT-SIZE 28pt P
COLOR FFCCFF FONT-SIZE 22pt FONT-FAMILY
ARIAL, HELVETICA, SANS-SERIF Save as
stylesheet.css
16
Linking to the Style Sheet
Place the following code in each page header
which needs to be linked to the main style
sheet. ltHEADgt ltTITLEgt Sample Document
lt/TITLEgt ltLINK HREFstylesheet.css
RELstylesheet gt lt/HEADgt