1. CSS Chained classes Julien BRAURE – julien@jazar.co.uk

2. What is CSS ? Quick overview Chained classes Examples Conclusion Questions and maybe answers CSS – Chained classes

3. CSS : Cascading Style Sheet Separate Content and Presentation Save server load Reduce maintenance time Change in the design ? only update the CSS file CSS – Chained classes What is CSS ? HTML CSS body { color: #fff; } += Page1 ? HTML Page 1 CSS Page 2 ? HTML Page 2

4. CSS – Chained classes Quick overview HTML CSS markup.class1#this-one { /* here goes the declarations */ color: #f00; border: 1px solid #000; } classes are prefix with a dot (.) id is prefix with a sharp (#)

5. CSS – Chained classes Chained classes (HTML side) HTML Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. CSS p.class1 { color: red; } p.class2 { font-weight: bold; } In HTML the class attribute, may have multiple classes, space separated CSS declarations are merging... This paragraph is red AND bold

6. CSS – Chained classes Chained classes (CSS side) HTML Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. CSS p.class1 { color: red; } p.class2 { font-weight: bold; } p.class1.class2 { text-decoration: underline; } In HTML the class attribute, may have multiple classes, space separated Chained classes : HTML : space separated CSS : concatenated CSS declarations are merging... This paragraph is red, bold AND underlined This declarations only applies to markup with class1 AND class2

7. CSS – Chained classes Chained classes (CSS side) HTML Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. CSS p.class1 { color: red; } p.class2 { font-weight: bold; } p.class1.class2 { text-decoration: underline; color: green; } In HTML the class attribute, may have multiple classes, space separated overwrites

8. CSS – Chained classes Chained classes – Example 1 Messages: success, error, info

9. CSS – Chained classes Chained classes - Example Great ! It has been done. Bad luck ! Some error happens. Some important information. p.message { border: 2px solid; padding: 16px 8px 16px 48px; background-repeat: no-repeat; background-position: 8px center; } p.message.success { border-color: green; color: green; background-image: url(img/message.success.gif); } p.message.error { border-color: red; color: red; background-image: url(img/message.error.gif); } p.message.info { border-color: blue; color: blue; background-image: url(img/message.info.gif); } HTMLCSS Common declarations

10. CSS – Chained classes Chained classes – Example 2 - Site wide organisation Insurance website Static contents Faq’s Legal informations Some other contents Dynamic sections Cars insurance Houses insurance Design Static: Grey Dynamic: Car section: red House section: blue

11. CSS – Chained classes Basic layout: title of the page some content Chained classes – Example 2 - Site wide organisation

12. CSS – Chained classes Sample sitemap.page.static.dynamic.faq.car.house #step1#step2 #q1#q2 #tos #contact #step1#step2.legal... Chained classes – Example 2 - Site wide organisation

13. CSS – Chained classes Sample sitemap.page.static.dynamic.faq.car.house #step1#step2 #q1#q2 #tos #contact #step1#step2.legal... Chained classes – Example 2 - Site wide organisation

14. CSS – Chained classes Sample sitemap.page.static.dynamic.faq.car.house #step1#step2 #q1#q2 #tos #contact #step1#step2.legal... Chained classes – Example 2 - Site wide organisation

15. CSS – Chained classes.page h1 { font-size: 16px; }.page.static h1 { background-color: grey; }.page.dynamic.car h1 { background-color: red; }.page.dynamic.house h1 { background-color: blue; } CSS Common declarations Chained classes – Example 2 - Site wide organisation

16. CSS – Chained classes.page.dynamic.car.message.success { background-image: url(img/dynamic/car/message.success.gif); } Customized messages on car pages ? Chained classes – Example 2 - Site wide organisation

17. Conclusion CSS – Chained classes Real separation between content and presentation Ability to deploy rapidly alternative design, for Christmas for example In my HTML: what I want to say In my CSS: how I want to render it Avoid presentation related classes in HTML Eg: bold, small, rounded,... To keep in mind

18. Any questions ? Questions ? CSS – Chained classes