 This short screencast will familiarize you with the basic concepts of CSS and how you can use it. For this reason, we will proceed with the following steps. How to get started and which editor to use, how to type CSS in an editor, how to include CSS styles, and how to view the results of changes, and how to include external style sheets. Then we will finish with how to continue. First of all, you need to know how you can create and edit CSS styles. Internal styles and embedded styles are inserted within HTML documents. Thus, they can be edited the same way as HTML documents. The same is true with regard to external style sheets. This means you can either use a simple editor which you have installed on your computer, or you can download an editor from the internet. We will use Notepad++ Portable again because it highlights HTML and CSS syntax. A more professional and costly program is Adobe Dreamweaver, which allows, for example, the insertion of styles and properties which use the correct syntax of CSS by default. Finally, we need a browser again because this is how we can see the styles of our document and how we can display changes in our styles. All CSS instructions have the same basic structure. They consist of a selector, which is an HTML tag in this example, H1. They consist of one, two, or many more properties which are included in the curly brackets. All of them are referred to as declaration. The properties take a value. Some values can be written in different formats, but you will learn about that later on. You also need the double dots, which have to be used to separate property and value. In order to separate one property and its value from the next property and its value, a semicolon has to be used. The integration of CSS is possible in three different ways, via inline styles, via embedded style sheets, or via external style sheets. As shown in the diagram, there is a hierarchy in these different style definitions. It is due to that hierarchy that you do not need to control all styles, but always consider the browser defaults. Let us now look at these three possibilities in more detail. What you need to know about inline styles is that their usage is not advantageous, because the content is mixed with its presentation, which is why it should only be used rarely. But if you want to use inline styles anyway, you just need to insert the style attribute in the relevant tag. The style attribute can contain any CSS property. Embedded or internal style sheets are applicable to the document which contains them. They consist of a set of style rules which are defined within the style tag, and the style tag is inside the document header. The embedded or internal style sheet should only be used in case a single document has a unique style. External style sheets consist of a set of rules which are contained in a separate file. This separate file is saved with a suffix.css. In order to apply a style sheet to an HTML document, the link tag specifying the URL of the CSS file has to be added within the document header. By including the relevant link tag in all HTML pages of a complex website, it is possible to define the entire website with a single style sheet. Thus, it is ideal whenever you want to apply the styles to many pages. Let us now experiment with these different possibilities. First of all, we apply the inline style in our very first HTML document from our earlier sessions. Just open it in your editor. The editor I used is notepad++ portable again. And open your document. First of all, we want to change the display of our level one headline. So we need to include the style attribute within the opening tag of the level one headline. I'm going to change the color to purple and I'm going to change the font size. And I'm going to include a border for my level one headline. It should be one pixel thick, solid and have the color blue. And that's it. Now we have to save our HTML document again and check for changes in the browser. And as you can see, my level one headline has become purple and it has a nice blue frame and the size of the font also changed. Now I want to change some other tags, the P tag for instance, and it's the very same story. I insert the style attribute within the opening tag of the P tag. And I'm going to use the very same syntax and I'm going to change the font family this time. To bedana, Geneva, and San Serif. I'm going to save my document and I'm reloading it in the browser. As you can see, the font family has changed. So that was pretty easy, wasn't it? Let us now work with the embedded or internal style sheets. And as you already know, it needs to be defined within the style tag which is inside the document header. So you can open your style tag. It has the attribute type. The type is text slash CSS. Close the style tag. And within the style tag you can apply the regular CSS syntax. We have our selector. We want to change the body. We use the curly brackets. And in there we write our properties with their values. I want to change the font size for now to 10 points. I want to change the color to blue. The text declaration is supposed to be underline. And I want a text transformation because I want everything to be displayed in uppercase. So let's save our document again. And open it in the browser. So as you can see, every letter and every writing within the body has become blue, underlined, and uppercase. Except for the level one headline because there we defined an inline style and the inline style is at the top of the hierarchy. So this is why the level one headline is still purple and 22 points large. Third possibility of including style sheets is the external style sheet. For this reason, we will open a new file in the editor in a second and type in the selectors we want to change in there. Let us use a new division first of all for the entire body of the HTML. Its name is content and close the division. And within our new CSS document, we will refer to every tag that is within the division with the ID content. So now we will go to our new document and define styles for several tags within the division content. And I suggest we change the level one headline, the paragraph and the display of the anchor tags within our basic document. So first of all, we need the right CSS selector for the IDs, which is the hashtag. We need to refer to its name, which is content. And then we can refer to the HTML tags we want to change. So let's start with the level one headline. Then we can continue with the basic CSS syntax. In this example, we want to change the font size to 30 points and the color to blue. We want to change the P tag as well. The font size should become 14 points and the font weight should become bold. And next tag we want to edit is the anchor tag. Since we have a hyperlink in our HTML document, we can change that too. And let's assume we want to get rid of the underlined hyperlink. Then we say text declaration none. And we can also use a special effect, namely when somebody hovers over an anchor tag. Then we can say we want the color to change, for instance. Now after we've made these changes, all paragraphs, all level one headlines and all anchor tags within this division named content will be styled by these new style selectors. Now that we typed the CSS styles into a separate file in our editor, we need to save the document. You need to make sure that you use the correct suffix, which is .css. Another aspect that needs to be considered are the file names you are choosing. Like in HTML, you cannot capitalize letters, you cannot use spaces and you cannot use special characters. If you do, it will cause errors and problems. Let us now save our new document with regard to these criteria. Make sure you use the same file name in the URL of your link in the next step. So I'm going to name my file styles.css. And now you can immediately see that syntax of CSS is highlighted and everything is okay. Now, as I already mentioned, as a second step, we need to link our CSS document to our respective HTML document, which is in my case my first HTML document. And we need to include the link within the document header. We need to give the URL of the style sheet, which is in my case styles.css, because I didn't use subfolders or another folder hierarchy. And now I need to save the document again and I can reload it in the browser. And as you can see, my headline has become blue. My text within the paragraph is bold now. And here is my hyperlink. It's not underlined anymore. And when I hover over it, it becomes pink. So that's it. Similar to HTML, CSS code should be structured visually too. It will give you a better overview over the properties and their values and to which selector they belong. This is why we are going to insert a number of line breaks and line up all of the properties that belong to one of the same selector. And that's it. Another point worth consideration is the use of comments, especially when you're still learning new CSS properties. It allows you to write any text into your document without disturbing the CSS syntax or the display in the browser. Writing comments in your editor is fairly simple. You just need the slash and the little star. Open it and close it. And as you can see, by means of the highlighting of the syntax, everything is still correct. And within these signs, you can write your comment such as division, name is content. In case you don't memorize it, you can also write comments for yourself, like a hover means whatever you need. And as you can see, it helps you to structure your CSS files. If you have very long documents with many, many style declarations, many divisions, many classes, you can insert comments to memorize all of your declarations and your ID names, for instance. So now you have learned everything about the use and integration of CSS styles. And always remember, changes to a CSS document are only visible in the browser after saving the document again and reloading it in the browser. That's all for now and have fun getting started.