Using either the Dreamweaver Help menu or the W3.org, define the following terms on your page:
- • ID Selectors
- "The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value. ID selectors have a higher precedence than attribute selectors. For example, in HTML, the selector #p123 is more specific than [ID=p123] in terms of the cascade." (source - W3C)
- • Class Selectors
- "For style sheets used with HTML, authors may use the dot (.) notation as an alternative to the "~=" notation when matching on the "class" attribute. Thus, for HTML, "DIV.value" and "DIV[class~=value]" have the same meaning. The attribute value must immediately follow the ".". To match a subset of "class" values, each value must be preceded by a ".", in any order." (source - W3C)
- • Tag or Type Selectors
- "A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree." (source - W3C)
- • Pseudo-Class
- "Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exception is ':first-child', which can be deduced from the document tree. Neither pseudo-elements nor pseudo-classes appear in the document source or document tree. Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only appear after the subject of the selector. Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. In case of conflicting rules, the normal cascading order determines the outcome." (source - W3C)
- • Descendant Selector
- "At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by whitespace. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A." (source - W3C)
Start from scratch and create a page that looks like this one using embedded CSS rules for each of the items below::
- CSS rule- create an ID for the header div above, which contains boldfaced, red, verdana text
- CSS rule- create an ID for the title div above, which contains 20 px, orange, georgia text
- CSS rule- create an ID for the footer div below, which contains a forest green background color
- CSS rule- create a class which contains italicized, green georgia text to highlight the terms you are to define
- CSS rule- create a rule for the a:link, a:visited, a:hover, and a:active that alters the color and decoration for each of the four link types
- CSS rule- create a rule so that the a:link, a:visited, a:hover, and a:active links appear differently in the footer div
- CSS rule- create a rule for the h2, h3, and h4 tag which does not alter the size but changes:
- font family
- color
- letter spacing
