Webpages have family trees just like people. Elements can have children, who have children, and so on. The tree that you create in your webpage will determine how you select things to style.
Example of a basic webpage: (only the body)
<body> <div id="container"> <div id="heading">This is my website!</div> <div id="navigation"> <a href="page1.html">link #1</a> <a href="page2.html">link #2</a> <a href="page3.html">link #3</a> </div> <div id="content"><p><span>Welcome!</span> This is my page content.</p></div> <div id="footer">©2007 by Wendy Webby</div> </div> </body>
The example's document tree:
In order to use CSS properties you have to use selectors. These are usually just HTML tags without the angle brackets. Sometimes the HTML tag selectors aren't enough if you have a particular tag on a webpage multiple times and only want to style a few instances of it. This is where IDs and classes come in. Within HTML tags, the "id" or "class" attributes are used. Sometimes it's necessary to use both at once. Within the stylesheet (embedded or external), # (id) or . (class) are used instead.
The <span> tag is a special HTML tag whose sole purpose is to transmit styles to text. Only properties that affect the inline model and the box model's padding property will work on it.
Selectors that Internet Explorer interprets correctly:
- class: a particular named class can be used mutiple times per page
- ".name" selects any matching class on the page
- "element .name" OR "#name.name" selects any class that matches the particular element
- Example: #content .heading {font-weight:bold;}
- "element.name1.name2" OR "#name.name1.name2" selects any class that matches the particular element and there is no limit to the number of words used
- Example: p.florida.miami.beach {font-size:9pt;} will match <p class="florida"> AND <p class="florida miami"> AND <p class="florida miami beach">
- descendant selector: these match an element's descendant and you can be as general or as specific as you need to be and the descendant does not have to be a direct one. Usually you only need to go one level deep (parent > child).
- Example: #container #header {margin-bottom:10px;} OR div#container div#header {margin-bottom:10px;} OR html body {font-family:Verdana;}
- id: according to XHTML rules a particular named ID can only be used once per page
- "#name" selects any matching id on the page
- "element #name" OR "#name1 #name2" selects any id that matches the particular element
- Example: #container #content {padding:5px;}
- type selector: selects all matching HTML tags
- Example: hr {color:navy;}