Multimedia Applications

1
Multimedia Applications

• Introduction to CSS

2
What is CSS?

• A set of rules for displaying markup content
• All styling/formatting code can be held in a
  separate document to the HTML content you want to
  display

3
What are Web Standards

• Standards of Web Development as recommended by
  the Worldwide Web Consortium (W3C)
• One of the recommendations is to separate content
  from presentation.
• HTML is the content, CSS is the presentation.

4
Why design to the standard

• Designing and building with these standards
  simplifies and lowers the cost of production,
  while delivering sites that are accessible to
  more people and more types of Internet devices.
  Sites developed along these lines will continue
  to function correctly as traditional desktop
  browsers evolve, and as new Internet devices come
  to market.
• http//www.webstandards.org

5
HTML, XHTML CSS

• HTML/XHTML for document content/structure
• Structure does matter
• CSS for presentation
• If it isnt content it doesnt belong in HTML

6
Visual Display in HTML

• lth1gtltfont colorred faceTimes New Romangt
• This will be a heading 1 in red Times New Roman
  fontlt/fontgtlt/h1gt
• lth1gtltfont colorred faceTimes New Romangt
• Every time I want my text to look the same,
• I have to retype or cut and paste all of this
  markuplt/fontgtlt/h1gt

7
Benefits of CSS

• Using CSS creates benefits in
• Development processes
• Visual display
• Accessibility
• Extensibility
• Bandwidth savings
• Development/maintenance time

8
CSS Benefits - Development

• Site consistency in appearance and structure
• HTML does what it was meant to do
• Provides a structural context
• Business owners/site developers focus on
  underlying conceptual data model and content,
  rather than appearance

9
CSS Benefits Visual Display

• Can easily create and change a standard look and
  feel.
• Same page can use different styles for printing
  and viewing on-screen.

10
CSS Benefits - Accessibility

• Separates Content from Presentation.
• Easy to incorporate accessibility requirements
  without much additional effort
• Properly structured content facilitates use of
  screen readers
• Tableless design facilitates keyboard tabbing

11
CSS Benefits - Extensibility

• One document can be associated with different
  visual interpretations
• Printing vs. Screen
• Screen vs. Projection
• Style sheets can be implemented specifically for
  eg pda or mobile phone.

12
CSS Benefits - Bandwidth

• Page sizes can be reduced by 25-50
• Pages are rendered much faster if they do not use
  tables.
• Better user experience

13
CSS Benefits - Maintenance

• Easier to manage a site that has been developed
  by someone else
• Site wide changes are easily implemented
• HTML is easier to develop and maintain
• HTML will work in future browsers
• Shorter development times faster time to market
• Smaller pages less bandwidth

14
CSS Benefits - Other

• Better search engine ranking
• One of the biggest challenges for webmasters
• Text in XHTML document more pertinent
• Cross-Browser Compatibility
• One set of HTML serves all users
• Code not ambiguous
• Future Compatibility
• Current browsers will still display sloppy coding
  but may not in the future

15
Style Rules

• CSS style rules look like this
• Selector
• property0value0
• propertyZvalueZ
• e.g.
• H1font-size20pt color blue

16
3 types of Style

• Inline
• Style information appears near text to be styled
• For styling part of a page
• Internal
• Style information appears inside ltheadgt lt/headgt
  tags
• For styling a single page
• External
• In separate CSS document
• For styling a whole site

17
Inline Style

• Using a Style Attribute
• lth1 stylecolorred font-family Arialgt
• This shows up as heading 1 in red Arial font.
  I dont have to use the font tag any more. lt/h1gt
• lth1 stylecolorred font-family Arialgt
• However, I still have to retype or cut and
  paste the markup every time I want to use the
  same style.lt/h1gt
• You could apply different styles to different h1
  elements using inline styles.
• Notice that we switch from the attribute
  font face (in HTML) for to font-family in
  CSS. Names of attributes in HTML do not
  necessarily match the names of properties in CSS
  rules.

18
Embedded (Internal) Style Sheet

• Using a Style Element
• lthtmlgt
• ltheadgtlttitlegtEmbedded style sheetlt/titlegt
• ltstyle typetext/cssgt
• h1 colorred font-family Georgia
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtThis will appear as a heading 1 in red Arial
  font. In the head of this document, I declared an
  embedded style sheet that will make all h1 tags
  in this document red with Georgia fontlt/h1gt

HTML font setting ltfont color"red"
face"Verdana"gt
19
Linked Style Sheets

• External Style Sheet
• lthtmlgt
• ltheadgtlttitlegtLinked style sheetlt/titlegt
• ltlink relstylesheet typetext/css
  hrefmystyle.cssgt
• lt/headgt
• ltbodygt
• lth1 classredgtThis will also appear as a
  heading 1 in red Georgia font. In the head of
  this document I declared a link to an outside
  stylesheet named mystyle.css. In that external
  stylesheet I place all of the style declarations
  I was using in my inline stylesheetlt/h1gt
• ltpgt
• Now I can change the way all of my pages
  display simply by modifying a value in my single
  external stylesheet. How efficient!
• lt/pgt

20
Example External Stylesheet
File name mystyle.css

• h1
• colorred
• font-family Arial
• body
• background-color white
• p
• font-size 12px
• text-align center

21
External Stylesheet

• In the HTML file to be styled, you add the link
  to the stylesheet
• ltheadgt ltlink rel"stylesheet" type"text/css"
  href"mystyle.css" /gt lt/headgt

22
Cascading

• When using multiple styles that conflict, which
  will be displayed?
• Order (highest to lowest)
• Inline style sheet
• Embedded style sheet
• External style sheet
• Browser default

23
Style Rule Values

• Colors
• Names for some
• blue, red, green, pink
• Hexadecimal
• 0000FF, FF0000, 00FF00, FF3399
• RGB
• rgb(0,0,255), rgb(255,0,0), rgb(0,255,0)
• RGB
• rgb(0,0,100), rgb(100,0,0)

24
Style Rule Values

• Font size
• px for pixels (a dot on the screen)
• font-size 12px
• pt for point (1/72 of an inch)
• font-size 12pt

25
Conclusion

• CSS allows the separation of content and
  format/display
• Makes managing a website much easier
• Greatly improves accessibility
• Cascading nature of styles makes them extremely
  flexible.