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.

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

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 tags.
Linked CSS - A linked style sheet, on the other hand, is a completely separate document that is linked to within a web page.
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.

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:

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://www.yourdomain.com"STYLE="TEXT-DECORATION: NONE">Your Link</A>

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

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.

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


Resources

SPONSORS