Download
1 / 16
160 likes | 265 Views
This lesson focuses on the fundamental syntax of CSS rules, including selectors, properties, and values. We explore class and ID selectors, demonstrating how to apply styles to HTML elements effectively. Learn how to create class selectors to modify the appearance of specific elements, and see examples of styling with color, font size, and borders. This comprehensive guide will help you build a solid foundation in CSS, enabling you to control the look and feel of your web pages with confidence.
E N D
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> <title>CSS part 2</title> <style type=“text/css”> </style> </head> Class Selector Example: <body> </body> </html>
<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>
Class Selector element. classname p.urgent { color: red; } .urgent { color: red; }
<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>
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
Divisions & Spans HTML, Class or ID Selector { property: value; } <p> This is Normal</p> <p class=“urgent”>This will be red</p>
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>
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>
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>
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>
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>
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>
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
