 Cascading style sheet is the name for a standardized instructional language for the presentation of HTML documents. The name is split into two parts. The first part, the character C, refers to the fact that a CSS instruction can trigger elements in an HTML structure depending on their place within the structure, that is, in a cascaded fashion. The second part, the two letters S stands for style sheet and it refers to the concept of applying layout and design principles to an HTML document. This e-lecture discusses the basic concept in cascading style sheet and its use and embedding into an HTML document. There are various ways ranging from inline to external use of style sheets and then of course we will look at the term cascading in more detail because this implies a very important concept as far as the hierarchy of using styles is concerned. To develop the central principles of cascading style sheets, we will use the HTML document that I used in my previous HTML e-lectures as a starting point. Well, here it is. As usual, to the left you will see the source code and on the right hand side you will see how the HTML document will be displayed within the browser. Let us now focus on some basic ideas associated with the use of cascading style sheets. The most important benefit of using CSS is a drastic simplification of web authoring and web maintenance. Let us illustrate this using our heading tag. Assume you want to have a very special heading displayed in blue, displayed in italics, 18 points in size with a yellow background and maybe a dash borderline around it. To achieve these effects, this is what we could do. We use the style attribute with a set of values within the h1 tag. For example, we could use the value color blue, font style italic, font size 18 points, background color light yellow, this is the hexadecimal code, border around it one pixel in size dashed and in a gray color. Well, since the style attribute and its values that I have just listed are directly integrated within the HTML code in the body of a document, this use of styles is referred to as inline style. As a result, the heading is now displayed in the predefined format. Theoretically, such style definitions could be added to any tag. Let us use more style definitions this time applied to the paragraph tag. Well, here again, we are using the style attribute inside the opening p tag with the value color is black and font size 14 points. And well, this is the result exactly as wanted. Now, the text between the paragraph tags is displayed in black and it is 14 points in size. But what would we do if we had many heading tags and many paragraph tags within the same document? Do we have to repeat our style definitions again and again? Theoretically, we could do that because there is no limit to the use of inline styles. However, there is a much more economical way to avoid that. Instead of repeating the style definitions as inline styles, we could define them once within the header of the document. And here, the style tag with the attribute type and the value text CSS defines the availability of a so-called embedded or internal style sheet. Of course, it is not a real sheet. Rather, it is a type of definition. And within the style tags, we can now list as many style definitions as required. Let us look at the details of how this is done. There is a special syntax for doing this. Now, these style definitions within the style tag must begin with a selector. The selector is the tag name to which a style definition refers. And within two curly brackets, you get a number of property value pairs where the property is separated from its value by means of a colon. The number of property value pairs within the curly bracket is not restricted. However, if you have several of them, they must be separated by a semicolon. Here is a simple style which would now apply to all h1 tags. The selector is the h1, the heading one tag. The property is color and its value is blue. This second example now applies to all paragraph tags within the same document. And now we have two property value pairs separated by a semicolon. The first has a property color, the value black, and the second property font size and the value 14 points. Now these style definitions can now be placed within the style tags. By the way, if you want to find out more about selectors, that is the various types of selectors and how they can be grouped, I strongly recommend to consult our e-lecture about CSS selectors. Having now defined some selectors with their property value pairs, we can apply them to our document. Okay, here we are. And now as you can see, we have the style tag within the header and inside the style tag, the two style definitions we've just defined in detail. The result over here is still the same. However, the advantage is that the two styles that are defined within the header, that is within the embedded stylesheet, now apply to all tags within the same document. And if you want to change a style, we only have to do it once in the embedded stylesheet and no longer in each tag. But what if we want to apply the same style to several HTML documents? Well, here is a solution. We would use so-called external stylesheets. Instead of defining the style in the header section of each HTML document where we need it, we define it once in an external file and load it together with those documents where it is used. To do this, we need a standalone link tag in the header section with the following central attributes. The first, the rel attribute is used to define the relationship between the linked stylesheet file and the HTML document. Rel equals stylesheet means that the stylesheet is persistent or a preferred style. And then, of course, we need the location of the stylesheet. And this is defined by means of the attribute hyperlink reference with the path of the stylesheet. Now, we used the stylesheet styles CSS. In fact, you can choose the name freely. And our stylesheet is located one level above our current document. And finally, the optional type attribute is used to specify a media text CSS type for a cascading stylesheet. From this external stylesheet, which is basically just a plain text file, all style definitions that are defined there can now be applied to a document as long as the HTML document has the link to the stylesheet in its header. The result is still the same. By the way, in an additional screencast, my senior research assistant, Nathalie Kiesler, explains how external stylesheets are created and how they can be applied, among others, to divisions within the HTML document. The advantages of using external stylesheets should be clear by now. Design decisions can change. Whenever designers decide to improve the design of a website, this can have a large impact on every page within a website. In a large site, such as the Virtual Linguistics Campus with several hundreds of thousands of HTML documents, this would have to result in a change of every page. For example, if the specifications for a typeface or a color are written into the HTML documents itself, this is virtually impossible. So the benefit of external cascading stylesheets is that one can change a color in a stylesheet file common to all pages in a website. And this, of course, improves website maintenance. It leads to a high degree of design consistency and, very importantly, it separates content from design. Despite these main advantages, there are also some problems with the use of CSS, especially in terms of browser support. Browsers are sometimes faulty as far as their interpretation of stylesheets is concerned, especially when more complicated rules are applied. Finally, we need to define the term cascading. Essentially, it means that there is a hierarchy, a cascade of styles. The lowest stylesheet in this hierarchy is the browser itself. That is, those styles that the browser will use by default, a certain font size, a certain color, and so on and so forth. The second in this hierarchy is the external stylesheet, and it includes, of course, the browser style. Number three is the embedded stylesheet, and the highest priority is given to inline styles. And the implication of this, well, rules can be overwritten depending on their place in the cascade hierarchy. When there is more than one style specified for an HTML document, all the styles will cascade into a new virtual stylesheet, according to the order from highest to lowest priority. To put it in a nutshell, inline styles override embedded styles, embedded styles override external styles, and so on. So if you want to apply any special effects and you have an external stylesheet, this is not a problem at all. Inline styles always override other styles, so use an inline style in your particular case. This e-lecture concludes our introduction to HTML and CSS. Having attended our e-lectures, HTML fundamentals, HTML text part one, and HTML text part two, which includes the discussion of lists and tables, the e-lecture about images and hyperlinks, and now this one about the use of cascading stylesheets, you should feel confident using HTML not only in its basic form, but even beyond. Of course, there are more tags and attributes and principles. For example, the new multimedia tags in HTML5 and the numerous properties with which texts can be formatted. We will introduce these principles and special effects when necessary, but for the moment this foundation should suffice as a basis. So thank you very much for attending this set of e-lectures.