Lesson 10: CSS - Cascading Style Sheets  

     Why You Should Use CSS     

CSS (Cascading Style Sheets) is an additional markup language used to add presentational styles to all the available HTML elements. There are two major reasons why you should use CSS.

1. More Possibilities: CSS give you many more options than the available HTML attributes for adding background colors and images, manipulating font styles, sizes and colors and defining margins. Before CSS, a web author would use blank images to indent paragraphs and other ugly tricks. You can also set individual border colors and sizes for each cell of a table and use background colors and images for table cells - something you couldn´t do with HTML alone.

2. More Flexibility: CSS make your life as web author much easier. For example, you can define the font style, size and color of the headings of all your webpages in one single document and when you want to make changes, you just need to change one single document instead of hundreds of pages (if you have a large website). And this applies to all presentational properties of all your HTML elements (such as paragraphs, headings, lists, tables, forms, images and all the inline elements) of course.

     How to Use CSS     

The purpose of this lesson is not to explain all the different CSS properties, because this would take much too long and you´ll forget most of them anyway. The important things you need to know are the basic rules for implementing CSS on your websites. For all the available CSS properties you have a complete and well organized reference list inside your HTML editor 1stPage2000.

CSS styles can be declared on three hierarchy levels:

1. Inside an external stylesheet file, to declare the same style informations for all elements on all webpages of a website.
2. Inside the HEAD section of a single webpage, to declare style information for all the elements of the given webpage only. These style declarations will override the global ones declared in 1.
3. Inside the opening tag of each single HTML element within a webpage. These will override the style declarations of 1. and 2.

   Applying CSS to individual elements   

To add styles to a single element within a webpage, you need to use the attribute STYLE. The value of this attribute can contain several style declarations separated by semicolons. Each style declaration is composed of a CSS property, a colon and a value for this property. The example style declaration shown in the graphic below sets the font size of this paragraph to 16 pixels and the text color to blue.

Let´s have some fun experimenting with different styles that you can add to text in paragraphs and headlines. You will also learn how to use the inline element SPAN. This element was introduced into HTML to allow authors to add style information to content within other HTML elements, for example a single word within a paragraph. The SPAN element itself has no structural meaning and is most frequently used in combination with attributes for CSS styles declarations (STYLE, ID, CLASS).

In the table below are some common CSS properties for text ( like the styles declarations for different fonts, text colors, sizes, background colors, text alignment and line heights ) and their possible values.

These CSS properties may be used in all elements (block-level and inline), except "text-align", which may be used only in block-level elements. For a complete list of available CSS properties, please see 1stPage2000´s CSS reference (the video shows you where you find it).

Watch the video now and see how you can add the above CSS properties to text formatting HTML block-level elements like headings and paragraphs and also to inline elements and the generic inline container SPAN.

Video button not working ? Click Here

 CSS for the BODY element 

Next, let´s take a look at some important CSS properties for the BODY element.

Watch the video to learn how to apply the above CSS properties to the BODY element and see how they affect the formatting of your webpage.

Video button not working ? Click Here

 Formatting Tables with CSS 

Now let´s take a closer look at the CSS properties which are most frequently used to format HTML tables. The attributes below may not only be used in the TABLE tag, but also in the TR and TD tags, which allows for a very flexible table formatting.

Watch the videos for some practical examples

Video button not working ? Click Here

 Formatting Lists with CSS 

Below are the most commonly used CSS properties for lists and some examples.

Confused ? Don´t worry, I´ve put a couple of different examples for different list styles on a single webpage, so you can study the HTML code and see how the same list is formatted differently.

Examples For Different List Styles

If you want, simply write a short HTML list yourself and play around with the different list styles.

 The  DIV  Element 

Similar to the SPAN element, which you have known as a generic inline container, the DIV element is a generic block-level container and frequently used to apply styles to certain blocks of content inside an HTML document. It may contain inline elements and also block-level elements, including DIV itself.

Frequently used CSS properties for the division element are ones that you already know, such as: border , padding , margin , text-align , width, height, float and background.

The video shows you some practical examples for the division element in combination with CSS, for example how to put parts of your webpage content into blocks with or without borders, how to make the remaining content flow around these blocks and how to position tables and other division blocks.

Video button not working ? Click Here

   Declaring styles inside a document´s HEAD   

Now that you already know a couple of styles properties and their values and how to compose the styles declarations, the remaining two parts of this lesson should be pretty easy for you. You see, it would be a lot of work if you had to add the styles information to each single element inside a webpage. Now you will learn how to declare the styles information for all HTML elements of a webpage only once - inside the HEAD section.

To declare style rules for an entire individual document, you need to use the STYLE element inside the HEAD section of a webpage. The STYLE element optionally may also contain the attribute TYPE with the value text/css (see example below).

CSS rules are composed like this:
selector { property-name: value;  property-name: value }

Any HTML element can be a selector. For example, the following style rule would format the text of all the paragraphs on a webpage in the font "arial", with a size of 14 pixels and in blue color.

p { font-family: arial;  color: blue;  font-size: 14px }

 Grouping Different Selectors 

You can also declare the same CSS rule for more than only one selector (HTML element names) by simply adding more selectors, separated by commata. The rule below sets the same styles for paragraphs, list items and table data cells at once.

p, li, td { font-family: verdana;  font-size: 12px }

 Contextual Selectors 

Contextual selectors give you even more flexibility in applying CSS to your webpage content. They are simply two or more selectors separated by a white space. For example, in the following rule, the contextual selector is p b:

p b { background: yellow }

Its function is to give only the bold text inside paragraphs a yellow background. Bold text inside other elements like headings and lists would be unaffected by this style rule.

 Class Selectors 

Class selectors also give you a lot more flexibility. Classes may be declared with an associated element in order to style different occurrences of the same element in different ways. For example, if you have some paragraphs of text that you want to style differently from the others on the same webpage, then you could use different classes like shown below:

p.quote { font-size: 14px; font-family: verdana; color: green }
p.joke { font-size: 14px; font-family: arial; color: blue }

The above rules create two classes, quote and joke, which may be used only for the element P. It´s a good practice to name the classes according to their function rather than the appearance. In the above example, the class quote will be used to style the quotes on a webpage in the font "verdana" and in a green color.

To use one of the above classes for a paragraph on the given webpage, you need to add the CLASS attribute to the opening paragraph tag and the class name as value, for example:

<p class="joke">

You may also declare classes without an associated element. These can then be used for any HTML element. For example:

.joke { color: blue; line-height: 150%; margin-left: 20px }

Now you can use the class joke for all elements, not only paragraphs.
<h1 class="joke">
<p class="joke">

Watch the video now to see how I write the style declaration for an entire webpage into the HEAD section of this webpage. You can do this yourself with your first webpage, where you should already have a couple of occurrences of different HTML elements and some content, too.

Video button not working ? Click Here

   Using an external stylesheet   

The best place for declaring the styles of an entire website (i.e. for all webpages at once) is in an external stylesheet. This way, you won´t have to repeat the styles information inside the HEAD section of each individual webpage and you would only add CSS to the HEAD section of those webpages (if any) that you want to style differently from all the other pages of your website. Remember that the style rules inside a document override the global style declarations. A simple example would be that you have the text color for all your headings on your entire website set to a blue color but you want green headings on one specific webpage, so you would only declare the heading styles for this document inside its HEAD section.

An external stylesheet is a simple text file, that contains all the CSS rules for your website. The CSS rules are written in exactly the same way like inside the HEAD section of a webpage. To create the stylesheet, simply open a blank document in your favorite text editor and then write only the CSS rules ( without the STYLE element ) into this document. Then save the file as "whateveryoulike.css". Usually I name my stylesheet files styles.css  .

Next, you need to link your webpage to this external stylesheet, using the following line of HTML code inside the HEAD section (replace "styles.css" with the file name of your stylesheet file, in case you named it differently). Add this to every webpage that you want to connect to the external stylesheet.

The LINK element declares a relationship between a webpage and an external document. rel defines the nature of this relationship and href the URL of the external document (may be an absolute or a relative path), so in this case the relationship says that the file styles.css is a stylesheet for this document. The optional type="text/css" describes the content type of the linked document.

You can also write comments inside stylesheets. This is pretty useful when you have large stylesheets that contain lots of styles for the content and the layout of your webpages. Comments in stylesheets are written differently from HTML comments - like this:

/*  I am a comment  */

Watch the video now and see how I create an external stylesheet and also how I link my webpage to this external stylesheet.

Video button not working ? Click Here

Wow, you´ve already learned a lot. I guess you are happy to hear that we are now leaving the dry theories and go to the practical part of this guide - Let´s put the pieces together ! In the next lesson I´ll give you some useful tips for planning your website layout.