Cascading Style Sheets CSS - PowerPoint PPT Presentation

1 / 23
About This Presentation
Title:

Cascading Style Sheets CSS

Description:

Cascading Style Sheets enable a Web site's presentation (design) to be separated ... of popular Web browsers like: Internet Explorer 6, Netscape 6, Opera 5, and ... – PowerPoint PPT presentation

Number of Views:79
Avg rating:3.0/5.0
Slides: 24
Provided by: Maf99
Category:

less

Transcript and Presenter's Notes

Title: Cascading Style Sheets CSS


1
Cascading Style SheetsCSS
  • by
  • Pavlovic Nenad

2
Presentation Contents
  • What are CSS?
  • History of CSS
  • Why CSS?
  • Types of Style Sheets
  • Style Sheets Syntax
  • Cascading Model
  • Box Formatting Model
  • CSS Syntax
  • Inheritance
  • Classes, Pseudo Classes IDs
  • Groups of elements (DIV SPAN)
  • Benefits
  • Disadvantages
  • Conclusion

3
What are CSS?
  • Cascading Style Sheets are formatting
    information that is applied to HTML.
  • Cascading Style Sheets enable a Web site's
    presentation (design) to be separated from its
    content and structure.
  • Using the CSS every existing HTML tag (element)
    can be formatted as we desire.

4
History
  • First version of CSS (CSS1) is forged by W3C
    (World Wide Web Consortium) in 1996.
  • It was partially supported by Browsers.
  • In 1998 CSS2 have been released.
  • Fully supported by Browsers.

5
Types of Style Sheets
  • Style sheets can be delivered to an HTML in
    three ways
  • Inline (add a style to an element)
  • ltP stylefont 13pt verdanagtTextlt/Pgt
  • Embedded (add a style to specific page)
  • ltHEADgt
  • ltSTYLEgt
  • P font 13pt verdana
  • lt/STYLEgt
  • lt/HEADgt
  • Linked (add an external style definition)
  • ltHEADgt
  • ltLINK relstylesheet href./path/file_name.c
    ss typetxt/cssgt
  • lt/HEADgt

6
Cascading Model
7
Box Formatting Model
8
Style Sheet Syntax
  • Whatever method we use to deliver style to HTML
    (inline, embedded or linked), the syntax will
    going to be similar in all cases.
  • CSS syntax contains of three parts

9
  • Selectors are usually standard HTML elements
    (H1, P, BODY, TABLE, etc.).
  • Properties are names of attributes that are used
    to describe an object (color, text, font-face,
    font-size, etc.).
  • Values are describing properties(yellow, bold,
    fixed, Arial, etc.).

10
Classes, Pseudo Classes and IDs
  • Classes are the instances of style definitions.
  • If we want to brake down our style rules into
    small very precise peaces, we will use classes.
  • Everything that is not redefined in a class is
    inherited from the higher level class or element.

P.highlight background-color yellow color
red
11
  • Pseudo-classes are predefined classes that
    already mean something to the browser.
  • They cant be defined by user, but user can
    apply values to them!
  • Alink Avisited
  • color blue color red

12
  • List of pseudo classes
  • first-child
  • link (A)
  • visited (A)
  • hover (A)
  • active (A)
  • focus (A)
  • lang
  • first-line (P)
  • first-letter (P)
  • before
  • after

13
  • IDs are groups of style definitions that can be
    applied to any HTML element (tag).
  • If ID is applied to an element that is already
    defined in the style sheet, the definition will
    be overridden.
  • IDs are defined as follows
  • important
  • font-weight bold
  • color Yellow

14
Advanced page look
  • CSS gives us much more flexibility in layout
    designing.
  • The advantage is that we can place objects
    (words, paragraphs, pictures, lines, etc.)
    exactly where we want on the page (positioning
    and Z-index).
  • Also, we can group elements and then control
    them as a group. For this purpose DIV tag is
    used.
  • On the same way we can control parts of text
    which is bounded with SPAN tag.

15
Groups of elements (DIV SPAN)
  • DIV provides means for grouping elements and
    assigning attributes to the group. It is nested
    within the BODY!
  • SPAN encloses text within generic inline element
    that you can define with style sheet. It is
    nested within any BLOCK element.

16
Z-index
  • Z-index enables us to position elements in the
    third dimension (depth).
  • It orders the elements with the lower index on
    the top of elements with higher index.

17
Benefits of Using CSS
  • Separation of the document from the
    presentation.
  • Easier coding and maintenance.
  • Site control.
  • Consistency (Uniformity).
  • All pages in the site looks the same.
  • Rich design and layout.
  • Avoidance of tag misuse.
  • Solves speech synthesizer problems.

18
Benefits of Using CSS (2)
  • Avoidance of images misuse.
  • Increases download time ( a lot! ).
  • Text on images is not searchable!!!
  • CSS allow user to override authors style.
  • Personalization of the page.
  • Auto generated content.
  • First letter, numbered lists, before and after
    elements, etc

19
Benefits of Using CSS (3)
  • Aural style.
  • Define how the text synthesizer will read the
    content.
  • Accessibility.
  • PC browsers, mobiles, PDAs, tty terminals,
    printers, TVs, users with disabilities, etc
  • No browser specific requirements, such as
    plug-ins.

20
Compatibility Issue
  • CSS1 was partially supported by browsers Internet
    Explorer 3, Internet Explorer 4, and Netscape
    Navigator 4.7.
  • CSS2 is fully supported by all new versions of
    popular Web browsers like Internet Explorer 6,
    Netscape 6, Opera 5, and Micro Browsers for
    Mobiles.
  • If browser does not support CSS it will display
    page in HTML formatted form, ignoring the styles.

21
Disadvantages
  • The only disadvantage that can be assigned to CSS
    is non-compatibility with all internet browsers.
  • Surveys says that today 85 of users are able to
    see pages that uses CSS, while the others are not.

22
Conclusion
  • As you can see, CSS can be useful for everyone,
    starting from Web designers to the ordinary
    users.
  • The fact is that todays Web Sites can not be
    imagined without CSS.

23
Thank you for participating in the presentation ?
  • For any further questions, you may contact me at
    e-mail
  • pavlovic_at_city.academic.gr
Write a Comment
User Comments (0)
About PowerShow.com