Cascading Style Sheets CSS by Pavlovic Nenad by
2Cascading Style Sheets Presentation Contents What are CSS? What are CSS? History of CSS History of CSS Why CSS? Why CSS? Types of Style Sheets Types of Style Sheets Style Sheets Syntax Style Sheets Syntax Cascading Model Cascading Model Box Formatting Model Box Formatting Model CSS Syntax CSS Syntax Inheritance Inheritance Classes, Pseudo Classes & IDs Classes, Pseudo Classes & IDs Groups of elements (DIV & SPAN) Groups of elements (DIV & SPAN) Benefits Benefits Disadvantages Disadvantages Conclusion Conclusion
3Cascading Style Sheets What are CSS? Cascading Style Sheets are formatting information that is applied to HTML. 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. 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. Using the CSS every existing HTML tag (element) can be formatted as we desire.
4Cascading Style Sheets History First version of CSS (CSS1) is forged by W3C (World Wide Web Consortium) in First version of CSS (CSS1) is forged by W3C (World Wide Web Consortium) in It was partially supported by Browsers. It was partially supported by Browsers. In 1998 CSS2 have been released. In 1998 CSS2 have been released. Fully supported by Browsers. Fully supported by Browsers.
5Cascading Style Sheets Types of Style Sheets Style sheets can be delivered to an HTML in three ways: Style sheets can be delivered to an HTML in three ways: Inline (add a style to an element): Text Text Embedded (add a style to specific page): <HEAD><STYLE> P { font: 13pt verdana; } </STYLE></HEAD> Linked (add an external style definition): <HEAD> </HEAD>
6Cascading Style Sheets Cascading Model
7Cascading Style Sheets Box Formatting Model Element Padding Border Margin 4 th 1 st 2 nd 3 rd
8Cascading Style Sheets 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. 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: CSS syntax contains of three parts: SELECTOR | PROPERTY | VALUE BODY { color: yellow; } BODY { color: yellow; }
9Cascading Style Sheets Selectors are usually standard HTML elements (H1, P, BODY, TABLE, etc.). 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.). 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.). Values are “describing” properties(yellow, bold, fixed, Arial, etc.).
10Cascading Style Sheets Classes, Pseudo Classes and IDs Classes are the instances of style definitions. 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. 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. Everything that is not redefined in a class is inherited from the higher level class or element. P.highlight { background-color: yellow; color: red; } P.highlight { background-color: yellow; color: red; }
11Cascading Style Sheets Pseudo-classes are predefined classes that already mean something to the browser. Pseudo-classes are predefined classes that already mean something to the browser. They can’t be defined by user, but user can apply values to them! They can’t be defined by user, but user can apply values to them! A:link A:visited {{ color: blue; color: red; color: blue; color: red; }}
12Cascading Style Sheets List of pseudo classes: 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
13Cascading Style Sheets IDs are groups of style definitions that can be applied to any HTML element (tag). 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. 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: IDs are defined as follows: #important { font-weight : bold; color : Yellow; }
14Cascading Style Sheets Advanced page look CSS gives us much more flexibility in layout designing. 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). 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. 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. On the same way we can control parts of text which is “bounded” with SPAN tag.
15Cascading Style Sheets Groups of elements (DIV & SPAN) DIV provides means for grouping elements and assigning attributes to the group. It is nested within the BODY! 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. SPAN encloses text within generic inline element that you can define with style sheet. It is nested within any BLOCK element.
16Cascading Style Sheets Z-index Z-index enables us to position elements in the third dimension (depth). 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. It orders the elements with the lower index on the top of elements with higher index. Z = 100 Z = 50 Z=70
17Cascading Style Sheets Benefits of Using CSS Separation of the document from the presentation. Separation of the document from the presentation. Easier coding and maintenance. Site control. Consistency (Uniformity). Consistency (Uniformity). All pages in the site looks the same. Rich design and layout. Rich design and layout. Avoidance of tag misuse. Avoidance of tag misuse. Solves speech synthesizer problems.
18Cascading Style Sheets Benefits of Using CSS (2) Avoidance of images misuse. Avoidance of images misuse. Increases download time ( a lot! ). Text on images is not searchable!!! CSS allow user to override authors style. CSS allow user to override authors style. Personalization of the page. Auto generated content. Auto generated content. First letter, numbered lists, before and after elements, etc…
19Cascading Style Sheets Benefits of Using CSS (3) Aural style. Aural style. Define how the text synthesizer will read the content. Accessibility. Accessibility. PC browsers, mobiles, PDAs, tty terminals, printers, TVs, users with disabilities, etc… No browser specific requirements, such as plug-ins.
20Cascading Style Sheets 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.
21Cascading Style Sheets 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.
22Cascading Style Sheets Conclusion As you can see, CSS can be useful for everyone, starting from Web designers to the ordinary users. The fact is that today’s Web Sites can not be imagined without CSS.
23Cascading Style Sheets Thank you for participating in the presentation Thank you for participating in the presentation For any further questions, you may contact me at