Cascading Style Sheets
Inserting CSS
External Style Sheet: <link rel="stylesheet" type="text/css" href="myfile.css" />
Internal: <style type="text/css"></style>
Inline: style=""
id vs class
IDs, indicated by a "#", must be unique to elements on a page. A class name, indicated by a ".", can be used for multiple elements on a single page.
Type & Descendent Selectors
Type selectors target a particular type of element, such as p, a, or h1. Descendent selectors target a particular element or group of elements, indicated by a space between two other selectors.
h6 em { color: red; } /* Descendent selector */
a em { color: green; } /* Descendent selector */
ul em { color: yellow; } /* Descendent selector */
li em { color: magenta; } /* Descendent selector */
<p>This em is part of a paragraph.</p>
<h6>This em is part of an h6.</h6>
<a>This em is part of an a.</a>
-
<ul>This em is part of a ul, NOT part of an li.
- <li>This is a list element</li>
- <li>This em is part of a list element</li> </ul>
Grouping Selectors
Selectors can be grouped to minimize code size by separating by a comma.
h6, h7 { color: magenta; }<h6>This is an h6</h6>
Nesting Selectors
p { color:blue; text-align:center; }.marked { background-color:blue }
.marked p { color:white; }
<p>This is a blue, center-aligned paragraph.</p>
<div class="marked"><p>This p element should not be blue.</p></div>
p elements inside a "marked" classed element keeps the alignment style, but has a different text color.
Example #2
p { color:red;}p.a { color:green }
p.b { color:blue; }
Part1
Part1
