Project 8

1
Project 8

• Creating Style Sheets

2
Introduction

• Cascading Style Sheets (CSS)
• Allows a Web developer to write code statements
  that control the style of elements on a Web page
  or on many web pages
• CSS is not HTML
• Makes it a lot easier to make changes to format

3
Types of Style Sheets

• Inline style sheets allow you to change the
  styles for one particular tag, within the tag
  code
• Embedded style sheets allow you to change several
  properties consistently for the entire page, code
  is before the end head tag.
• External style sheets allow you to control the
  appearance of multiple pages, code is in its own
  file.

4
(No Transcript)
5
Style Sheet Format

• Style statement
• Selector identifies the page element
• Declaration identifies how the elements should
  display
• Includes at least one property to apply to the
  selected element
• Each property includes a related value

6
(No Transcript)
7
Style Sheet Format
8
Inline Style Sheets

• Used to define a style for an individual HTML tag

9
Embedded Style Sheets

• Used to control the style of a single Web page

10
Embedded Style Sheet
11
Before embedded style sheet
12
After embedded style sheet
13
External Style Sheet

• Ideal for giving multiple pages in a Web site a
  common look
• Two-part process
• Create the external style sheet, text file with a
  .css extension
• Link the style sheet to the Web page
• ltLINKgt tag

14
File saved with the file extension .css
15
External Style Sheets

• Use the ltLINKgt tag between the ltHEADgt tags to
  have that page use the css file

16
External Style Sheet

• You must include a link tag in each of the pages
  to which you wish to apply the external style
  sheet

ltlink relstylesheet typetext/css
hrefstyle1.cssgt
This will be the external style sheet file name,
which always has the extension .css
This part is always the same.
17
(No Transcript)
18
Setting the Paragraph Style

• P text-indent 8pt
• Indents the first word of each paragraph 8 points
  from the left edge of the browser window
• You can specify a fixed value in inches,
  centimeters, or pixels
• You can specify a relative value for a text
  indent using a percentage

19
Selector A

• Alink
• Anchors not previously visited
• Avisited
• Anchors previously visited
• Aactive
• Anchors currently being clicked (active)
• Ahover
• Anchors with the mouse pointer hovering over

20
Setting a Style for All Links

• Text-decoration
• Blink
• Line-through
• Overline
• Underline
• You can apply multiple text-decorations
• text-decoration underline overline

21
Setting a Style for All Links

• Font-family property
• Allows you to define a font for use in a Web page
• Best to specify more than one font-family value
• font-family Times New Roman,Verdana
• Font-size property
• Color property

22
Setting a Body Style

• BODY margin8pt
• The margin is the amount of transparent space
  between elements on the page
• Can set margins for individual sides
• Can be set as a fixed or relative length
• Background-color property
• Sets the background color of the Web page
• Can be referenced by RGB code, hexadecimal, or
  color name

23
Setting a Table Style

• TABLE font-family Verdana, Garamond font-size
  11pt
• TH color navy