CSS Tutorial

What are Cascading Style Sheets?

Cascading Style Sheets (CSS) give both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links appear. These style sheets can then be applied to any web page.
Definition provided by www.rustybrick.com/definitions.php.

Using CSS help make sure your fonts, backgrounds, text size, etc. are consistent throughout your web site. In this tutorial, you'll find a basic overview of the common tags for CSS.

External Style Sheet

An external style sheet is used when you want to apply the properties to multiple pages. This will allow you to change the look of an entire website by editing one file. Every page that you want controlled by this style sheet must link to it using the <link> tag inside the page's <head> tag. See example below:

The browser will read the CSS definitions from the file mainstyle.css, and format the page accordingly.

An external style sheet can be written in any text editor and must be saved with a .css extension.

Internal Style Sheet

An internal style sheet should be used when a single document or page has a unique style. You define internal styles in the head section by using the <style> tag, like this:

<head>
<style type="text/css">
b { color:green; font-size:15px; }
</style>
</head>

The letter 'b' represents the bold tag or <b>. Everything between the 'braces' is what will be used to render the bold tag every time you use it. color:green; translates to color equals green, next. font-size:15px; translates to font size equals 15 pixels, next.

Setting the Background and Text Color

To set the color for the background and text, use the following code:

Each CSS rule starts with a tag name followed by a list of properties. This simply means that the color of the text on your site will be blue and the background will be yellow.

When there is more than one style property in the list, you need to use a semicolon between each of them. Some also suggest that you insert a colon after the very last property as well. Notice how the semicolon is placed after the word "yellow".

Note that the style element should always be coded inside your page's <head> along with the title element. Never place it in the <body> of your page.

Setting the Font Face

Keep in mind that not all browsers display every font. So in order to work around this, you can tell the style sheet to have the browser display the first available font. For example:

body { font-family: Arial, Verdana; }
h1,h2 { font-family: sans-serif, "Times New Roman"; }

In this example, this is telling the web browser to display Arial for the body text. If Arial is not available on that browser, then it will display Verdana. If neither one of these fonts can be displayed by the visitor's browser then it will display the browser's default sans-serif font.

Setting Page Margins

CSS also allow you to set your page margins. See example below:

Want More Info?

This has been a very basic overview of CSS. If you want to learn more, visit w3.org's web site. They have one of the most comprehensive tutorials on cascading style sheets.

View Sitemap
Website FAQ's

FREE! FREE! FREE!
With every domain you register at WebsitePalace.com, you receive the following for free...

- 70 Web Templates
- Quick Blogcast
- Starter Page
- Domain Forwarding
- e-Book Software
- Complete E-mail
- Online Photo Filer