html tutorial, internet tutorials

  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).

  Property     Possible Values  &  Examples  
font-family Generic or specific font family names. You may declare more than one alternative font-family, separated by commata. If you want to use specific fonts, it would be good to also declare alternative, more generic font-families.

font-family: comic sans ms
font-family: arial, helvetica, sans-serif
font-size Length units (px, pt, em) or percentages and also relative and absolute size names like "smaller", "bigger", "xx-small", "x-small", "small", "medium", "large", "x-large" and "xx-large"

font-size: 14px
font-size: 130%
color Any of the 16 color names or hexadecimal codes prefixed by "#"

color: #000099
background-color same values as the color property
line-height integer numbers ( line height = x times the font size ) or better: percentages ( line height = x % of the font-size ).

line-height: 150%
text-decoration underline / overline / line-through / blink

text-decoration: underline
text-align left / center / right

text-align: center


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
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.

  Property     Possible Values, Description & Examples  
background You may use any of the 16 color names or the hexadecimal color codes. Alternatively, you can also specify a background image - for this purpose, the value would be: url (path_to/image.jpg). The image path can be either an absolute or relative URL.

Examples for background images with relative and absolute URLs:

background: url (images/bkg.gif)
background: url (http://www.easywebtutorials.com/images/bkg.gif)


Example for a background color:
background: #FFFF00
margin Sets the margins of HTML elements. Values can be length units (px, em) or percentages. Between one and four values (separated by a blank space) may be defined in one margin declaration. If only one value is given, it applies to all four sides. If four values are given, they respectively apply to the top, right, bottom and left sides. If only two values are given, the first applies to top and bottom and the second to right and left sides.

Examples:

1. A margin of 10 pixels on all four sides:
margin: 10px

2. 10 pixel for top and bottom, 20 for left and right margins:
margin: 10px 20px

3. 10px top, 20px right, 30px bottom and 15 px left margin:
margin: 10px 20px 30px 15px


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
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.

  Property     Possible Values, Description & Examples  
width Sets the width of a table or table data cell, either with a length unit or percentage.
height Sets the height of a table or table data cell, either with a length unit or percentage.
border-style To add a border around an element, you need to specify at least the border-style property, because the default value is "none". For the border style you may use between one and four of the following values: solid, dashed, dotted, double, groove, ridge, inset, outset.
If only one value is given, it applies to all four borders. If four values are given, they apply to the borders in the sequence top, right, bottom, left. If two or three values are given, the missing values are automatically taken from the opposite side.

Examples:

1. dotted border - all four sides:
border-style: dotted

2. solid border for top & bottom, double border on left & right side
border-style: solid double
border-width Specifies the border thickness, either with a length unit or with one of the following three keywords: thin, medium, thick. Just like for the border-style property, you may specify between one and four values which apply to the four different sides.

Examples:

1. 5 pixels thick border, all four sides:
border-width: 5px

2. border top: 5 px; right: 2 px: bottom: 2px; left: 5px
border-width: 5px 2px 2px 5px

3. 5 pixels thick top border and all others 2 px
border-width: 5px 2px 2px
border-color Sets the color of an element´s border. Between one and four values may be specified. For the color you may use any of the 16 color names or any hexadecimal color code prefixed by "#".

Examples:

1. All four borders in dark blue:
border-color: #000099

2. Top and bottom border in blue, right and left border in red:
border-color: #0000FF #FF0000    or
border-color: blue red
border The border property is a shorthand for setting the 3 different border properties border-style, border-width and border-color at once. Hence it´s a faster way for setting the border properties of an element, but the disadvantage is that you can only define the same values for all four border sides with this property.

The three values are defined in the sequence "width - style - color" and the different values are separated by a simple blank space.

Examples:

1. 5 pixels thick, solid, green border:
border: 5px solid #00FF00    or
border: 5px solid green

2. 2 pixels thick, dashed, black border:
border: 2px dashed #000000
border-spacing This property is supposed to replace the CELLSPACING attribute in the TABLE tag, but unfortunately it is not supported by Internet Explorer 6, - the most widely used browser - and its earlier versions. So I recommend you don´t use this CSS property and continue using the CELLSPACING attribute if you want to add space between the different table data cells.
border-collapse By default, there´s one pixel space between the borders of table data cells. While CELLSPACING="0" only removes the space between the borders and joins two 1px thick borders to a 2px thick border, the CSS property "border-collapse" collapses the borders, so two 1px thick borders become one 1px thick border (see video).

This property is used inside the TABLE tag and may take one of the following values: collapse / separate (default)

Example:
border-collapse: collapse
padding When used inside the TD tag, the padding property has the same function as the attribute CELLPADDING inside the TABLE tag. Between one and four values may be specified and the values may be in a length unit or a percentage. And of course, you may use the padding property not only inside HTML tables but in all other HTML elements, too.

Examples:

1. 10 pixels padding from all four sides inside a table cell:
padding: 10px

2. top: 10px, right: 5px, bottom and left: no padding:
padding: 10px 5px 0 0
background Same function and values as described above in conjunction with the BODY element´s background. With CSS you are now able to set different background colors or images for each individual table data cell.


Watch the videos for some practical examples

video
Video button not working ? Click Here


 Formatting Lists with CSS 

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

  Property     Possible Values and Description  
list-style-type This property allows you to use some more list item markers for your lists in addition to the bullets and ordinal numbers you already know from unordered and ordered lists.

Possible values that are supported by most browsers are: none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha. These values can be equally applied to ordered and unordered lists, being disc the default for unordered lists and decimal the default for ordered lists.

list-style-image This property allows you to use any image as list item marker. The value is url(URL), being "URL" an absolute or relativ path to the image file.

Examples:
list-style-image: url(images/arrow.gif)
list-style-image: url(http://www.easywebtutorials/tick.gif)
list-style-position Determines where the list item marketer is placed in relation to the text. Possible values are inside and outside, with "outside" being the default.
list-style a shorthand property for quickly setting the above three CSS properties in one declaration only. Values for the list-style property may be "none" or a possible value for one, two or all three of the above properties (list-style-type, list-style-position, list-style-image) in any order.

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
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
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.

<link rel="stylesheet" href="styles.css" type="text/css">

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
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.


previous lesson top of page next lesson


    Web Design

  • Design and market your own professional-looking website with easy-to-use tools.

  The Lessons  

Introduction
Skills & Tools
HTML Basics
The Head Section
The Body Section
Images
Anchors & Links
Lists
Tables
Font Styles
Cascading Style Sheets
Website Layout
Domainname Registration
Website Logos & Buttons
Main Webpages
Legal Documents
Web Hosting Providers
Publishing Your Website

Editing Images


Glossary

FAQ / Support

Resources


Cheap Website Hosting
DailyRazor offers a full featured hosting plan for only $ 1.66 per month. Best choice for people on a low budget for hosting one website.

Multiple Site Hosting
Some webhosts allow you to host several different websites under one hosting account. This makes your hosting costs per site very cheap. My favorite webhosts:
Bluehost
Hostgator
Lunarpages

CSS Tutorial
"Styling with CSS" is a comprehensive and easy guide to web design with CSS for beginners. Highly recommended book that should be on your shelf.
Buy it from Amazon.

Home   :::    Contact   :::    Advertise   :::    Submit Tutorials   :::    Links   :::    Sitemap
Terms of Use, Disclaimers, Privacy Policy
© 2005-2009 EASYWEBTUTORIALS.COM
Page copy protected against web site content infringement by Copyscape