033.2 Lesson 1

One of the advantages of using CSS is that you do not need to write individual rules to elements sharing the same style. An asterisk applies the rule to all elements in the web page, as shown in the following example:

The * selector is not the only method to apply a style rule to all elements in the page. A selector that simply matches an element by its tag name is called a type selector, so any HTML tag name such as body, p, table, em, etc., can be used as selectors. In CSS, the parent’s style is inherited by its children elements. So, in practice, using the * selector has the same effect as applying a rule to the body element:

Furthermore, the cascading feature of CSS allows you to fine tune the inherited properties of an element. You can write a general CSS rule that applies to all elements in the page, and then write rules for specific elements or sets of elements.

If the same element matches two or more conflicting rules, the browser applies the rule from the most specific selector. Take the following CSS rules as an example:

The browser will apply the color: purple and font-size: large styles to all elements inside the body element. However, if there are li elements in the page, the browser will replace the font-size: large style by the font-size: small style, because the li selector has a stronger relationship with the li element than the body selector does.

CSS does not limit the number of equivalent selectors in the same stylesheet, so you can have two or more rules using the same selector:

In this case, both rules are equally specific to the li element. The browser cannot apply conflicting rules, so it will choose the rule that comes later in the CSS file. To avoid confusion, the recommendation is to group together all properties that use the same selector.

The order in which the rules appear in the stylesheet affect how they are applied in the document, but you can override this behavior by using an important rule. If, for any reason, you want to keep the two separate li rules, but force the application of the first one instead of the second one, mark the first rule as important:

Rules marked with !important should be used with caution, because they break the natural stylesheet cascading and make it harder to find and correct problems within the CSS file.

We saw that we can change certain inherited properties by using selectors matching specific tags. However, we usually need to use distinct styles for elements of the same type.

Attributes of HTML tags can be incorporated into selectors to restrict the set of elements they refer to. Suppose the HTML page you are working on has two types of unordered lists (<ul>): one is used at the top of the page as a menu to the sections of the website and the other type is used for conventional lists in the text body:

By default, each list item has a black circle to its left. You may want to remove the circles from the top menu list while leaving the circles in the other list. However, you cannot simply use the li selector because doing so will also remove the circles in the list inside the text body section. You will need a way to tell the browser to modify only the list items used in one list, but not the other.

There are several ways to write selectors matching specific elements in the page. As mentioned earlier, we will first see how to use the elements' attributes to do so. For this example in particular, we can use the id attribute to specify the top list only.

The id attribute assigns a unique identifier to the corresponding element, which we can use as the selector part of the CSS rule. Before writing the CSS rule, edit the sample HTML file and add id="topmenu" to the ul element used for the top menu:

There is already a link element in the head section of the HTML document pointing to the style.css stylesheet file in the same folder, so we can add the following CSS rules to it:

The hash character is used in a selector, following an element, to designate an ID (without spaces separating them). The tag name to the left of the hash is optional, as there will be no other element with the same ID. Therefore, the selector could be written just as #topmenu.

Even though the list-style-type property is not a direct property of the ul element, CSS properties of the parent element are inherited by its children, so the style assigned to the ul element will be inherited by its child li elements.

Not all elements have an ID by which they can be selected. Indeed, only a few key layout elements in a page are expected to have IDs. Take the lists of planets used in the sample code, for instance. Although it is possible to assign unique IDs for each individual repeated element like these, this method is not practical for longer pages with lots of contents. Rather, we can use the parent div element’s ID as the selector to change the properties of its inner elements.

However, the div element is not directly related to HTML lists, so adding the list-style-type property to it will have no effect on its children. Thus, to change the black circle in the lists inside the content div to a hollow circle, we should use a descendant selector:

The #content ul selector is called a descendant selector because it matches only the ul elements that are children of the element whose ID is content. We can use as many levels of descendance as necessary. For instance, using #content ul li would match only the li elements that are descendants of ul elements that are descendants of the element whose ID is content. But in this example, the longer selector will have the same effect as using #content ul, because the li elements inherit the CSS properties set to their parent ul. Descendant selectors are an essential technique as the page layout grows in complexity.

Let’s say that now you want to change the font-style property of the list items in the topmenu list and in the list in the footer div to make them look oblique. You can’t simply write a CSS rule using ul as the selector, because it will also change the list items in the content div. So far, we have changed CSS properties using one selector at a time, and this method can also be used for this task:

Separate selectors are not the only way to do it, though. CSS allow us to group together selectors that share one or more styles, using a list of selectors separated by commas:

Grouping selectors eliminates the extra work of writing duplicate styles. Furthermore, you may want to change the property again in the future and may not remember to change it in all the different places.

CSS selectors can also match dynamic states of elements. These selectors are particularly useful for interactive elements, such as hyperlinks. You may want the appearance of hyperlinks when the mouse pointer moves over them, to draw the visitor’s attention.

Back to our sample page, we could remove the underlines from the links in the top menu and show a line only when the mouse pointer moves over the corresponding link. To do this, we first write a rule to remove the underline from the links in the top menu:

Then we use the :hover pseudo-class on those same elements to create a CSS rule that will apply only when the mouse pointer is over the corresponding element:

The :hover pseudo-class selector accepts all the CSS properties of conventional CSS rules. Other pseudo-classes include :visited, which matches hyperlinks that have already been visited, and :focus, which matches form elements that have received focus.