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>

lisandra-church
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>Loremipsum dolor sit amet, consectetueradipiscingelit. Curabiturgravida. Fusce non orci. Proinlaciniapellentesque ante. Donec dictum molestieelit. Pellentesquepedetortor.</p> <p>Suscipit id, lacinia ac, nisl. Phaselluseleifendlorem et est. Loremipsum dolor sit amet, consectetueradipiscing. Phaselluslacinia </p> <h1>ligulanecsapien. Maecenas</h1> <p>molestie in, placerat a, vulputatequis, ligula. Utconvallis. Aliquamvolutpat. Phasellus </p> <h2>Egestas.</h2> <p>Vestibulumvelest tempus erosfaucibusinterdum. </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>Loremipsum dolor sit amet, consectetueradipiscingelit. Curabiturgravida. Fusce non orci. Proinlaciniapellentesque ante. Donec dictum molestieelit. Pellentesquepedetortor.</p> <p>Suscipit id, lacinia ac, nisl. Phaselluseleifendlorem et est. Loremipsum dolor sit amet, consectetueradipiscing. Phaselluslacinia </p> <h1>ligulanecsapien. Maecenas</h1> <p>molestie in, placerat a, vulputatequis, ligula. Utconvallis. Aliquamvolutpat. Phasellus </p> <h2>Egestas.</h2> <p>Vestibulumvelest tempus erosfaucibusinterdum. </p> .special { font-size: 2em; color: green; } </div>

  12. Divisions & Spans <p>Loremipsum dolor sit amet, consectetueradipiscingelit. Curabiturgravida. Fusce non orci. Proinlaciniapellentesque ante. Donec dictum molestieelit. Pellentesquepedetortor, congue in, suscipit id, lacinia ac, nisl. Phaselluseleifendlorem et est. Loremipsum dolor sit amet, consectetueradipiscingelit. Phaselluslacinialigulanecsapien. Maecenas liberofelis, molestie in, placerat a, vulputatequis, ligula. Utconvallis. Aliquameratvolutpat. Phasellusegestas. Vestibulumvelest tempus erosfaucibusinterdum. Sedeget mi vel quam semperplacerat. </p>

  13. Divisions & Spans <head> <style type=“text/css”> </style> .effect {color: red; border: 2px solid red; } <p>Loremipsum dolor sit amet, consectetueradipiscingelit. Curabiturgravida. Fusce non orci. Proinlaciniapellentesque ante. Donec dictum molestieelit. Pellentesquepedetortor, congue in, suscipit id, lacinia ac, nisl. Phaselluseleifendlorem et est. Loremipsumdolor sit amet, consectetueradipiscingelit. Phaselluslacinialigulanecsapien. Maecenas liberofelis, molestie in, placerat a, vulputatequis, ligula. Utconvallis. Aliquameratvolutpat. Phasellusegestas. Vestibulumvelest tempus erosfaucibusinterdum. Sedeget mi vel quam semperplacerat. </p>

  14. Divisions & Spans <head> <style type=“text/css”> </style> .effect {color: red; border: 2px solid red; } <p>Loremipsum dolor sit amet, consectetueradipiscingelit. Curabiturgravida. Fusce non orci. Proinlaciniapellentesque ante. Donec dictum molestieelit. Pellentesquepedetortor, congue in, suscipit id, lacinia ac, nisl. Phaselluseleifendlorem et est. <span class=“effect”>Loremipsum</span> dolor sit amet, consectetueradipiscingelit. Phaselluslacinialigulanecsapien. Maecenas liberofelis, molestie in, placerat a, vulputatequis, ligula. Utconvallis. Aliquameratvolutpat. Phasellusegestas. Vestibulumvelest tempus erosfaucibusinterdum. Sedeget mi vel quam semperplacerat. </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