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.
All you need is a simple text editor, ie. Notepad.
Benefits of CSS
With this method, you are defining your styles in the HTML document, typically in the <head> section. For example,
<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
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.
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
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.
<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,
<head>
<title>TITLE</title>
<style type=”text/css”>@import url (path_to_stylesheet.css)</style>
</head>
Advantages of External Stylesheets
Another benefit of this method is that it enables you to use different style sheets for different user agents (ie. print or mobile devices).
You can write CSS directly into an HTML tag. For example,
<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.
