1 / 18

CSS

CSS. Chained classes. Julien BRAURE – julien@jazar.co.uk. CSS – Chained classes. What is CSS ? Quick overview Chained classes Examples Conclusion Questions and maybe answers. CSS – Chained classes. What is CSS ?. CSS : Cascading Style Sheet Separate Content and Presentation

laksha
Télécharger la présentation

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. CSS Chained classes Julien BRAURE – julien@jazar.co.uk

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

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

  4. Quick overview HTML <markup class=“class1” id=“this-one” /> 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 (#) CSS – Chained classes

  5. Chained classes (HTML side) • In HTML the class attribute, may have multiple classes, space separated • <p class=“class1 class2 ... classN”> HTML <p class=“class1”> Loremipsumdolor sit amet. </p> <p class=“class2”> Loremipsumdolor sit amet. </p> <p class=“class1 class2”> Loremipsumdolor sit amet. </p> CSS p.class1{ color: red; } p.class2{ font-weight: bold; } CSS declarations are merging ... This paragraph is red AND bold CSS – Chained classes

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

  7. Chained classes (CSS side) • In HTML the class attribute, may have multiple classes, space separated • <p class=“class1 class2 ... classN”> HTML <p class=“class1”> Loremipsumdolor sit amet. </p> <p class=“class2”> Loremipsumdolor sit amet. </p> <p class=“class1 class2”> Loremipsumdolor sit amet. </p> CSS p.class1{ color: red; } p.class2{ font-weight: bold; } p.class1.class2{ text-decoration: underline; color: green; } overwrites CSS – Chained classes

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

  9. Chained classes - Example HTML CSS <p class=“message success”> Great ! It has been done. </p> <p class=“message error”> Bad luck ! Some error happens. </p> <p class=“message info”> Some important information. </p> 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); } Common declarations CSS – Chained classes

  10. 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 CSS – Chained classes

  11. Chained classes – Example 2 - Site wide organisation • Basic layout: <div id=“header”> </div> <div class=“page”> <h1>title of the page</h1> <p>some content</p> <p>some content</p> <p>some content</p> </div> <div id=“footer”> </div> CSS – Chained classes

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

  13. Chained classes – Example 2 - Site wide organisation • Sample sitemap .page .static .dynamic .faq .car <div class=“page dynamic house” id=“step2”> </div> #q1 #q2 #step2 #step1 #step1 #step2 ... .legal #tos .house #contact CSS – Chained classes

  14. Chained classes – Example 2 - Site wide organisation • Sample sitemap .page .static .dynamic .faq .car #q1 #q2 #step1 #step2 #step1 #step2 ... .legal #tos .house <div class=“page static legal” id=“tos”> </div> #contact CSS – Chained classes

  15. Chained classes – Example 2 - Site wide organisation CSS .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; } Common declarations CSS – Chained classes

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

  17. Conclusion • 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 CSS – Chained classes

  18. Questions ? Any questions ? CSS – Chained classes

More Related