CSS Tutorial: An Introduction to Cascading Style Sheets

Cascading Style Sheets, better known as CSS, enable you to control the style and layout of a web page. They will enable you to specify link styles, fonts, margins, tables, colors, sizes, alignments and much more throughout your entire web page.

They can also be used to create a template like style sheet (stored within a separate file) that can be used throughout your web site. You can simply link to your style sheet within each of your web pages and have the ability to update the styles for your entire web site with just one file.

The Benefits of Using Cascading Style Sheets (CSS)

CSS will save you a great deal of time. When it comes to the Internet, there are really only two elements: Content and the way that content is presented. With HTML, we provide content, and define how that content will be presented within the HTML code. However, we are very limited as to what we can do with HTML.

Each browser is different and they see things differently. This is why webmasters are instructed from the very beginning to view their web pages in many different browsers, such as Internet Explorer, Netscape, Firefox, and Opera (among many others), to make sure that their web pages appear as they intended and expected them to from one browser to another.

Overall, the HTML code on the web page polices the content, and the CSS polices the HTML. This allows you to create web pages that are suitable for all browsers.

One of the best benefits of using CSS within your web pages is the ease of updating your web pages. If you'd like to make a change to your design, instead of having to change hundreds of web pages on your site, you can make one simple change to the CSS file, and it will automatically update all of the pages on your web site. CSS enables you to do in seconds what would take hours to do in HTML.

Creating Cascading Style Sheets (CSS)

Learning, creating, and working with CSS doesn't require much. You do not need any type of editor, as Cascading Style Sheets can be created using a plain text editor, such as Note Pad.

However, you will need a web browser. Internet Explorer and Firefox are the most popular ones, but there are many others. Once you create your pages and are using CSS, you must ensure that you view your web pages through multiple browsers to ensure they are displaying just as you had intended. Visit Any Browser to view your pages through different browsers.

You may also need a way to upload your pages to your web server. This is typically done with an FTP client, and there are many nice free one's available. You may also upload your files through the control panel of your web hosting service.

Internal and External Cascading Style Sheets (CSS)

CSS can be used in two ways. It can be used internally, which may be referred to as embedded or inline, or it can be used externally, which is often referred to as a linked style sheet. Ideally, you will be using linked styled sheets when you finish this tutorial.

The only time you may be using embedded CSS is if you would like to change an individual link or text, or have a one or two page web site. If you will have more than that, however, a linked style sheet is definitely the way to go.

CSS can be used in three different ways:

Inline CSS

Added to your standard HTML tags.

Embedded CSS

An embedded CSS is exactly as it sounds. The CSS code is actually placed within the HTML web page between the <HEAD> and </HEAD> tags.

Linked CSS

A linked style sheet, on the other hand, is a completely separate document that is linked to within a web page.

Prioritizing CSS and HTML tags

When using CSS, certain tags take precedence over others. Here's how the tags are prioritized:

HTML tags override all other tags.
CSS inline tags override embedded and linked tags.
CSS embedded tags override linked tags.
CSS linked tags won't override any other tags.

Formatting CSS Tags

CSS tags are formatted like this:

selector {property: value;}

The selector is a browser command and is followed by a property. The property is a word describing the selector, which further instructs the browser. The value specifies the value of the property.

Although this may sound a little confusing, CSS is formatted much like standard HTML. Let's compare the two formats:

HTML

<font size="12">

CSS

Selector Attribute Value

body{font-size:12;}

As you can see in the comparison diagram above, the Element is equivalent to the Selector, the Attribute is equivalent to the Property and the Values are the same.

Inline Cascading Style Tags

Inline cascading style tags are used within standard HTML code using the STYLE parameter. The following example will remove the underline of an individual link:

<a href="http://worldwebdesigner.blogspot.com" style="text-decoration:none;">World Web Designer</a>

Browser View:

World Web Designer

The STYLE parameter is added directly to your original HTML link code.

Inline style tags enable you to specify how each individual link will look.

Embedded Cascading Style Sheets

Embedded cascading style sheets (CSS) can perform the same tasks as the inline style tags. However, the coding is placed between the <HEAD> and </HEAD> tags within your HTML. You can specify how your entire page will appear including links, fonts, text and more, simply by using embedded style tags.

The following example will display your active text links (after a link has been clicked on) in a specific color. The hover color (when the mouse is placed over the link) will be displayed in an alternate color and the underline will disappear.
<STYLE>

</STYLE>

Browser View:
Example Link
(Place your mouse over the link to view this example.)

The above code will display all of your links in a specific style.

Notice the code is placed within the comment tags? Comment tags look like this:


The comment tags are used to prevent older browsers that don't support style tags from displaying the CSS codes within their page.

The great thing about embedding style codes is that you can create your own classes of code. What this means is that you can specify different styles throughout your page and then call them within your page.

For example, you can add a class of code to a paragraph selector like this:

<STYLE>

</STYLE>

Notice the text highlighted in bold? This is a class name I made up. You can call it whatever you'd like. Simply add .yourtext following your selector.

To put this style into action or call it, simply place the following code within your HTML where you would like the style to be used:

<p class="padding">

Keep in mind, the text you place after your CSS selector (.yourtext) must be the same name as the code you place to call the style.

For example, if your class code looks like this:
p.text
the code you use to call the style will look like this:
<p class="text">
See how that works?

Linking CSS

The linking CSS method involves creating a file that defines specific styles. This CSS file can be used throughout your entire web site to specify everything from body styles and headings to paragraphs and HTML tables.

This file might look something like this:
BODY {font-family: Arial;
font-size: 12px;}
H1 {font-family: Georgia;
font-size: 16px;
font-weight: bold; color: blue}
P { font-weight: normal;
color: blue}

This file should be saved as style.css and uploaded to your server where you store your HTML files.

When using a style sheet, you must place a link to your style.css file within your HTML between your <HEAD> and </HEAD> tags like this:
<html>
<head>
<title>Your Page Title</title>
<link rel=stylesheet href="http://www.yourdomain.com/style.css" type="text/css">
</head>
<body>
Page Content
</body>
</html>

You can link to your style sheet within as many of your pages as you would like. This will give you the ability to update all of your pages at one time, simply by changing the styles within your style.css file

Next -->>

Sunday, April 10, 2011

CSS Tutorial ( Cascading Style Sheet )