HOME
stuff you never thought you wanted to know.

 

 
Introduction to Cascading style sheets (CSS)

Cascading style sheets

If you've ever created a Web site, you've most likely used a lot of <font> and other tags to control how your pages look. This ties the presentation of your site with its content, making it hard to modify your Web site design. If you later decide to change the color scheme or fonts used in your site, you'll have to edit every page in order to do this.

Cascading style sheets (CSS) provide a solution to this problem. Instead of defining the Web site design in each and every page, you can use a style sheet to control the overall layout of your site. Then if you want to change how your site looks, you simply modify the style sheet.

What do cascading style sheets look like?

Style sheets are made up of one or more rules that look something like this...
H1 {
  font-family: arial,helvetica;
  font-size: 12pt;
  color: green
}

Each rule begins with a selector, which is H1 in the example above. A selector is often one or more HTML tags, and the declarations inside the rule describe how those elements should appear. The above CSS codes will force all H1 tags on the page to use a 12 pt Arial or Helvetica font in green text.

You can also use classes as selectors, which aren't tied to specific HTML elements...

.orange {
  background-color: orange
}

Note that .orange doesn't mean anything special - you can use anything as a class name provided that it starts with a period and is composed of a single word (spaces and underscores are not allowed).

To apply a class to an HTML tag, you use the the class attribute (which was introduced in HTML 4.0). For example, to highlight important text on your page, apply the above style to a <p> tag...

<p class="orange">Cascading Style Sheets</p>

Note that the period before the class name is not included.

How to use style sheets?

There are three ways you can use cascading style sheets...

1) Embedding CSS codes into the style attribute of HTML tags. Most HTML tags now support this attribute, but by applying styles within your tags, you're missing out on the benefits of keeping your content separate from your design. For example...

<p style="background-color:orange">Cascading Style Sheets</p>

2) Embedding CSS codes using a style block in the HEAD section of your HTML document. A style block is composed of an opening <STYLE> tag followed by a set of CSS rules followed by a closing </STYLE> tag.

For example, you can make your text links change color when the mouse passes over them by inserting these CSS codes into the HEAD of your document...

<style type="text/css">
<!--
A:hover {color:red}
-->
</style>

While this method is better than applying styles on a tag-by-tag basis, it still ties the style to a particular HTML document.

3) Linking external cascading style sheets to HTML documents using a <LINK> tag in the HEAD section of every document you wish to apply the style sheet to. For example...

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

Once you've linked a style sheet to your pages, any changes to that style sheet will apply to every HTML document it's linked to. This is where the benefits of cascading style sheets are most apparent, since you no longer have to update every single page in order to overhaul your Web site design.

The drawbacks of cascading style sheets

Right now the biggest problem is the imperfect style sheets implementations that today's browsers offer. Although recent browsers include fairly complete CSS1 support, older browsers - Internet Explorer 3 and Netscape 4 in particular - are not only incomplete in their CSS support, but what they do support is often very buggy as well.

This makes it very difficult to create CSS codes that work across all browsers, since what looks good in one browser may look awful in another.



Linux
Setup Software Raid 1 with LVM
Setup Linux with Desktop

Google
Manage your website ads with DFP
Google AdSense for Domains - not so great
Let Google Handle Email for your Domain Name
Page Rank banned by Google
Google's highest ranked web pages
SEO intelligent spam causes irrelevant search results
Google Sandbox
Google ranking factors
How to not give out page rank in web page links

Web Server Programming
Simple Java web server
Simple Python web server
Configuring Apache webserver with .htaccess file

Windows
Turn off the loginscreen in XP, after installing .NET .

Turn off xp login screen unread mail count
What is .NET

Web (webmastering)
Introduction to Cascading style sheets (CSS)
The value of Alexa traffic rank
HTML META tag, not a search engine optimization tool
Create a maintainable webpage with modularization
The www prefix in your domain name
What is RSS and cool things RSS can be used for
MySql backup and restore with phpMyAdmin

Mix Computer related text
Doing business (making money) with Information Technology
Business with Computer Science
Research in Computer Science
Current and future possibilities of Medical Informatics
Tasks that make sense to have automated
Programming handheld mobile devices (overview)
Security tips for the web surfer
Price and Capacity in computer hardware
Java RMI Tutorial.

Microsoft Word
Page numbering in Word
Numbering headers or outlines in Word
Create a List of Figures
Turn off the default collapsing menus in Word




Turtlmeat.com 2004-2011 ©