Lesson 4 - CSS Selectors
Class, ID, and tag are different types of selectors rather than styles. A CSS selector is an instruction that tells a Web browser what it should apply the CSS formatting rules to. For example, a tag selector tells a browser to apply the formatting to any instance of a particular tag on the page. Thus, an h1 tag style applies to all <h1> tags on a page. A class selector, on the other hand, applies only when the browser encounters the class name attached to an element on a page. Similarly, an ID selector applies to a tag on the page with a matching ID name: for example, <body id="home">.
Class (Can apply to any HTML element)
A Class is a category of CSS selectors that enable you to have the option of applying more than one style to a specific tag. Let's say that you don't want all your paragraphs to be green, arial, 10pt. You can create one class of paragraph tag that is blue, verdana, 20pt, and one that is red, arial, and 36pt. What? 36 points? I thought font sizes only went from 1 - 7! Yes, but using style sheets enable you to define the font size in points, pixels or ems. Ems are the preferred font size definition to use for accessibility issues.
Class rules are always preceded by a dot before the name. You may also apply this class more than once per page. For example, the same class may be applied to several paragraphs on the page. The following example shows how to define a class called myStyle that, when applied, will use red for it's foreground color. It may be an internal or external style.
.myStyle {color: #f00;}
To use this class in a tag you must assign it's class to .myStyle. Notice that when selecting the class you do NOT precede the name with a dot. The dot only appears in the CSS style definition. In HTML this is what it looks like:
<p class="myStyle">This is an example</p>
This is what the paragraph will look like when rendered:
This is an example
In the PI in HTML mode this class will be present in the Class dropdown menu which, in this example, is myStyle. To apply the sample class to an entire paragraph, merely click within the paragraph (without selecting the entire paragraph) and select the class from the Class dropdown menu of the PI. The style is applied to the paragraph. To undo the application of a style, either click within the paragraph or make a selection on selected text and select None from the Class dropdown menu in the PI.
Now, let's use DW to create a class that we will apply to a paragraph that will be written in blue font.
- Create some text in a paragraph and then move the mouse into the PI and select the CSS button.
- In the Targeted Rule dropdown menu select <New CSS Rule>. Click the Edit Rule button to bring up the New CSS Rule window where you will create your new class. Another way to bring up the New CSS Rule window is by clicking on the edit button in the properities pane of the CSS Styles panel. If the CSS Styles Panel is not visible then select Window > CSS Styles to see it.
In the example, we have selected Class and named it bluePara. We will just apply it to this page only which means that the style will be added as an internal style. You could have chosen to add it to an external style sheet which you would do if you wanted this class to be accessible for other pages.
After you press OK then the CSS Rule definition window will come up where you may select all of the attributes to add to this class. We will be setting the font color to blue. Notice that there are lots of attributes that you may set listed on the left under Category.
- After you press OK you will see your paragraph written in blue font. Make sure you are in Split view so that you may scroll up to the top of the code to see this new class in the <head> tag inside of the <style> tag.
<style type="text/css">
<!-- .bluePara { color: #33F; } -->
</style>
After this new tag has been added DW adds it to the list of tags on the Targeted Rule dropdown menu so that you will be able to apply it to any tag just by selecting it. The list of classes that are shown in the Targeted Rule dropdown are from external style sheets as well as those local to the page.
You can also rename styles. One way to do this is to select the Rename... option from the Class dropdown menu located in the PI in HTML mode.
A window will come up where you can rename the style.
Another way to rename the style is from the CSS Styles Panel. Click the 'All' button to list all of the styles and click on the style that you are going to rename.
Click on the style listed in the All Rules pane. In the text box rename myStyle to myStyleRed.
The style is renamed and the change is reflected in the code.
Class names must start with an alphabetical character preceded by an optional period. There should be no spaces or additional punctuation. If you forget to use the dot or period at the beginning of a class name, DW will add it for you.
There is a quick way to view and edit the attributes of a selected style in the CSS Styles Panel. Notice the Properties pane that is just below the All Rules pane in the CSS Styles panel. Whenever you select a style in the All Rules pane, the attributes of that style appear as blue text in the Properties pane, as you can see in the illustration above. If you wish to change an existing attribute, simply select the appropriate attribute value (on right side of the display) and enter the new value. Often, as in the illustration below, a dropdown menu or other aid will appear which will make it easy to choose your new value. If you wish to add a new rule to your style, click the Show Category View in the Properties pane and all of the available, unused attributes will appear in black. Simply select the one you wish to use and enter a value for it.
Important: You must manually apply any classes you create to HTML tags in your document. Only the HTML tags with styles defined for them (such as the <li> tag) or contextual selectors created from these HTML tags will display the associated styles automatically. I have to manually apply all of the classes (the custom styles I created that begin with a dot such as .verdana3bold, .v12, etc.) to every HTML tag I wish to apply them to.
ID (Applies to only one HTML element)
An ID is a category of CSS selector that enables you to apply a style to a one and only one HTML element in the document. ID rules are always preceded by a pound sign, #. The following example shows how to define an ID called myOneStyle that, when applied, will use red for it's foreground color. It may be an internal or external style.
#myOneStyle {color: #f00;}
Let's say that you would like to have an unordered list written in a yellow font with square bullets, a gray background with a width of 100 pixels.
Bring up the New CSS Rule window from the PI or by clicking on the edit button in the CSS Styles panel. In the window select ID as the Selector Type. Enter yellowList for the Selector Name and define the rule in the document (internal style). Click OK.
The CSS Rule Definition window will come up where we enter the properties for yellowList, in this case, a new font, size, and color.
Under Category we select Background and then select a color.
Under Category we select box and enter a width.
Under Category we select List and enter a new list style type.
Once all of the properites have been selected press OK. Since this is an internal style it will be defined in the head section of the document. In the HTML we assigned the unordered list, ul, id to 'yellowList'. This connects the style to the ul tag. Scrolling up to the head section in the code you will see that the 'yellowList' style name is preceded by a pound sign, #. This means that this style will be assigned to the id of only one HTML element in this document, ul in this example. Looking at the HTML of the ul tag you will see that the id is set to 'yellowList' and that there is no pound sign. The pound sign only appears in the CSS.
Note, that a CSS ID style may be assigned to only one HTML element in the document. If you would like to use it on more than one element in the document then you would use a class instead of an ID.
Tag (Redefines an HTML element)
You can assign a style to tags (HTML elements) without using a class and ID. You just enter the tag to which the style is to be applied. Wherever the tag is used in the document the style will be applied. Earlier, when you set the Page Properties the styles were assigned to the body tag which you can see in the head portion of the code or in the external style sheet if you moved it there.
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
Bring up the New CSS Rule window and select Tag for the Selector Type and enter body for the tag. When you click on the arrow buttons you will see the entire list of tags that you can select.
After pressing OK the CSS Rule Definition window will come up. We will select a font and size for the body tag.
Once all of the properites have been selected press OK. Since this is an internal style it will be defined in the head section of the document. In the CSS the body tag sets the font to comic sans serif and the size to 14 pixels. In the paragraph below there is no style being applied so it will use the font set in the body.
Compound (Based on your selection)
The Compound selector, also known as contextual selector, is used to create styles for a combination of tags or tags that are nested in other tags. Before we discuss this we need to know about inheritance.
Inheritance
HTML documents are structured hierarchically. There is an ancestor, the top level element, the HTML element, from which all other elements (children) are descended. As in any other family children of the HTML family can inherit from their parents, e.g. color or size.
By letting the children inherit from their parents a default style can be created for top level elements and their children. (Note: not all properties can be inherited, such as background). The inheritance starts at the oldest ancestor and is passed on to its children and then their children and the children's children and so on.
An inherited style can be overridden by declaring a style in the child element. For example if the 'em' element is not to inherit its parent 'p' then it's style must be declared. For example:
body {font-size: 10pt} All text will be displayed in a 10 point font body {font-size: 10pt} h1 {font-size: 14pt} All text except h1 will be displayed in a 10 point fontAll text except for the level 1 headings will be displayed in a 10 point font. 'h1' will be displayed in a 14 point font. If the element 'h1' contains other elements, e.g. 'em' then the 'em' element will also be displayed in a 14 point font. It will inherit the property of the parent 'h1 . (www.webdesign.org)
Certain tags cannot be used without other tags. The 'td' tag is a component of the 'table' tag. If you apply a style to the 'table' tag, the 'td' tag will inherit the style of their container 'table' tag.
Now that we know what inheritance is we can look at how tags are nested. In the HTML code, below, the body is the outermost tag followed by the div tag. The div tag contains p tags and a ul tag. Using the compound selector styles can be applied to tags following a certain nesting pattern.
In DW I entered some text and italicized it. I am going to create a compound selector that will apply a tan background to italicized text within a paragraph. I bring up the New CSS Rule window and select the Compound Selector Type. The selector name is '.container p i'.
Since I want to include all paragraphs with italicized text, including some that might be inside of other div tags, then I need to make the selector name less specific. I click on the Less Specific button and this gives me what I want, 'p i'. Notice that the '.container' has been removed so the style will be applied to all paragraphs with italicized text.
In the CSS Rule Definition window I set the background to tan. Below we see how the CSS is defined for the nested tags and what it looks like when rendered.
The Tag Inspector
The Tag Inspector allows you to see any HTML attributes that are being applied to any element on your page. Open the Tag Inspector (Window>Tag Inspector) and simply click on an object in your Design window. The Tag Inspector will show the HTML Attributes available for that object, as well as the current values of any attributes that have already been set! You can add or change attribute values for HTML attributes using the Tag Inspector in the same way that you change CSS attribute values in the CSS Styles Properties window. When I clicked on the image, a list of available HTML <img> attributes appeared, as well as the current values for the attributes that were already specified.
Rules of Specificity
It's possible that more than one rule is applied to an element. In this case, rules of Specificity will determine which style is the most specific to the element. Specifity is the rule that resolves conflicts and generally goes like this:
"Some selectors are more specific than others. For example, the class and ID selectors are more specific than simple HTML element selectors. When two rules select the same element and the properties contradict one another, the rule with the more specific selector takes precedence. Specificity for selectors is a little involved. Without going into the full detail, most situations can be resolved with the following rules.
- ID selectors are more specific than other selectors
- Class selectors are more specific than HTML element selectors, and other selectors such as contextual, pseudo class and pseudo element selectors.
- Contextual selectors, and other selectors involving more than one HTML element selector are more specific than a single element selector (and for two multiple element selectors, the one with more elements is more specific than the one with fewer.)"
Read more about Specificity at:
http://www.westciv.com/style_master/academy/css_tutorial/advanced/cascade_inheritance.html
1997-2004 Western Civilisation Pty. Ltd.
CSS Tips
- To create linked text without an underline, use the Type Category, Decoration set to none.
- Make your background image scroll by using the Background Category Attachment field. Try it and let us know what you selected from the drop down menu and which browsers show the feature.
- Remember to upload your external style sheet to the server along with all your linked documents.
- Styles applied to table tags may give inconsistent results across browsers
- Using CSS font color shortcuts for fonts that have
double digits:
Often you'll find that the colors you use have matching pairs of digits for each of the red, green, and blue components. If you specify only three hex digits for the color, CSS will automatically expand it to a full 6-digit color value. Thus,
#fff -> #ffffff -> White
#000 -> #000000 -> Black
#ffe -> #ffffee -> Light Tan
#0df -> #00ccff -> Sky BlueYou get the idea. Remember -- this shortcut only works in CSS and will shave off a few extra bytes off your page sizes. If you try typing 3-digit color values in HTML, you'll get unpredictable results.
- The <div> tag forces a line break after the closing </div> tag.
- Users can set their browsers to ignore style sheets and apply their own settings.
- You can define an image to be used as a bullet in the List Category.
This image can be an animated gif image. Bullet images are not
supported by NN4 but bullet types such as disc, circle, square,
decimal, lower and uppercase numerals, lower and uppercase alphabet
are supported.
Tutorials
- CSS Tutorial: in depth CSS tutorial
- Selectutorial: Excellent tutorial about CSS
- w3schools: Try out all kinds of CSS Examples to see exactly how it works
- Zen Garden: CSS-based design process
References and Resources
- Safari Books OnLine - Compound Selectors
- CSS-Wiki Discussion Board, Class vs. ID Topic
- Introduction to Style Sheets
- World Wide Web Consortium - The Ultimate Authority on CSS
- Rules of Specificity
* click the link below to read this week's homework assignment *
Assignment 4