1 / 23

C ascading S tyle S heets CSS

C ascading S tyle S heets CSS. by Pavlovic Nenad. 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

dea
Download Presentation

C ascading S tyle S heets CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 Cascading Style Sheets

  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. Cascading Style Sheets

  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. Cascading Style Sheets

  5. Types of Style Sheets • Style sheets can be delivered to an HTML in three ways: • Inline(add a style to an element): <P style=“font: 13pt verdana”>Text</P> • Embedded(add a style to specific page): <HEAD> <STYLE> P { font: 13pt verdana; } </STYLE> </HEAD> • Linked(add an external style definition): <HEAD> <LINK rel=“stylesheet” href=“./path/file_name.css” type=“txt/css”> </HEAD> Cascading Style Sheets

  6. Cascading Model Cascading Style Sheets

  7. 4th 3rd 2nd 1st Element Padding Border Margin Box Formatting Model Cascading Style Sheets

  8. SELECTOR | PROPERTY | VALUE BODY { color: yellow; } 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: Cascading Style Sheets

  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.). Cascading Style Sheets

  10. Classes, Pseudo Classes and IDs • Classesare 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; } Cascading Style Sheets

  11. 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! A:link A:visited { { color: blue; color: red; } } Cascading Style Sheets

  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 Cascading Style Sheets

  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; } Cascading Style Sheets

  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. Cascading Style Sheets

  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. Cascading Style Sheets

  16. Z = 100 Z=70 Z = 50 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. Cascading Style Sheets

  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. Cascading Style Sheets

  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… Cascading Style Sheets

  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. Cascading Style Sheets

  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. Cascading Style Sheets

  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. Cascading Style Sheets

  22. 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. Cascading Style Sheets

  23. Thank you for participating in the presentation  For any further questions, you may contact me at e-mail: pavlovic@city.academic.gr Cascading Style Sheets

More Related