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.

em { color: blue; } /* Type selector */
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>

<h7>This em is part of an h7.</h7>

<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>
<h7>This is an h7</h7>

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

Part1

Free Web Hosting