 In our first e-lecture about cascading style sheets, we saw that the basic structure of an instruction in a cascading style sheet can be divided into two main elements, into selectors and into property value declarations. This e-lecture illustrates how we can use the various types of selectors that can be applied to the HTML code. To show the effects that can be created with different selectors, we will use the HTML document of our previous HTML e-lectures with an external style sheet and a tiny change. Our document now contains two paragraph tags in its body, resulting in two paragraphs in the browser. This allows us to show the effects of style changes more appropriately. Since we are now using an external style sheet, we do not have to present the HTML code any longer, but just the content of the external style sheet and the changes made within it. So here is our external style sheet. Its file name is styles and its extension is CSS. Currently, this style sheet contains two selectors with several property value pairs. They affect the h1 that is heading level 1 tag and the p tags. Before we look at the selectors that are possible within a cascading style sheet, let us provide an overview of the use of selectors first. Now the selector is the element in a CSS rule which identifies the HTML element to which a rule applies. The following selector types will be discussed in this e-lecture. We will first look at type selectors which redefine HTML tags. We will deal with contextual selectors. We will look at class and ID selectors and attribute selectors. And finally, we will deal with so-called pseudo classes. Let's start with type selectors. Type or element selectors redefine the way an HTML tag is displayed by a browser. Our current style sheet contains two type selectors, h1 and p. Let us change one of them and define the heading now in red. And as you can see, a simple redeclaration of the color property of the h1 selector in the style sheet will do the job. Contextual selectors are contained within another selector. They are indicated in a list separated by a character space starting with the higher level element. Here is an example. An emphasis selector applied to the paragraph tag. It assigns the color green to all emphasis tags within all paragraph tags. To see the effect, we have to change the HTML document in this particular way. Now we inserted the emphasis tag into the paragraph tag. And the result is what we would have expected. The string, all of you, is now green. The remaining strings within p tags and all other emphasize tags will remain unaffected by this rule. So our new style definition only applies to certain contexts. Let us look at class selectors next. Class selectors are used to apply a style to a special kind of one or more HTML elements. They can be used to mark elements which belong to a conceptual group. This means that not all paragraph tags are changed but only those paragraph tags which have been given a special attribute. Here is an example. Now p.special, and that's a syntax, is now our new selector. It is written in the .syntags. Type selector, .class selector, and then of course the property value declarations in a list. Here we would define the color orange to particular paragraphs. In the HTML code we can now add the attribute class with the value special. As a result this particular p tag displays the text in an orange color. In our case only p tags which have been given the class attribute special are displayed in the respective color. If you want to apply the rule to other elements it is possible to leave out the HTML tag. Thus making it possible to apply the rule to other tags with the class attribute special. For example we could define headings in such a way. Let's now look at the ID selector. The ID selector is used similarly to the class selector with the only difference that the respective element can be used only once within the HTML document. This results in the fact that IDs can be used to mark elements semantically. That is the ID value should be a self-explanatory label for the element. In the style sheet ID selectors are presented as follows. They are introduced by the type selector. Here it is a division type selector. Then they are followed by a hash tag and then the ID selector. That is the self-explanatory label we assign to them. And then of course the property value list. In this case the div tag would be defined with the width of 500 pixels. In the HTML code we can now supplement the target tag. That is in our case the division tag with the ID attribute and the value the name we defined earlier on. The value of course has to occur in quotes. In our case the effect that we can see in the browser is not very convincing. The width of 500 pixels leads to the occurrence of scroll bars in our small browser window. But it shows that the ID selector works. Let's next look at attribute selectors. Now attribute selectors affect the attributes of HTML tags. This is useful when you want to address tags which do not contain any class or ID attributes. Attribute selectors have the following syntax within the style sheet. The initial element is the selector. Then we need square brackets and then the attribute which is in the focus. Here is an example the so-called simple attribute. In a previous version of our HTML document we had an image using this image tag in the body. And the result was that the VLC logo and the LAT logo as one image were aligned on the right hand side in our web document. The file name is logo.png. Let us now assume we have several images on our website which we all want to frame red. All we have to do is use the title attribute within the image tag of the images which we want to frame. And we have to give to the title attribute as a value a name of our choice. In the style sheet the rule looks like this. It references or selects all images with a title attribute and any title value. They only have to have a title attribute and it assigns the predefined properties to them. The result in the browser is this. A frame around our picture because it is associated the image tag is associated with the title attribute and a name given to it. There are several ways of attribute selection but since browser support is a bit disappointing here we will just list them. The simple way of attribute selection has just been demonstrated. The simple attribute selection. The exact way of using attribute selectors references only those elements whose attribute not only matches the style property but also its value. So these strings have to be identical. The partial method references those elements where the tag attribute and the style property match and the property value is contained as a substring in the attribute value. And then we have the hyphen separated form which is very similar to the partial form. However here the property value is a sequence that involves a hyphen in the attribute value. Further details can be found in the VLC virtual session cascading style sheet layout principles. So let's continue with another class with the so-called pseudo class. Now pseudo classes are based on the state of an HTML element or the document itself. The most common use of pseudo classes occurs when a certain state of a hyperlink is triggered by the user. So let us use our standard code again with hyperlink anchor tags around the item VLC over here. By default the browser underlines the hyperlink and displays it in blue. With the anchor tag pseudo class however we can address the various states for hyperlinks and assign different colors and text decoration to them. So let's show how this is done. With the pseudo class anchor colon link anchor colon and link we can define the state of the link itself. That is its default value. In this case we are overwriting the underline definition by the browser style and are defining the new style. No further text decoration. The visited state A colon visited. That is the state after a hyperlink is defined is listed next. We chose green here to illustrate this state. Whether the colors are really useful that's a different story. We want to illustrate the effects rather than using wonderful colors. Now when the mouse cursor hovers over the link we want it to be red and underlined. The anchor colon hover class does the job for us. The final state is the active state. That is the state when we click on a hyperlink. Anchor colon active is the class that is responsible for this state and we simply use the color black here. These pseudo classes can be used to increase the usability of an HTML document by giving feedback for user action. Their sequence of occurrence in the style sheet has to be followed in order to let the effect work properly. Changing the sequence will result in the prevention of these effects. So do not change this sequence here. Now the final thing we have to discuss is the topic of grouping. Now CSS declarations can be grouped to apply one attribute to several HTML elements. This cleans up your CSS code and arranges things more clearly and improves readability. Selectors can be grouped by listing them in front of their declaration separated with commas. Here is an example which defines all types of headlines. Well, we are just using h1 and ht tags, h2 tags here. So this example defines all headlines in blue. We have already seen that we can group property value declarations. Instead of writing one rule per declaration, they can be defined as one rule. So two h1 declarations are redefined as one rule here. Well, that's it. Having defined the various possibilities of using selectors in cascading style sheets, we should now look at the properties and values that can be used to define the layout of a website. However, a mere listing of properties and values is not a good idea for any lecture. Rather, you should consult handbooks, lists, the World Wide Web, or if you wish the unit cascading style sheets, layout principles on the virtual linguistics campus. So thank you once more for your attention.