Casc Style Sheets Ii

818 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
818
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Casc Style Sheets Ii

  1. 1. Cascading Style Sheets
  2. 2. Introduction <ul><li>CSS types </li></ul><ul><li>Pseudo classes and pseudo elements </li></ul><ul><li>Other considerations </li></ul><ul><li>Worked example </li></ul>
  3. 3. Reminder: <ul><li>Inline </li></ul><ul><ul><li>Affects individual HTML tag </li></ul></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li><p style= “font-family: Arial, sans- serif; ”> some text </p> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  4. 4. Reminder: <ul><li>Embedded </li></ul><ul><ul><li>Affects individual document </li></ul></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> ... <style type =“text/css”> p {font-family: Arial, sans-serif;} </style> </head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li><p>some text</p> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  5. 5. Reminder: <ul><li>Separate text file (.css) </li></ul><ul><ul><li>e.g. styles.css </li></ul></ul><ul><ul><li>p { </li></ul></ul><ul><ul><li>font-family: Arial, Sans-serif; </li></ul></ul><ul><ul><li>} </li></ul></ul><html> <head> ... <link href= “styles.css” rel=“stylesheet” type=“text/css” /> </head> <body> ... <p>some text</p> </body> </html>
  6. 6. Reminder: <ul><li>Imported </li></ul>Into HTML file <head> ... <style type= “text/css”> @import url( “styles.css”); </style> </head> Into another style sheet - @import instruction must be first line of file! @import url( “styles.css”); /*other stylesheet starts here*/ h1 { font-size: 200%; color: #6b84b5 }
  7. 7. Order of Precedence <ul><li>HTML formatting instructions (e.g. <font> tags) </li></ul><ul><li>Inline styles </li></ul><ul><li>Embedded styles </li></ul><ul><li>Linked styles </li></ul><ul><li>Imported styles </li></ul><ul><li>Default browser styles </li></ul>
  8. 8. Types of CSS styles <ul><li>Styles assigned to a HTML element </li></ul><ul><li>Class selector styles </li></ul><ul><ul><li>Define different styles for one or more HTML elements </li></ul></ul><ul><ul><li>Assigned to the class attribute within an HTML element </li></ul></ul><ul><li>ID selector styles </li></ul><ul><ul><li>Define different styles for one and the same HTML element </li></ul></ul><ul><ul><li>Assigned to the ID attribute within an HTML element </li></ul></ul>
  9. 9. Class Selector Styles <ul><li>CSS: </li></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>.blue {color: #082984} </li></ul></ul><ul><ul><li>.red {color: #de2131} </li></ul></ul><ul><ul><li>.green {color:green} </li></ul></ul><ul><li>HTML: </li></ul><ul><ul><li>… </li></ul></ul><ul><ul><li><h1 class=&quot;red&quot;>Headline</h1> </li></ul></ul><ul><ul><li><p class=&quot;green&quot;>a summary</p> </li></ul></ul><ul><ul><li><p class=&quot;blue&quot;>some text</p> </li></ul></ul><ul><ul><li>… </li></ul></ul>
  10. 10. ID Selector styles <ul><li>CSS </li></ul><ul><li>… </li></ul><ul><li>#red_heading {color: red} </li></ul><ul><li>#summary {color: red} </li></ul><ul><li>#conclusion {color: blue} </li></ul><ul><li>HTML </li></ul><ul><li>… </li></ul><ul><li><h1 id=“red_heading”> Headline </h1> </li></ul><ul><li><p id=“summary”> Summary </p> </li></ul><ul><li><p id=“conclusion”> Conclusion </p> </li></ul><ul><li>… </li></ul>
  11. 11. What is the Difference between class & id ? <ul><li>The difference between an ID and a class is that an ID (#) can be used to identify one element, whereas a class (.red) can be used to identify more than one. </li></ul><ul><li>If you have a style that you want to apply several times throughout the document, you need to use a Class. However, it if only want to apply the style once (for instance, to position a particular element, such as a banner) you should use the ID. </li></ul>
  12. 12. Using Pseudoclasses <ul><li>Pseudoclasses are identifiers that are understood by user agents and apply to elements of certain types without the elements having to be explicitly styled </li></ul><ul><li>They are tracked by other means than the actual class attribute </li></ul><ul><li>Example : A handful of pseudoclasses can be used with anchor elements <a> </li></ul>
  13. 13. Using Pseudoclasses Pseudoclass Match :link :visited :active :hover :focus Unvisited links Visited links Active links The link that the browser pointer is hovering over The link that currently has the user interface focus
  14. 14. Pseudoclasses example <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>a:link {color: green } </li></ul><ul><li>a:visited {color: red } </li></ul><ul><li>a:hover {color: black } </li></ul><ul><li>a:active {color: blue } </li></ul><ul><li></style> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><a href=“http://www.dit.ie&quot;>click here for DIT</a> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  15. 15. Cascading - Order of Precedence <ul><li>HTML formatting instructions (e.g. <font> tags) </li></ul><ul><li>Inline styles </li></ul><ul><li>Embedded styles </li></ul><ul><li>Linked styles </li></ul><ul><li>Imported styles </li></ul><ul><li>Default browser styles </li></ul>

×