Cascading Style Sheets


Published on

Published in: Entertainment & Humor
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Cascading Style Sheets

  1. 1. By: Jerome Locson ADZU SCITECH MONTH | SIMO ‘08 Advance Computer Laboratory, ADZU September 26, 2008
  2. 2. <ul><li>Recap: HTML Basics     </li></ul><ul><li>In-depth CSS Lecture & Hands-on </li></ul><ul><li>Tweaking Friendster Layout Demonstration </li></ul><ul><li>Customizing Multiply Layout Demonstration    </li></ul><ul><li>Create you own BlogSpot & Plurk Theme </li></ul>
  3. 3. <ul><li>HTML stands for H yper T ext M arkup L anguage </li></ul><ul><li>Created by Tim Berners-Lee, founder of World Wide Web Consortium (W3C) </li></ul><ul><li>A structured set of tags used to create webpage, displayed in a web browser </li></ul><ul><li>Natively, with .html or .htm filename extension </li></ul><ul><li>Internet Media Type: text/html </li></ul>
  4. 4. <ul><li>With the basic structure: </li></ul><ul><li><html> <head> </li></ul><ul><li><title></title> </li></ul><ul><li>… . </li></ul><ul><li></head> </li></ul><ul><li><body>….</body> </li></ul><ul><li></html> </li></ul>
  5. 5. <ul><li>Opening Tags </li></ul><ul><ul><li><html>,<body>,<title>,<h1>,<p>, etc… </li></ul></ul><ul><li>Closing Tags </li></ul><ul><ul><li></html>,</body>,</title>,</h1>,</p>, etc… </li></ul></ul><ul><li>All tags must be closed , usually in the format of opening tag -> content -> closing tag </li></ul><ul><li>The line break tag does not require a closing tag but can be closed by <br />; <br> is acceptable </li></ul><ul><ul><li>HTML tags are not case sensitive; <HEAD> is the same as <head> </li></ul></ul>
  6. 6. <ul><li>Tag Attributes </li></ul><ul><ul><li>Format: <tag attribute=&quot;value&quot;>content</tag> </li></ul></ul><ul><ul><li>(can have many attribute declaration) </li></ul></ul><ul><li>Elements </li></ul><ul><ul><li>Tags will be of no meaning without contents </li></ul></ul><ul><ul><li>Syntactically HTML elements are constructed with: </li></ul></ul><ul><ul><ul><li>a start tag marking the beginning of an element </li></ul></ul></ul><ul><ul><ul><li>any number of attributes (and their associated values) </li></ul></ul></ul><ul><ul><ul><li>some amount of content (characters and other elements) </li></ul></ul></ul><ul><ul><ul><li>an end tag </li></ul></ul></ul>
  7. 7. <ul><li>Fig 1. HTML element representation of the paragraph (<p>) tag </li></ul><ul><li>[Image source: ] </li></ul>
  8. 8. <ul><li>Common HTML Tags </li></ul>Tags Description Example <a> </a> Anchor and/or Link <a href=“index.htm”>Home </a> <b> </b> Content is shown as bold type <b>Name</b> <blockquote> </blockquote> Content is shown as an indented block; should be used only for long quotations <blockquote> <p>This is a demo. </p> </blockquote> <body> </body> The body part of the HTML document. <body> <h1>Heading</h1> <p>This is a demo.</p> </body>
  9. 9. <ul><li>Common HTML Tags (cont.) </li></ul>Tags Description Example <br> or <br/> Line break <p>Some content<br>here.</p> <center> </center> Content is centered <center>Some Text Here</center> <div> </div> Container element <div> <p>A Paragraph</p> <img src=“logo.jpg”> </div> <font> </font> Define characteristics of font, according to attributes e.g. SIZE, COLOR, FACE <font face=‘Arial’>Text</font>
  10. 10. <ul><li>Common HTML Tags (cont.) </li></ul>Tags Description Example <head> </head> Head part of the HTML document. <head><title>My Webpage</title></head> <h1> </h1> <h2> </h2> ... <h6> </h6> Headings (1-6) <h1>Some text here</h1> <h2>Some text here</h2> … <h6>Some text here</h6> <hr> Horizontal line across the page <hr> <i> </i> Italics <i>Important!</i>
  11. 11. <ul><li>Common HTML Tags (cont.) </li></ul>Tags Description Example <img> Displays image. Attributes: src and alt <img src=“logo.jpg” alt=“Company Logo”> <li> </li> List item. Used within an ordered (<ol>) or unordered (<ul>) list <li>Item 1</li> <li>Item 2</li> <ol> </ol> Ordered list <ol> <li>Item 1</li> <li>Item 2</li> </ol> <ul> </ul> Unordered List <ul> <li>Item 1</li> <li>Item 2</li> </ul>
  12. 12. <ul><li>Common HTML Tags (cont.) </li></ul>Tags Description Example <span> </span> A container element <span><p>A Paragraph</p> </span> <strong> </strong> Text emphasis, appears bold <strong>Name:</strong> <sub> </sub> Subscript <sub>2</sub> <sup> </sup> Superscript <sup>3</sup>
  13. 13. <ul><li>Common HTML Tags (cont.) </li></ul>Tags Description Example <table> </table> Table <table><tr> <td>Sample Data</td> </tr></table> <tr> </tr> Table row <tr> <td>Sample Data</td> </tr> <th> </th> Table Header Cell <tr> <th>Heading</th> <td>Sample Data</td> </tr> <td> </td> Table Data Cell <td>Sample Data 1</td> <td>Sample Data 1</td>
  14. 14. <ul><li>Common HTML Tags (cont.) </li></ul>Tags Description Example <title> </title> Page Title <title>My First Webpage</title> <u> </u> Underline Text <u>Important</u> <p></p> Paragraph <p>A quick brown fox.</p> <form> </form> Creates Form <form action=“display.php” method=“get”> … . </form>
  15. 15. <ul><li>Common HTML Tags (cont.) </li></ul>Tags Description Example <select > </select> Selection List <select name=&quot;sex”> <option value=&quot;male&quot;>Male</option> <option value=&quot;female&quot;>Female</option> </select> <option> Items in Selection List <option value=&quot;male&quot;>Male</option> <option value=&quot;female&quot;>Female</option> <input> Types: Checkbox, Radio, Button, Submit, Image, Reset, Text, Password, File, hidden <input type=&quot;text&quot; name=&quot;name&quot; value=&quot;Your name&quot; /> <label> </label> Label for a form input <label>Address</label> <textarea> </textarea> Multiple-line text area <textarea rows=&quot;10&quot; cols=&quot;20&quot; name=&quot;comments&quot;>Your comments</textarea>
  16. 16. <ul><li>CSS stands for Cascading Style Sheets </li></ul><ul><li>Also developed by W3C </li></ul><ul><li>With a .css file extension </li></ul><ul><li>Internet Media Type: text/css </li></ul><ul><li>Mainly used to describe the presentation of HTML (markup languages) </li></ul><ul><li>Also, helps in separating the design from content of a webpage </li></ul><ul><li>Format: property: value </li></ul>
  17. 17. <ul><li>Variations: </li></ul><ul><li>CSS 1 </li></ul><ul><ul><li>font, color, text attributes, alignment, border, padding, positioning </li></ul></ul><ul><li>CSS 2 </li></ul><ul><ul><li>Superset of CSS 1, also support relative, absolute and fixed positioning of elements </li></ul></ul><ul><li>CSS 3 </li></ul><ul><ul><li>Currently under development </li></ul></ul>
  18. 18. <ul><li>3 Ways to apply: </li></ul><ul><li>In-line </li></ul><ul><ul><li>Declared inside the HTML tag style attribute </li></ul></ul><ul><ul><li>Tag specific declaration </li></ul></ul><ul><ul><li>Ex. </li></ul></ul><ul><ul><ul><li><p style=&quot;color: red; font-family: arial; border: 1px solid blue; padding: 5px; background-color: #cccccc;&quot; > </li></ul></ul></ul><ul><ul><ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nunc nisl, mollis pharetra, rhoncus ut, pulvinar ut, elit. Phasellus ut nunc a nunc lacinia congue. Pellentesque elit pede, congue quis, viverra vel, sagittis ut, nisi. Donec fringilla euismod nibh. In hendrerit consequat dui. </li></ul></ul></ul><ul><ul><ul><li></p> </li></ul></ul></ul>
  19. 19. <ul><li>3 Ways to apply (cont): </li></ul><ul><li>Internal </li></ul><ul><ul><li>Usually embedded inside the <head> tag using the <style> tag, but can also be declared inside the <body> tag </li></ul></ul><ul><ul><li>Applies only to the current page </li></ul></ul><ul><ul><li>Ex. </li></ul></ul><ul><ul><li><head> <title>My First Homepage</title> </li></ul></ul><ul><ul><li><style type=&quot;text/css&quot;> </li></ul></ul><ul><ul><li>p { color: red; font-family: arial; border: 1px solid blue; padding: 5px; background-color: #cccccc; } </li></ul></ul><ul><ul><li></style> </li></ul></ul><ul><ul><li></head> </li></ul></ul>
  20. 20. <ul><li>3 Ways to apply (cont): </li></ul><ul><li>External </li></ul><ul><ul><li>Separating HTML from CSS files </li></ul></ul><ul><ul><li>Uses <link /> tag </li></ul></ul><ul><ul><li>Ex. (style.css) </li></ul></ul><ul><ul><li>p { color: red; font-family: arial; border: 1px solid blue; padding: 5px; background-color: #cccccc; } </li></ul></ul><ul><ul><li>TO EMBED: </li></ul></ul><ul><ul><li><head> <title>My First Homepage</title> </li></ul></ul><ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“style.css&quot; /> </li></ul></ul><ul><ul><li></head> </li></ul></ul>
  21. 21. Output: <ul><ul><li>p { color: red; font-family: arial; border: 1px solid blue; padding: 5px; background-color: #cccccc; } </li></ul></ul>
  22. 22. <ul><li>Given name to styles in Internal or External style sheets. </li></ul><ul><li>3 Selectors </li></ul><ul><ul><li>HTML Selectors </li></ul></ul><ul><ul><ul><li>body, p, h1, font, etc. </li></ul></ul></ul><ul><ul><li>Class Selectors </li></ul></ul><ul><ul><ul><li>.layer1 , .textTitle </li></ul></ul></ul><ul><ul><li>ID Selectors </li></ul></ul><ul><ul><ul><li>#layer1 , #textTitle </li></ul></ul></ul>
  23. 23. <ul><li>Enclosed in a pair of curly brackets, { } </li></ul><ul><li>Has properties </li></ul><ul><ul><li>propertyName: values </li></ul></ul><ul><li>Ex. </li></ul><ul><li>body { </li></ul><ul><li>font-size: 12px; color: #000000; </li></ul><ul><li>} </li></ul>
  24. 24. <ul><li>Lengths and Percentage Units </li></ul><ul><ul><li>em (calculated size of a font) </li></ul></ul><ul><ul><li>px (pixels) </li></ul></ul><ul><ul><li>pt (points) </li></ul></ul><ul><ul><li>% (percentage) </li></ul></ul><ul><ul><li>pc (picas) </li></ul></ul><ul><ul><li>cm (centimeters) </li></ul></ul><ul><ul><li>mm (millimiters) </li></ul></ul><ul><ul><li>inches (in) </li></ul></ul>
  25. 25. <ul><li>Colors </li></ul><ul><ul><li>With 16,777,216 colors </li></ul></ul><ul><ul><li>Could be the name, RGB, Hexadecimal value </li></ul></ul><ul><ul><li>Ex. red, rgb(255,0,0), #ff0000 </li></ul></ul><ul><ul><li>transparent is a valid color value </li></ul></ul><ul><li>Text </li></ul><ul><ul><li>font-family </li></ul></ul><ul><ul><li>font-size </li></ul></ul><ul><ul><li>font-weight </li></ul></ul><ul><ul><li>font-decoration </li></ul></ul><ul><ul><li>font-style </li></ul></ul><ul><ul><li>text-transform </li></ul></ul>
  26. 26. <ul><li>Margin and Padding </li></ul><ul><ul><li>margin is the space outside of the element </li></ul></ul><ul><ul><li>padding is the space inside the element. </li></ul></ul><ul><ul><li>margin-top, margin-right, </li></ul></ul><ul><ul><li>margin-bottom, margin-left, </li></ul></ul><ul><ul><li>padding-top, padding-right, </li></ul></ul><ul><ul><li>padding-bottom,padding-left, </li></ul></ul><ul><ul><li>margin, padding </li></ul></ul>
  27. 27. <ul><li>Border </li></ul><ul><ul><li>border-style (solid, dotted, dashed, double, groove, ridge, inset and outset.) </li></ul></ul><ul><ul><li>border-width </li></ul></ul><ul><ul><li>border-color </li></ul></ul>
  28. 28. <ul><li>Background Images </li></ul><ul><ul><li>background-color </li></ul></ul><ul><ul><li>background-image </li></ul></ul><ul><ul><li>background-repeat </li></ul></ul><ul><ul><ul><li>repeat, repeat-y, repeat-x, no-repeat </li></ul></ul></ul><ul><ul><li>background-position </li></ul></ul><ul><ul><ul><li>top, center, bottom, left, right or any sensible combination, such as above. </li></ul></ul></ul>
  29. 29. <ul><li>Grouping </li></ul><ul><ul><li>Ex. h2 { color: red; } </li></ul></ul><ul><ul><li>.thisOtherClass { color: red; } </li></ul></ul><ul><ul><li>.yetAnotherClass { color: red; } </li></ul></ul><ul><ul><li>… becomes… </li></ul></ul><ul><ul><li>h2, .thisOtherClass, .yetAnotherClass { color: red; } </li></ul></ul>
  30. 30. <ul><li>Nesting </li></ul><ul><ul><li>Ex. #top { background-color: #ccc; padding: 1em } </li></ul></ul><ul><ul><li>#top h1 { color: #ff0; } </li></ul></ul><ul><ul><li>#top p { color: red; font-weight: bold; } </li></ul></ul>
  31. 31. <ul><li>Pseudo Classes </li></ul><ul><ul><li>selector:pseudo class { property: value; } </li></ul></ul><ul><ul><ul><li>link is for an unvisited link. </li></ul></ul></ul><ul><ul><ul><li>visited is for a link to a page that has already been visited. </li></ul></ul></ul><ul><ul><ul><li>active is for a link when it is gains focus (for example, when it is clicked on). </li></ul></ul></ul><ul><ul><ul><li>hover is for a link when the cursor is held over it. </li></ul></ul></ul>
  32. 32. <ul><li>Pseudo Classes </li></ul><ul><ul><li>Ex. </li></ul></ul><ul><ul><ul><li>a.headerMenu: link { </li></ul></ul></ul><ul><ul><ul><li>color: blue; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>a. headerMenu: visited { </li></ul></ul></ul><ul><ul><ul><li>color: purple; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>a. headerMenu: active { </li></ul></ul></ul><ul><ul><ul><li>color: red; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>a. headerMenu: hover { </li></ul></ul></ul><ul><ul><ul><li>text-decoration: none; </li></ul></ul></ul><ul><ul><ul><li>color: blue; </li></ul></ul></ul><ul><ul><ul><li>background-color: yellow; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
  33. 33. <ul><li>Shorthand Properties </li></ul><ul><ul><li>Ex. </li></ul></ul><ul><ul><li>p { </li></ul></ul><ul><ul><li>border-top-width: 1px; </li></ul></ul><ul><ul><li>border-right-width: 5px; </li></ul></ul><ul><ul><li>border-bottom-width: 10px; </li></ul></ul><ul><ul><li>border-left-width: 20px; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>… becomes… </li></ul></ul><ul><ul><li>p { border-width: 1px 5px 10px 20px; } </li></ul></ul>
  34. 34. <ul><li>Shorthand Properties </li></ul><ul><ul><li>Ex. </li></ul></ul><ul><ul><li>p { </li></ul></ul><ul><ul><li>font: 1em Arial; </li></ul></ul><ul><ul><li>padding: 3em 1em; </li></ul></ul><ul><ul><li>border: 1px black solid; </li></ul></ul><ul><ul><li>border-width: 1px 5px 5px 1px; </li></ul></ul><ul><ul><li>border-color: red green blue yellow; </li></ul></ul><ul><ul><li>margin: 1em 5em; </li></ul></ul><ul><ul><li> } </li></ul></ul>
  35. 35. <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>