IPW 3rd Course - CSS

  • 2,305 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,305
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
73
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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