Cascading Style Sheets

1
Cascading Style Sheets

• An Introduction to CSS
• Patrick R. Pearce
• Computing Services
• Departmental Support

2
Types of Style Sheets

• Three types of Style Sheets
• Linked Style Sheets
• Embedded Style Sheets
• In-line Style Sheets

3
Style Sheet Code

• Linked Style Sheet
• ltlink rel stylesheet srcpath_to_style_sheet
  typetext/cssgt
• Used on multiple page sites
• Easiest way to manipulate the entire site
• Least Impact of the three

4
Style Sheet Code

• Embedded Style Sheet
• ltstyle type text/cssgt
• lt!
• Style information goes here
• // -- gt
• lt/stylegt
• More impact that Linked Style Sheet

5
Style Sheet Code

• In-Line Style
• ltelement name style attribute valuegt
• Effective until the element is closed
• Not continued from one element to the next

6
Style Sheet Hierarchy

• From most impact to least
• Inline Style
• Embedded Style
• Linked Style
• The style closest to the element has the most
  impact

7
Ease of Use

• Linked Style Sheets are the most efficient in the
  styling of a large or multi-page site
• Embedded Style Sheets are less designer friendly
  in that they exist on every page
• In-line are the least efficient

8
What Can CSS Do?

• An un-styled page
• A styled page

9
What Does It Look Like?

• Embedded
• ltstyle type text/cssgt
• lt!--
• body
• Font-size 3 px/pt/em
• Font-Face serif, sansserif
• --gt
• lt/stylegt

10
What Does It Look Like?

• Linked
• ltlink relstylesheet srcstylesheet
  typetext/cssgt
• body
• font-face Arial, Helvetica

11
What does It Look Like?

• In-line
• ltp stylefont-family Arialgt
• ltol stylefont-size 15pxgt

12
Some Examples

• UALR uses a style sheet to maintain the sizes,
  font faces, and colors of the text and the links
  on its pages.
• W3C.ORG uses style sheets
• MSN uses style sheets
• Netscape uses style sheets.

13
Who Supports Style Sheets

• Internet Explorer
• Netscape
• Amaya

14
CSS Try it now

• Open HTML-Kit
• After the title in a new page type
• ltstyle type"text/css"gt
• lt!--
• body
• background-color ffff88
• font-family Arial
• font-weight bold
• color 006600
• p
• background-color ffcc88
• --gt
• lt/stylegt