Create a Website
HTML
Dreamweaver
CSS Tutorial
JavaScript
FREE Hosting!
With every domain name
you register at DotEasy
you get FREE (no-ad)
one year hosting.
PLUS you get:
  • FREE Website Builder
  • FREE Blog
  • FREE Forum
  • FREE Photo Album
  • FREE Email Accounts
Get your FREE hosting today!
Home > CSS Tutorial
$0 Web Hosting

Cascading style sheet (CSS) is a style sheet language used to describe the presentation (ie. look and formatting) of a document written in HTML or XHTML. CSS was designed primarily to enable the separation of content from presentation. This separation can improve content accessibility, provide flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting and reduce complexity and repetition in the structural content.

Using CSS requires basic experience with HTML. If you are not familiar with HTML, please start with our HTML tutorial before moving on to CSS.

Which software do I need?

All you need is a simple text editor, ie. Notepad.

Benefits of CSS

There are 3 main ways CSS styles can be applied:

Internal Stylesheet

With this method, you are defining your styles in the HTML document, typically in the <head> section. For example,

The Code

<html>
<head>
<title>TITLE</title>
<style type=”text/css”>
div {
background-color: #333333;
color: #FFFFFF;
padding: 15px;
border-bottom: 5px solid #FF0000;
margin: 10px;
}
</style>
</head>
<body>
<div>
Content will be affected by the style rule above...
</div>
</body>
</html>

The benefit of this method is that the style definitions are only written once. In the above example, the definition will apply to any

elements on the HTML page.

This method is generally used when you want to apply similar styles to multiple elements on a page, but not on any other pages. To apply the same styles to elements on multiple pages, you should consider the external stylesheet method.

External Stylesheet

The ideal way to define styles for your HTML elements is to put the definitions in a separate stylesheet document. Then, any page that includes the CSS file will inherit the same styles.

Example styles.css

The Code

body {
background-color: #888888;
margin: 10px;
}

p {
font-family: Arial, Tahoma, sans-serif;
font-size: 10px;
color: #FF0000;
}
 

You simply save the css file with the .css extension. You can link the file externally by placing one of the following links in the head section of every (X)HTML file you want to style with the CSS file.

The Code

<head>
<title>TITLE</title>
<link ref=”stylesheet” type=”text/css” href=”path_to_style.css” />
</head>

Or you can also use the @import method as shown below,

The Code

<head>
<title>TITLE</title>
<style type=”text/css”>@import url (path_to_stylesheet.css)</style>
</head>

Advantages of External Stylesheets

  • Reduced file size – each CSS definition is written only once
  • Reduced bandwidth – web browsers will cache the contents of CSS file, so they don’t need to download the file again with each new page that uses it
  • Easier updating – you only have to change styles in one place for them to change site-wide
  • Separates the work of styling and creating content

Another benefit of this method is that it enables you to use different style sheets for different user agents (ie. print or mobile devices).

Inline Styles

You can write CSS directly into an HTML tag. For example,

The Code

<div style=”background-color:#FF3; border:1px solid black; color: red; font-size:14px; padding: 5px;”>Content</div>
 

This approach is very similar to the old-style HTML styling. This method is only appropriate if the styling is only one-time. If there is a possibility that you will use the same styling elsewhere, you should consider the internal stylesheet or external stylesheet instead.

Enjoy this tutorial?

1. Link to this page(copy/paste into your own website or blog):
2. Add this page to your favorite social bookmarks sites:
3. Add this page as your favorites. (Press Ctrl+D)