CSS Test and Description

1
CSS Test and Description

• A Group Project By
• Jonathan Xavier Ozovek
• Renee Puchalski
• Jamie Gambetta

2
Presentation Outline

• Introduction
• Explanation What is a Style Sheet?
• How Style Sheets Work
• Examples of CSS
• Browser Compatibility
• Integration of Style Sheets with HTML
• Conclusion

3
I. Introduction

• Average webpage of early 90s and even today
  fonts, formats, backgrounds were marked up with
  longwinded HTML code.
• To make every page in a website consistent, it is
  time consuming to do this approach presently.
• There is another more efficient solution to
  formatting webpages consistently

Cascading Style Sheets
4
II. What is a Style Sheet (CSS)?

• Stands for Cascading Style Sheet
• They are simply text files that separate content
  from appearance. Content within HTML, appearance
  described in CSS file.
• CSS offers web developers a powerful tool that
  makes consistency in design and layout relatively
  easy without the need for expensive plug-ins or
  long download times.

5
II. What is a Style Sheet (CSS)?(continued)

• Style sheets written according to grammar
  specified in CSS1 or CSS2 language specs of the
  World Wide Web Consortium (W3C)
• Unlike HTML, there is no need for a special
  declaration at the top of the CSS file.

6
III. How Style Sheets Work

• CSS are made up of statements (or instructions)
  which either identifies an element in a HTML
  document, or tells the browser how to draw an
  element, such as a paragraph and list items.
• CSS can either be an external file specified in a
  HTML file or it can be embedded into a HTML file

7
III. How Style Sheets Work (contd)

• Statements are made up of two parts
• 1)Selector Identifies page elements
• 2)Declarations describes how selector should be
  rendered

8
III. How Style Sheets Work (contd)

• Example
• Body
• font-family Verdana, Times New Roman,
  Helvetica
• font-size 1em
• Text-align center

• Here, selector would be Body. Declarations would
  be font-family, font-size, and Text-align.

9
IV. Examples of CSS

• An unformatted HTML page
• A page formatted using HTML
• Same page as above formatted using CSS
• CSS file for the above page
• Same page formatted differently using CSS
• CSS file for the above page

10
V. Browser Compatibility

• Approximately 5 of browsers do not support CSS.
• 80 of these are older browsers (ex. Netscape 3)
• IE 3 and Netscape 4 become buggy when they
  encounter a CSS that specifies table options.
• Inability to support CSS will not cause a page to
  crash or make it unreadable. It will simply
  alter the formatting of a page.

11
V. Browser Compatibility (contd)

• To ensure that old browsers can utilize your CSS
  file, try to be very general in coding it.
  Example is a template
• ltHTMLgt  ltHEADgt  lt/HEADgt  ltBODY
  alink"xxxxxx" bgcolor"xxxxxx" link"xxxxxx"
  text"xxxxxx" vlink"xxxxxx"gt  lt/BOD
  Ygt lt/HTMLgt

12
V. Browser Compatibility (contd)

• Another tip is to make use of hackarounds in
  order to have your site appear perfect on all
  browsers.
• However, method using hacks limits your
  creative freedom to the greatest extent.

13
V. Browser Compatibility (contd)

• Using hackarounds entails
• Avoid margin-top.
• Avoid all units (em, , etc) except pixels.
• Avoid specifying line heights.
• Do not use keyword or numerical font weights on
  font shorthand declarations.
• Set margin-left and margin-right only on BODY.
• Avoid all styles on LI, DD, DT.

14
VI. Integration of Style Sheets

• Can embed style sheet using a style tag as
  follows
• ltstyle type text/cssgtlt/stylegt
• By embedding a CSS file into the head of a HTML
  document, we lose all advantages of using a style
  sheet.
• Can also link CSS file into a HTML document as
  follows
• ltlink relstylesheet typetext/css
  hrefhttp//www.cs.scranton.edu/styleSheet.cssgt
  
• This method is preferred since we maintain all
  advantages of using a CSS file for style, layout
  and formatting a HTML page.

15
VI. Integration of Style Sheets

• To create a CSS file, you can
• Use a HTML editor, such as Microsoft Frontpage
  and Macromedia Dreamweaver, which both contain
  templates to make CSS creation easier than ever.
• Follow general templates for CSS files available
  on the web for public distribution.

16
VII. Conclusion

• Usage of CSS in creating websites can lead the
  developer to be more efficient and make the
  website design process easier than it would
  normally be.
• Style sheets also cut down on the amount of code
  that has to be written for a webpage. Using
  these emphasizes the development principle of
  reusability of code.
• An understanding of selectors and the tools that
  are available to assist in creating CSS files
  will allow the developer to have more control
  over the appearance of their sites. This will
  allow the developer to take their pages to the
  next level.

17
This concludes our presentation

• The End