A valid and well-structured document provides the framework to which your styles are applied like the attribute class visibility hidden. To be able to style a particular (X)HTML element using CSS, you need to have some way of targeting that element and mastering css files with advanced techniques. In CSS the part of a style rule that does this is called the selector.
The most common kinds of selectors are type and descendant selectors. Type selectors are used to target a particular type of element, such as a paragraph, an anchor, or a heading element. You do this by simply specifying the name of the element you wish to style. Type selectors are sometimes also referred to as element or simple selectors.
p {color: black;}
a {text-decoration: underline;}
h1 {font-weight: bold;}
Descendant selectors allow you to target the descendants of a particular element or group of elements. A descendant selector is indicated by a space between two other selectors.
These two types of selector are great for applying generic styles that apply across the board. To be more specific and target selected elements, you can use ID and class selectors. As the names suggest, these selectors will target elements with the corresponding ID or class name. ID selectors are identified using a hash character; class selectors are identified with a period.
The universal selector is possibly one of the most powerful and least used of all the selectors among Css files. The universal selector acts like a wildcard, matching all the available elements. Like wildcards in other languages, the universal selector is denoted by an asterisk. The universal selector is normally used to style every element on a page. For instance, you can remove the default browser padding and margin on every element using the following rule:
* {
padding: 0;
margin: 0;
}
When combined with other selectors, the universal selector can be used to style all the descendants of a particular element, or skip a level of descendants. You will see how this can be put to practical effect a little later in this website dedicated to the cascade style sheets.
In css some attributes can have more than one value, separated by spaces. The attribute selector allows you to target an element based on one of those values. For instance, a group of developers have suggested using predefined keywords in the attribute of links to define the relationship one site owner has with another and to improve the class attributes.
If you find yourself adding lots of extraneous classes to your document, it is probably a warning sign that your document is not well structured and you need to become a real good css web designer. Instead, think about how these elements differ from each other. Often you will find that the only difference is where they appear on the page. Rather than give these elements different classes, think about applying a class or an ID to one of their ancestors, and then targeting them using a descendant selector.
|
