1 / 16

CSS Part II

Web Pages: Lesson 11. CSS Part II. Basic Syntax of a CSS Rule. Review. Rule. Selector. { property:. value; }. DECLARATION. HTML, Class or ID. Class Selector. element.classname. p.urgent { color: red; }. p { color: red; }. Example:. ANY NAME YOU WANT !. <html> <head>

kaden-craft
Download Presentation

CSS Part II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Pages: Lesson 11 CSS Part II

  2. Basic Syntax of a CSS Rule Review Rule Selector { property: value; } DECLARATION HTML, Class or ID

  3. Class Selector element.classname p.urgent { color: red; } p { color: red; } Example: ANY NAME YOU WANT !

  4. <html> <head> <title>CSS part 2</title> <style type=“text/css”> </style> </head> Class Selector Example: <body> </body> </html>

  5. <html> <head> <title>CSS part 2</title> <style type=“text/css”> </style> </head> Class Selector Example: p.urgent { color: red; } <body> </body> </html> <p> This is Normal</p> <p class=“urgent”>This will be red</p> <p>This is back to Normal</p>

  6. Class Selector element. classname p.urgent { color: red; } .urgent { color: red; }

  7. <html> <head> <title>CSS part 2</title> <style type=“text/css”> </style> </head> Class Selector Example: .urgent { color: red; } <body> </body> </html> <p class=“urgent”>This will be red </p> <h1 class=“urgent”>This will be red too </h1>

  8. Class Selector ID Selector element.classname element#idname p.urgent { color: red; } p#urgent { color: red; } ANY NAME YOU WANT ! ANY NAME YOU WANT ! Use only ONETIME per webpage May be used many times

  9. Divisions & Spans HTML, Class or ID Selector { property: value; } <p> This is Normal</p> <p class=“urgent”>This will be red</p>

  10. Divisions & Spans <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida. Fusce non orci. Proin lacinia pellentesque ante. Donec dictum molestie elit. Pellentesque pede tortor.</p> <p>Suscipit id, lacinia ac, nisl. Phasellus eleifend lorem et est. Lorem ipsum dolor sit amet, consectetuer adipiscing. Phasellus lacinia </p> <h1>ligula nec sapien. Maecenas</h1> <p>molestie in, placerat a, vulputate quis, ligula. Ut convallis. Aliquam volutpat. Phasellus </p> <h2>Egestas.</h2> <p>Vestibulum vel est tempus eros faucibus interdum. </p> HTML, Class or ID Selector { property: value; } <p> This is Normal</p> <p class=“urgent”>This will be red</p>

  11. Divisions & Spans <div class=“special”> <head> <style type=“text/css”> </style> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida. Fusce non orci. Proin lacinia pellentesque ante. Donec dictum molestie elit. Pellentesque pede tortor.</p> <p>Suscipit id, lacinia ac, nisl. Phasellus eleifend lorem et est. Lorem ipsum dolor sit amet, consectetuer adipiscing. Phasellus lacinia </p> <h1>ligula nec sapien. Maecenas</h1> <p>molestie in, placerat a, vulputate quis, ligula. Ut convallis. Aliquam volutpat. Phasellus </p> <h2>Egestas.</h2> <p>Vestibulum vel est tempus eros faucibus interdum. </p> .special { font-size: 2em; color: green; } </div>

  12. Divisions & Spans <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida. Fusce non orci. Proin lacinia pellentesque ante. Donec dictum molestie elit. Pellentesque pede tortor, congue in, suscipit id, lacinia ac, nisl. Phasellus eleifend lorem et est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lacinia ligula nec sapien. Maecenas libero felis, molestie in, placerat a, vulputate quis, ligula. Ut convallis. Aliquam erat volutpat. Phasellus egestas. Vestibulum vel est tempus eros faucibus interdum. Sed eget mi vel quam semper placerat. </p>

  13. Divisions & Spans <head> <style type=“text/css”> </style> .effect {color: red; border: 2px solid red; } <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida. Fusce non orci. Proin lacinia pellentesque ante. Donec dictum molestie elit. Pellentesque pede tortor, congue in, suscipit id, lacinia ac, nisl. Phasellus eleifend lorem et est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lacinia ligula nec sapien. Maecenas libero felis, molestie in, placerat a, vulputate quis, ligula. Ut convallis. Aliquam erat volutpat. Phasellus egestas. Vestibulum vel est tempus eros faucibus interdum. Sed eget mi vel quam semper placerat. </p>

  14. Divisions & Spans <head> <style type=“text/css”> </style> .effect {color: red; border: 2px solid red; } <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida. Fusce non orci. Proin lacinia pellentesque ante. Donec dictum molestie elit. Pellentesque pede tortor, congue in, suscipit id, lacinia ac, nisl. Phasellus eleifend lorem et est. <span class=“effect”>Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit. Phasellus lacinia ligula nec sapien. Maecenas libero felis, molestie in, placerat a, vulputate quis, ligula. Ut convallis. Aliquam erat volutpat. Phasellus egestas. Vestibulum vel est tempus eros faucibus interdum. Sed eget mi vel quam semper placerat. </p>

  15. Media - CSS <style type=“text/css”> body { background-color: blue; } p.heading { font-size: 1.3em; color: pink;} .main { font-size: .8em} color: green ;} .special { background-color: gray; } </style>

  16. Media - CSS <style type=“text/css”> body { background-color: blue; } p.heading { font-size: 1.3em; color: pink;} .main { font-size: .8em} color: green ;} .special { background-color: gray; } </style> <style type=“text/css” media=“screen”> SCREEN <style type=“text/css” media=“print”> body { background-color: white; } p.heading { font-size: 1.3em; color: black;} .main { font-size: .8em} color: black ;} .special { background-color: white; } </style> PRINT

More Related