The selectors determine how the CSS styles are assigned to the HTML elements. For a corresponding definition, you first enter the name of the element to which the selector is to access. The actual declaration is then made in curly brackets. One or more properties can be specified within a declaration. The general syntax is therefore as follows:
Selector { property1: value; property2: value; property3: value; }You have already seen a corresponding definition in the previous tutorial.
h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; }
Make sure to end each declaration with a semicolon.
A look at the available selectors
CSS actually has quite a large number of selectors, the most important of which I will introduce to you. Because one thing is clear: you can only define CSS properties properly if you know how to work with selectors.
The easiest way to assign styles within an HTML document is to use the element selector.
The following syntax assigns the color black to all p elements.
p { color: #009966; }
If you want to assign the same style to several elements, this is also possible.
In this case, simply note the relevant elements one after the other, separated from each other by a comma.
p, h1, li { color: #000; }
You can also assign multiple styles to elements. The styles are separated from each other by a semicolon.
p { color: #000; background-color: red; }
A combination of the above variants is also possible.
p, h1, li { color: #009966; background-color: red; }
The result could look like this:
Areas with multiple elements
It is often necessary to format an area that consists of several HTML elements. For such cases, there are two special elements in HTML: span and div. You will encounter these elements again and again in this series.
An example:
<div class="article"> <h1>Color explosion</h1> <p class="topic">A tutorial on creating color explosion by <span class="author">MarkusMelzer</span>.</p> </div>
The only difference between div and span is that the div element forces a new line in the text flow. span, on the other hand, does not create a new line. In the example shown, a div area is defined that contains a heading and a text paragraph. In turn, there is a span area within the text paragraph.
ID and class selectors
So far, element selectors have been used. In the following example, all h1 headings are formatted using such a selector.
h1 { color: #000; background-color: red; }
Of course, this is not always desirable in this form. For example, what if you only want to assign certain properties to one or some, but not all h1 headings? CSS offers two options for such cases, namely class selectors and ID selectors.
Class selectors can be used to specifically select HTML elements with class attributes. The class attribute must be specified in the HTML element in question. Class definitions begin with a dot.
An example:
.red { color: red; }
The red class has been defined here. To add the properties assigned to red to an HTML element, enter class followed by the class name.
<p class="rot">PSD-Tutorials.de</p>
The ID selector is similarly easy to use. The ID selector can be recognized by a double cross.
#topnavi { color: blue; };In this example, the ID topnavi is defined. But beware: An ID may only be assigned once within a document. Access to a defined ID property then looks like this:
<div id="topnavi">Here is the navigation</div>
The ID name is assigned to the id attribute. Make sure that the double cross is not noted here.
The information shown can also be combined with each other. For example, you can assign several classes to an HTML element.
<p class="red large">PSD-Tutorials.de</p>
In this example, the two classes red and large are assigned to the text paragraph. If you want to specify a class and an ID, it looks like this:
<p class="rot" id="navi">PSD-Tutorials.de</p>
You can also combine elements and IDs. Here is another example:
div.navi { color: blue; }
This syntax would only apply to div elements with the navi class. p elements, which also have the navi class, would remain unaffected.
There is another way of combining selectors in CSS. Take a look at the following syntax:
h1 { color: red; } em { color: blue; }
Here, all headings of the first order are assigned the color red. em elements, on the other hand, are assigned the color blue.
By combining the two instructions, however, you can now ensure that only the em elements that are located within h1 elements are colored blue.
h1 em { color: blue; };
The element names are separated here without commas.
Incidentally, this is a popular error trap that even CSS beginners fall into. Here is the same syntax, but with a comma:
h1, em { color: blue; }
What does this syntax mean? All h1 and all em elements are addressed. This is therefore completely different from the syntax without a comma!
Another important selector is the universal selector. This enables the selection of any element. This selector is defined via an asterisk.
* { color: red; }
With this syntax, all elements would be colored red. There are also some syntax peculiarities to consider with this selector.
#mainnavi * { color: red; }
In this example, the foreground color of all elements within the element with the ID mainnavi is set to red. However, this does not apply to the element itself.
If the universal selector were at the beginning of a declaration, it would not need to be noted. Something like this would therefore be superfluous:
* p { color: red; }
This syntax is equivalent to the following:
p { color: red; }
You will get to know more selectors in the next tutorial.
