Published on

Published in: Technology, Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. CSS- Cascading Stylesheets Layout for web and XML
  2. 2. Cascading Stylesheets <ul><li>A language to define how XML documents, html documents and XHTML documents should be rendered for screen, paper, TV, sound … </li></ul><ul><li>Reommendation from W3C </li></ul><ul><li>Not in itself XML-based, but operates on XML structures </li></ul>
  3. 3. CSS - Historical perspektive <ul><li>html was built to structure text documetns with links, regardless of presentation medium. </li></ul><ul><li>The commercial success of the web drove a need to make more estetically pleasing content. </li></ul><ul><li>Logical elements (like <h3>) was used to get a certain graphical effect, instead of using it to indicate a logical content. New elements added without control. </li></ul><ul><li>Solution: Make an entirely new language for laout: CSS </li></ul>
  4. 4. Examples <ul><li>Now </li></ul><ul><li>File b.css </li></ul><ul><li>p { </li></ul><ul><li>font-family: Helvetica, sans-serif; </li></ul><ul><li>} </li></ul><ul><li>File b.html </li></ul><ul><li><?xml-stylesheet type=&quot;text/css&quot; href=&quot;b.css&quot;?> </li></ul><ul><li>[…] </li></ul><ul><li><p> </li></ul><ul><li>Text in helvetica </li></ul><ul><li></p> </li></ul><ul><li>[…] </li></ul>Before File a.html […] <p> <font face=&quot;Helvetica&quot;> Text in Helvetica </font> </p> […]
  5. 5. Internal or external CSS <ul><li>A CSS can either be placed in the actual xml/html document, or as an external filef. </li></ul><ul><li>An internal CSS has the advantage that only one http request is required </li></ul><ul><li>However, the drawback is that copies of the CSS code must be placed in all documents using it, making updates more difficult. </li></ul>
  6. 6. Associating an XML-document ->CSS <ul><li>type: MIME-typen text/css </li></ul><ul><li>href: URI to the css-file </li></ul><ul><li>charset: Character set </li></ul><ul><li>title: Title </li></ul><ul><li>media: The media for which the stylesheet should be used.An XML document can have several associated stylesheets. Which one(s) is used depends on the output medium: Screen, tty, tv, projection, handheld, print, braille, aural or all </li></ul><ul><li>To associate an XML document with a CSS, a processing instruction can be used. </li></ul><ul><li>Processin instruction in an XML-fil </li></ul><ul><li><?xml-stylesheet </li></ul><ul><li>type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;b.css&quot; </li></ul><ul><li>charset=&quot;ISO8859-1&quot; </li></ul><ul><li>title=”My Stylesheet&quot; </li></ul><ul><li>media=&quot;screen&quot;?> </li></ul>
  7. 7. Associating an HTML-document ->CSS <ul><li>An internal CSS can be added using the style-element in the element head. </li></ul><ul><li>internal CSS in an HTML.-fil </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>body { background-color: #ffffff; }</style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>… </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>To associate an html document with a CSS, you usually ad a link-element in the head-element. </li></ul><ul><li>External CSS + HTML-file </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><link rel=&quot;stylesheet” </li></ul><ul><li>type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;test.css”/> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>… </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  8. 8. Basic principle: Pattern -> Behaviour <ul><li>The basic principle is to find different ”patterns” in the XML/html using ”selectors”, and then setting some property to some value. </li></ul><ul><li>A pattern can, for example, be a tag name. </li></ul><ul><li>A property can be a font-size. </li></ul><ul><li>Example: </li></ul><ul><li>p { </li></ul><ul><li>font-family: Helvetica, sans-serif; </li></ul><ul><li>} </li></ul>Selector: All p-elements Property Property value
  9. 9. Different selectors <ul><li>There are a number of selectors that can be used to find different parts of an XML/html structure. </li></ul><ul><li>For example, you can find decendents, children, siblings and attributes. </li></ul><ul><li>Example: </li></ul><ul><li>* { </li></ul><ul><li>font-size: Medium </li></ul><ul><li>} </li></ul><ul><li>p a { </li></ul><ul><li>font-size: Medium </li></ul><ul><li>} </li></ul>Matches all elements matches all a-elements which are decendents to p-elements
  10. 10. Different selectors <ul><li>Example: </li></ul><ul><li>p > a { </li></ul><ul><li>font-size: Medium </li></ul><ul><li>} </li></ul><ul><li>p + a { </li></ul><ul><li>font-size: Medium </li></ul><ul><li>} </li></ul>Matches a-elements which are children to p-elements. Matches all a-elements which directly follows a p-elements (siblings) Example: <p> <a></a> </p> <p> <strong> <a>Hej</a> </strong> </p> Matches Matches inte
  11. 11. Matching attributes <ul><li>Example: </li></ul><ul><li>a-element wit href=&quot;a.html&quot; </li></ul><ul><li>a[href=&quot;a.html&quot;] {font-size: Medium} </li></ul><ul><li>a-element which has a href-attribut </li></ul><ul><li>a[href] {font-size: Medium} </li></ul><ul><li>a-element whose href contains the substring &quot;html&quot; </li></ul><ul><li>a[href~=&quot;html&quot;] {font-size: Medium} </li></ul><ul><li>Examples of attribute matches </li></ul><ul><ul><li>if the attribute has a value </li></ul></ul><ul><ul><li>Substrings of attribute values </li></ul></ul><ul><ul><li>ID-values </li></ul></ul>
  12. 12. Pseudo classes and pseudo elements <ul><li>Example: </li></ul><ul><li>First child to a p-element </li></ul><ul><li>p:first-child {font-size: Medium} </li></ul><ul><li>First letter in a banana-element </li></ul><ul><li>banana:first-letter {font-size: Medium} </li></ul><ul><li>Before (or after) a banan-element </li></ul><ul><li>banana:before {content: ”A Banana!&quot;} </li></ul><ul><li>Pseudo classes and pseudo elements matches different types of meta information in the document. </li></ul><ul><li>Separated from elements/attributeses with a colon. </li></ul>
  13. 13. <ul><li>There are a number of properties to set height, lenght and sizes. </li></ul><ul><ul><li>border-width, font-size, line-height, margin-left, margin-top, margin-right, margin-bottom, left, top, height, width </li></ul></ul><ul><li>Most units used in typography can be used. </li></ul><ul><ul><li>Absolute, t.ex. cm, in, pt </li></ul></ul><ul><ul><li>Relative.ex. em, ex, px </li></ul></ul><ul><li>Example </li></ul><ul><li>banana {line-height: 2.2em} </li></ul><ul><li>tomato {font-size:14pt;line-height:3ex} </li></ul>Properties: Height/length/size Obs! Två properties till samma selektor, separerat med semikolon
  14. 14. Properties:Fonter <ul><li>A number of properties for font handling. </li></ul><ul><ul><li>font-family: i.e. Helvetica, sans-serif </li></ul></ul><ul><ul><li>font-style: i.e. italic, slanted </li></ul></ul><ul><ul><li>font-size: absolute values like 12pt or relative values like x-small </li></ul></ul><ul><ul><li>font-weight: bold, bolder, lighter or a scale of 100 - 900 </li></ul></ul><ul><ul><li>font-stretch:wider, ultra-expanded, semi-condensed and so forth. </li></ul></ul><ul><ul><li>… and several other properties </li></ul></ul>
  15. 15. Properties:Texts <ul><li>Text-properties deals with indent, alignment and simple transformations. </li></ul><ul><ul><li>Display: block, inline or none. Blocks start on a new-line and is followed by a new-line, inline does not disrupt the text flow, and ”none” hides the content. </li></ul></ul><ul><ul><li>text-indent: applicable only on elements with block-display. </li></ul></ul><ul><ul><li>text-align: left, right, center, justify </li></ul></ul><ul><ul><li>text-decoration: underline, overline, linethrough </li></ul></ul><ul><ul><li>text-transform: capitalize, uppercase, lowercase </li></ul></ul><ul><ul><li>white-space: pre to preserve linebreaks and whitespace. </li></ul></ul>
  16. 16. Properties:Colours <ul><li>The most important properties or colours are </li></ul><ul><ul><li>Color (note: american spelling) </li></ul></ul><ul><ul><li>Background-color </li></ul></ul><ul><ul><li>Border-color </li></ul></ul><ul><li>Pre-defined colours </li></ul><ul><ul><li>Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow </li></ul></ul><ul><li>Or hexadecimala colours representations </li></ul><ul><ul><li>p {color: # FF FF CC } </li></ul></ul><ul><li>or </li></ul><ul><ul><li>p {color:rgb( 100%, 100%, 70%} </li></ul></ul>
  17. 17. Advanced 1: Counters <ul><li>It is also possible to use ”variables” as counter, and insert the value of the counters in what is displayed. </li></ul><ul><li>p:before { </li></ul><ul><li>content: counter(banana) &quot;. &quot;; </li></ul><ul><li>counter-increment: banana </li></ul><ul><li>} </li></ul><ul><li>h1 { </li></ul><ul><li>counter-reset: banana </li></ul><ul><li>} </li></ul>
  18. 18. Advanced 2: Classes <ul><li>If you want to set different properties just to some elements of a certain kind, you can use ”classes”. </li></ul><ul><li>p.tomato { </li></ul><ul><li>font-size:14pt </li></ul><ul><li>} </li></ul><ul><li>… </li></ul><ul><li><p class=&quot;tomato&quot;> </li></ul><ul><li>Hello </li></ul><ul><li></p> </li></ul>
  19. 19. Advanced 3: Pseudoclasses for links <ul><li>It is common to want different colours on links, depending on whether they have been visited or not. </li></ul><ul><li>a:link {color: #FF0000} /* unvisited link */ </li></ul><ul><li>a:visited {color: #00FF00} /* visited link */ </li></ul><ul><li>a:hover {color: #FF00FF} /* mouse over link */ </li></ul><ul><li>a:active {color: #0000FF} /* selected link */ </li></ul>
  20. 20. Advanced 4: media types <ul><li>A way to define different properties for diferent media types, i.e. print, screen and aural. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot; media=&quot;screen&quot;> </li></ul><ul><li>@import &quot;/css/initial.css&quot;; </li></ul><ul><li>@import &quot;/css/screen.css&quot;; </li></ul><ul><li></style> </li></ul><ul><li><style type=&quot;text/css&quot; media=&quot;print&quot;> </li></ul><ul><li>@import &quot;/css/initial.css&quot;; </li></ul><ul><li>@import &quot;/css/print.css&quot;; </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p class=&quot;test&quot;>Hello</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  21. 21. Advanced 5: the print media type <ul><li>A few properties exist only for the media type &quot;print&quot;. The most important are: </li></ul><ul><ul><li>page-break-after </li></ul></ul><ul><ul><li>page-break-before </li></ul></ul><ul><li>For more info, see http://www.w3schools.com/css/css_ref_print.asp </li></ul>
  22. 22. Advanced 6: mediatypen aural <ul><li>An interesting possibility is to control the audio from a voice synthesizer. An example could be: </li></ul><ul><li>h1, h2, h3, h4 </li></ul><ul><li>{ </li></ul><ul><li>voice-family: male; </li></ul><ul><li>richness: 80; </li></ul><ul><li>cue-before: url(&quot;beep.au&quot;) </li></ul><ul><li>} </li></ul><ul><li>For more info, see http://www.w3schools.com/css/css_ref_aural.asp </li></ul>
  23. 23. Browsersupport <ul><li>Today good support in all(most) modern browsers. </li></ul><ul><li>Opera probably best support </li></ul><ul><li>However: Don’t count on mobile phones to support CSS. </li></ul>
  24. 24. Limitations and possibilities <ul><li>I CSS1: Only support for html-tags </li></ul><ul><li>I CSS2: Supports all XML documents, making it easier to separate content from presentation. </li></ul><ul><li>I CSS3: Support for columns, pagination, more powerful selectors and for non-european character sets. </li></ul><ul><li>A problem is that it is not possible to change the orders of elements, or to re-use an element several times. </li></ul>