Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

IPW 3rd Course - CSS


Published on

Published in: Technology
  • Be the first to comment

IPW 3rd Course - CSS

  1. 1. Cascading Style Sheets
  2. 2. Plan of the course <ul><li>What is CSS </li></ul><ul><li>CSS levels </li></ul><ul><li>Including CSS in HTML files </li></ul><ul><li>CSS syntax </li></ul><ul><li>Colours in HTML </li></ul><ul><li>Examples </li></ul>
  3. 3. CSS <ul><li>CSS = Cascading Style-Sheets </li></ul><ul><li>Style = how the HTML tags are displayed </li></ul><ul><li>Style-sheets = documents where the style information is stored – usually external documents </li></ul><ul><li>Cascading = there are multiple levels on which we can define the style of a page </li></ul>
  4. 4. CSS usage <ul><li>The style information can be attached in the HTML page to each element </li></ul><ul><li>=> problems in maintaining the page </li></ul><ul><li>=> problems in large sites containing many pages </li></ul><ul><li>Much easier if the style for all the elements is stored separately – modifications made in 1 place are spread to all the pages automatically </li></ul>
  5. 5. CSS levels <ul><li>Style information can be defined at multiple levels </li></ul><ul><li>Browser level – the default style of the browser </li></ul><ul><ul><li>The way the page is displayed if no style information is present </li></ul></ul>
  6. 6. CSS Browser level example Default browser style; no style specified in html After we modified the default browser style
  7. 7. CSS levels <ul><li>External document level – the style is specified in an external .css file. </li></ul><ul><li>The file is included in the html document by using the link element </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“style.css&quot; /> </li></ul>
  8. 8. CSS External Document Level <ul><li>h1 { color: blue;} </li></ul>
  9. 9. CSS levels <ul><li>Internal style sheet (inside the <head> tag) </li></ul><ul><ul><li>Define the style-sheet inside the html page </li></ul></ul><ul><ul><li>Style specified inside a style element </li></ul></ul><ul><li>Example: </li></ul><ul><li><style type=&quot;text/css&quot;> h1 {color: yellow} </style> </li></ul>
  10. 10. CSS Internal Style Sheet Level <ul><li><head> </li></ul><ul><li><title>le titre du document</title> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /> </li></ul><ul><li><style type=&quot;text/css&quot;> h1 {color: yellow} </style> </li></ul><ul><li></head> </li></ul>
  11. 11. CSS Levels <ul><li>Element level – the style is specified inside the element </li></ul><ul><ul><li>NOT RECOMMENDED!!! </li></ul></ul><ul><li>Example </li></ul><ul><li><h1 style=&quot;color: black;&quot; > Introduction dans la programmation web</h1> </li></ul>
  12. 12. CSS Element Style Level <ul><li><h1 style=&quot;color: black;&quot; > Introduction dans la programmation web</h1> </li></ul>
  13. 13. CSS Levels - Conclusion <ul><li>Browser level </li></ul><ul><ul><li>Not reliable (dependant on browser) </li></ul></ul><ul><li>External document level </li></ul><ul><ul><li>The one we’ll be using </li></ul></ul><ul><li>Internal style sheet (inside the head tag) </li></ul><ul><ul><li>Should not be used </li></ul></ul><ul><li>Element style level </li></ul><ul><ul><li>Should NEVER be used </li></ul></ul>Priority increases
  14. 14. CSS Syntax <ul><li>Syntax contains triples: </li></ul><ul><ul><li>Selector – on what element(s) we’re applying the style </li></ul></ul><ul><ul><li>Property – which is the property that we change </li></ul></ul><ul><ul><li>Value – the modified value </li></ul></ul>h1 { color : yellow; }
  15. 15. CSS syntax – selector types <ul><li>A selector can be </li></ul><ul><ul><li>the name of an html element (h1) </li></ul></ul><ul><ul><ul><li>The style defined applies for all elements of that type </li></ul></ul></ul><ul><ul><li>The name of an element “.”the name of the style class </li></ul></ul><ul><ul><ul><li>{color:blue;} </li></ul></ul></ul><ul><ul><ul><li>The class is used inside the html element as an attribute </li></ul></ul></ul><ul><ul><ul><ul><li><h1 class=“blue”> </li></ul></ul></ul></ul><ul><ul><li>The id of an element </li></ul></ul><ul><ul><ul><li>#id5 {color:blue;} </li></ul></ul></ul><ul><ul><ul><li>In the html the element must have the id defined </li></ul></ul></ul><ul><ul><ul><ul><li><h1 id=“id5”> </li></ul></ul></ul></ul>
  16. 16. Colours in html/css <ul><li>Colours are identified through </li></ul><ul><ul><li>Names (blue, red, green,…) </li></ul></ul><ul><ul><ul><li>This is possible for a very small number of colours </li></ul></ul></ul><ul><ul><li>Values </li></ul></ul><ul><ul><ul><li>A colour is represented as a triplet of RGB values </li></ul></ul></ul><ul><ul><ul><li>Each value in the triplet can take a value between 0-255 (FF in hexa) </li></ul></ul></ul><ul><ul><ul><li>The total number of colours that can be expressed like this is around 16 million </li></ul></ul></ul><ul><ul><ul><li>A colour value is formed like #RRGGBB where RR=the hexa value for red, GG=hexa value for green… </li></ul></ul></ul>
  17. 17. Colours in html examples <ul><li>Black #000000 </li></ul><ul><li>White #FFFFFF </li></ul><ul><li>Red #FF0000 </li></ul><ul><li>Green #00FF00 </li></ul><ul><li>Blue #0000FF </li></ul><ul><li>Yellow # FFFF00 </li></ul>
  18. 18. CSS Examples <ul><li>body { background-image: url('bgdesert.jpg') } </li></ul><ul><li>body { background-color: #FFFF00; } </li></ul>
  19. 19. Text properties
  20. 20. list properties
  21. 21. padding properties margin properties
  22. 22. CSS Tables Example <ul><li>table, td, th </li></ul><ul><li>{ </li></ul><ul><li>border:1px solid green; </li></ul><ul><li>//border-collapse:collapse; </li></ul><ul><li>} </li></ul><ul><li>th </li></ul><ul><li>{ </li></ul><ul><li>background-color:green; </li></ul><ul><li>color:white; </li></ul><ul><li>} </li></ul>Without border-collapse With border-collapse
  23. 23. CSS HowTO <ul><li>There are a lot of CSS values and attributes to set the style </li></ul><ul><li>Difficult to know them all </li></ul><ul><li>Need to use a internet reference like </li></ul><ul><ul><li> </li></ul></ul><ul><li>Need to understand the mechanisms of CSS </li></ul><ul><li>Use the reference to discover more hidden html design features! </li></ul>
  24. 24. Conclusions <ul><li>CSS = the way to modify the style of a html page </li></ul><ul><li>4 levels of priority - use as much as possible external stylesheets </li></ul><ul><li>Remember that style and semantics are different things for an HTML page </li></ul>