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