COM271, Week 3
Writing Style Rules:
Writing CSS selectors and rules to tie style attributes and values to html elements
Syllabus | Table of Pages | Assignments | References and Useful Links
All of the information on this page, plus much more, is attainable from the W3C Schools CSS Reference page, http://www.w3schools.com/css/css_reference.asp#default.asp. The complete index is reproduced in the column on the left and on the course website, "References and Useful Links", a link that is available from the syllabus and on most pages of this site.
What follows is meant to emphasize a few of the more important things that you will need to get started with the projects in Eric Meyer on CSS, which we use to facilitate learning of attributes and values.
Most-Common CSS Selectors
All CSS rules begin with a selector and are followed by declarations (see "Bringing Styles to Web Pages").
The simplest, and most common, selector is the name of an element name.
p{font-size:16px;}
A selector can include more than one element name. Each is set off with a comma.
h1, h2, h3{font-weight:bold;}
HTML id attributes can also be used as selectors. The name of the attribute is preceded with a "#" in the selector.
HTML : <h2 id="main_head">Attendence Policy</h2>
CSS : h2#main_head{background-color:#ccf;}
Similarly, HTML class attributes can also be used as selectors. The name of the attribute is preceded with a "." in the selector.
HTML : <p class="warn">Note: Meeting begins 1 hour earlier than normal!</p>
CSS : p.warn{color:red;font-size:1.2em;}
Descendent Selectors
Element names—or element names marked with # id's or . classes—can be listed in sequence to indicate elements contained within elements.
div#contents a{background-color:blue;color:white;}
div#navigation a{background-color:while;color:blue;}
could be used to set up contrasting links for display inside a contents section of the page (white on blue) and a navigation section of the page (blue on white).
Descendent selectors are read from right to left; the 1st rule, above, would be read, "any link that is contained in the div identified as "contents."
Pseudo-state Selectors for Links
CSS can also be used to respond to mouse states. The most common are to use the special notation ":" to identify "pseudo-states" for links:
- a:link A normal link.
- a:visited A visited link.
- a:hover A link being hovered over by a mouse pointer.
- a:active An active link (used to affect the style during the time a mouse button is being clicked and held down.
The following would establish a red, underlined link in the normal state which would turn orange when hovered:
a:link{color:red;text-decoration:underline;}
a:hover{color:#FF6633;}
Try it: Hover over this link.
This should be enough to get us started. We will add a few more ways to create selectors as we go forward. Here is the CSS reference for selectors from W3C.