Web Design Lesson 4

1
Web Design Lesson 4

• Lexington Technology Center
• March 20, 2003
• Bob Herring
• On the web at www.lexington1.net/adulted/computer/
  web_design.htm

2
Web Design Lesson 4
Review of Tuesdays Lesson

• Hyperlinks
• Drawing Tables
• FrontPage Table Toolbar
• Page Design
• Implementing the Design in FrontPage
• Typography
• HTML Tags
• Personal Web Project

2
3
Web Design Lesson 4
Cascading Style Sheets

• What
• Cascading style sheets are documents that
  control the way an
• HTML document will be presented by the
  browser
• Cascading refers to how style rules are
  passed down from
• higher-level style sheets unless
  overruled by a style with more
• weight
• Why
• Yields better typography and layout control
• Makes style separate from structure
• Keeps file sizes down
• Site maintenance is easier
• Easy to learn

3
4
Web Design Lesson 4
Cascading Style Sheets

• How
• Define rules for your web pages
• Always use end tags (e.g., lt/Pgt) -- styles
  require it
• Styles can be set
• Inline
• With an embedded style sheet
• With a linked style sheet
• With an imported style sheet
• Styles are inherited -- elements at lower
  levels have the same
• properties as their parents above them
  (e.g., a list and its items)

selector property value
H1 color red
4
5
Web Design Lesson 4
Inheritance Features

• Rules of Weight
• Browser default
• Users style settings
• Linked style sheets
• Imported style sheets
• Embedded style sheets
• Inline style settings
• The more specific rule applies
• Rules of equal weight -- last commanded applies
• Margin setting rules are not inherited
• An !important setting overrides all other rules

Increasing Weight
H1 color red !important
5
6
Web Design Lesson 4
Multiple Styles

• Multiple selectors can be grouped in front of
  the property/value section
• Separate selectors with commas
• Multiple instances of the same selector are
  permitted
• The last property/value combination mentioned
  takes precedence
• Multiple styles can be be applied to the same
  selector
• Separate styles with semicolons
• Include a semicolon at the end of the list

H1, H2, H3 color red P font-size 12pt
font-family verdana, sans-serif
6
7
Web Design Lesson 4
Inline Style Sheets

• This is the highest weight setting
• Styles are applied locally to some particular
  element
• Style is an attribute of the start tag
• Multiple styles can be set -- separate with
  semicolons

ltH1 STYLEcolor redgtThis heading will be
red!lt/H1gt
ltH1 STYLEcolor red font-family verdanagtThis
heading will be red!lt/H1gt
7
8
Web Design Lesson 4
Inline Style Setting in HTML View

• An inline style modifies the H1 start tag to
  cause the browser
• to make the text red and set the Verdana font

8
9
Web Design Lesson 4
Effect of the Inline Style

• The H1 heading modified

9
10
Web Design Lesson 4
Embedded Style Sheet

• Embedded styles appear in the ltHEADgt section
• Enclose styles in comment tags to prevent them
  from showing
• Ensure that quotation marks are ASCII-type
  characters

ltHTMLgt ltHEADgt ltTITLEgtYour Title
Herelt/TITLEgt ltSTYLE TYPEtext/cssgt
lt!-- H1 color red P
font-size 12pt font-family verdana,
sans-serif --gt lt/STYLEgt
lt/HEADgt ltBODYgtBody of the documentlt/BODYgt lt/HT
MLgt
10
11
Web Design Lesson 4
Embedded Styles in HTML View

• Embedded styles are placed after the title
• FrontPage shows the styles in gray because of
  the comment tags

11
12
Web Design Lesson 4
Stylesheet File

• Style sheet files are simple text files
• Create them in Notepad save using the All
  Files method
• Ensure that they have the .css extension before
  using

H1 color red H2 color blue H3 color
green P font-size 12pt font-family verdana,
sans-serif
12
13
Web Design Lesson 4
Stylesheet File in Notepad

• The style sheet in Notepad

13
14
Web Design Lesson 4
Linked Style Sheets

• The most cost-effective way to apply styles is
  with a linked file
• In place of the ltSTYLEgt tag, use a ltLINKgt
• The ltLINKgt tag causes the browser to open the
  cascading style
• sheet file stylesheet.css and apply the
  styles to the page
• Multiple style sheets are permitted use a
  separate ltLINKgt statement
• All style sheet files must have a .css
  extension
• Linked style sheet files are the FrontPage
  default

ltHEADgt ltTITLEgtPage Titlelt/TITLEgt ltLINK
RELstylesheet TYPEtext/css
HREF/pathname/stylesheet.cssgt lt/HEADgt
14
15
Web Design Lesson 4
Linking Style Sheets with Front Page

• Click Format, then select Style Sheet Links

15
16
Web Design Lesson 4
Linking Style Sheets with FrontPage

• The Link Style Sheet dialog appears
• Select either Selected page(s) or All pages
• Click the Add button
• In the Select Hyperlink dialog, click on
  stylesheet.css, then click OK

16
17
Web Design Lesson 4
Web Page Before Styles

• Before the style sheet takes effect, all the
  text is black and set
• in Times New Roman

17
18
Web Design Lesson 4
Effect of the Style Sheet

• When the browser applies the rules from the
  style sheet, headings
• are colored and the paragraphs are set to
  the Verdana font

18
19
Web Design Lesson 4
Changing the Style Through the Style Sheet File

• Open the stylesheet.css file again in Notepad
  (Select All Files)
• change verdana to courier new
• Save the file

19
20
Web Design Lesson 4
Changed Style

• When you return, the browser has picked up the
  new style and
• changed the H1 headings font to Courier
• The style sheet file is a powerful tool for
  making wholesale changes
• to your web pages

20
21
Web Design Lesson 4
Imported Style Sheets

• Another way to access the stylesheet.css file
  is to import it
• The _at_import statement goes in the style section
  of the ltHEADgt
• Imported files must precede all other style
  commands
• Note that _at_import statements must end with a
  semicolon
• The _at_import method can hide styles from
  lower-level browsers
• Not well supported yet

ltSTYLE TYPEtext/cssgt lt!--
_at_import url(http//pathname/stylesheet.css)
--gt lt/STYLEgt
21
22
Web Design Lesson 4
_at_import Statement in HTML View

• The _at_import statement takes the place of the
  link, but refers to
• the same file as before (stylesheet.css)

22
23
Web Design Lesson 4
Using ltDIVgt and ltSPANgt

• ltDIVgt and ltSPANgt are container tags used to
  group other elements
• They have no inherent formats, but can accept
  styles
• Include a STYLE attribute in the start tag
• ltDIVgt groups blocks of text
• ltSPANgt is used inline to group sets of
  characters

ltDIV STYLEcolor bluegt ltH1gtHeadline!!lt/H1gt ltPgtT
ext paragraphlt/Pgt lt/DIVgt
ltPgtregular text ltSPAN STYLEcolor bluegtblue
textlt/SPANgt more regular textlt/Pgt
23
24
Web Design Lesson 4
Contextual Styles

• Styles can be set to respond to specific
  conditions
• In the example below, list item ltLIgt style is
  set to blue, but only if
• it is bold ltBgt. The style responds to the
  context
• The contextual style is indicated by the
  absence of a comma
• For multiple selectors, group the contextual
  styles using commas
• between the selectors

LI B color blue
H1 B, H2 B, H3 B color blue
24
25
Web Design Lesson 4
Contextual Styles

• When a list is inserted, the text is normal
• With LI B color blue in the style sheet,
  making the list item
• bold also sets its color to blue

25
26
Web Design Lesson 4
Class Attribute

• Identifies elements that are a part of a
  conceptual group
• Classes are implemented in two parts
• In the ltSTYLEgt section, selector-period-classnam
  e
• In the affected texts start tag,
  CLASSclassname
• Using just the period-classname affects all
  members of the class
• Class names cannot have spaces. Avoid using
  underscores

H1.important color red
.important color red
ltH1 CLASSimportantgtThis is critical!lt/H1gt ltP
CLASSimportantgtNo kidding!!!lt/Pgt
26
27
Web Design Lesson 4
Drop Cap Style Using a Class

• Use a class example below to make a dropped
  capital effect
• The period before the class name tells the
  browser its a class

ltstyle type"text/css"gt lt!-- .dropcap font
bold 400 sans-serif color teal
width 24pt float
left --gt lt/stylegt
27
28
Web Design Lesson 4
Drop Cap Class in HTML View

• The class is inserted in the ltSTYLEgt section in
  ltHEADgt
• To format the first letter, use the class
• ltSPAN CLASSdropcapgtTlt/SPANgt

28
29
Web Design Lesson 4
Drop Cap Class in Preview

• Applying the .dropcap class does the following
• Makes the font bold, Arial, and 4 times the
  surrounding text
• Sets the color to teal
• Sets a width that causes the other text to flow
  around it

29
30
Web Design Lesson 4
ID Attribute

• The ID attribute is similar to a class, but it
  specifies a single element
• IDs are implemented in two parts
• In the ltSTYLEgt section, number sign-id
• In the affected texts start tag, IDid
• Each ID must be unique within the document
• All IDs must begin with a letter

x12345 color red
ltP IDx12345gtNew Item!lt/Pgt
30
31
Web Design Lesson 4
ID Attribute HTML View

• Type each ID to be set into the ltSTYLEgt section
• Use a ltSPANgt to mark the affected text
• Here, ltSPAN IDx12345gt Three Museslt/SPANgt

31
32
Web Design Lesson 4
ID Attribute in Preview

• An ID is good for text that may (or may not)
  need to be changed
• When the change is needed, insert the ID into
  the style sheet file

32
33
Web Design Lesson 4
Measurement Units

• These are the units that can be used to specify
  properties
• Try to use only ems and exes. Variation in
  screen sizes makes
• specific measurements (pt, pc, in, mm, cm)
  hazardous
• Use pixels only for pictures and objects

33
34
Web Design Lesson 4
Type-Related Properties

• Text can be formatted using any or all of the
  15 properties listed
• in the table
• Not all browsers support all of the properties!

34
35
Web Design Lesson 4
Letter-Spacing Attribute in HTML View

• Try setting the letter spacing of the headline
  to 1em
• ltP STYLEletter-spacing 1emgtBIRTH OF THE
  MUSESlt/Pgt

35
36
Web Design Lesson 4
Letter-Spacing Attribute in Preview

• Letter spacing is good for column-spanning
  headlines

36
37
Web Design Lesson 4
Review

• Cascading Style Sheets
• Inline Styles
• Linked Style Sheets
• Imported Style Sheets
• Using ltDIVgt and ltSPANgt
• Contextual Styles
• Class and ID Attributes
• Measurement Units in HTML
• Text Properties

37