CSS Basics

The need for CSS.
As we saw in the previous chapter XHTML removes all stylistic markups from the HTML part of the document. This is a worthy goal, but in absence of any stylistic markup, other mechanisms of styling a XHTML document are needed. CSS was born out of this need.

The advantages of CSS.
When you change your documents to use CSS, you are getting a lot of flexibility with your design. Traditional table based layout has been very binding, but with CSS you get pixel level control of the size of each element. Most of the attributes can be applied to each of the XHTML tag.
CSS allows you to quickly change the look of entire site, without changing any XHTML part, as the CSS is generally independent of the XHTML. I would strongly recommend that you visit www.csszengarden.com to see how flexible CSS design can be.

How CSS works?
With CSS you need to specify the styling you want to attach to each element. Say you want to make your page with a yellow background, the CSS declaration would be,
body {background-color:yellow;}.
This is the general structure of a CSS declaration,
selector{property:value;}.
So in the above example body is the selector, background-color is the property yellow is the value.

What can be selectors?
You can have an element selector, a class selector or an id selector. The type of selector you will use depends what you need to style.

The element selector.
Element selector, also called simple selector matches a tag from the xhtml document. Suppose you wanted to make all text within <h2> tags bold. Then you will need to use the element selector, h2.
The full CSS for this would be,
h2 {font-weight:bold;}

The class and id selectors.
Simple selectors are great when you need to apply the same style to same tag. But within your document you may need to give different styles to same element. For example you may need to make some of your <h2> text green and other <h2> text blue. This can not be achieved by simle selectors. A class selector or a id selector is needed here.
Class selectors are defined by adding a period before class name. So CSS declarations for changing text colors are,
.green{color:green;}
.blue{color:blue}
You must add a class attribute to your <h2> tag to style them as in <h2 class=”blue”> or <h2 class=”green”>.
A div selector is defined by adding a hash(#) before the id name. So id can be defined as,
#footer{width: 200px;}.
If you need to apply a style to only one type of element, you should add the element name before that class name. So to make a selector with only <p> elements with class green you need to define your CSS as,
p .green{color:green;}
A class cab appear any number of times in the document while one id can appear only once.

Grouping selectors together.
Suppose you wanted to make all texts within <h2>, <h3>, <h4> bold, then instead op writing them separately, you can write them as
h2, h3, h4 {font-weight:bold;}

Adding CSS to XHTML documents.
You have learnt to define CSS but without ability to link them to XHTML documents, you cannot change the look of your document. CSS styles can be added to XHTML documents by using either external files, using <style> element and inline styles.

CSS using external files.
CSS styles can be added to a document by using a <link> tag. The basic link tag is,
<link rel=”stylesheet” type=”text/css” src=”style.css” />
The type attribute defines the mime type of the file and it must be set to text/css. The src attribute sets the source CSS file to be used.

CSS using <style> tag.
Using the <style> tag you can put your CSS declarations within the XHTML document. The <style> tag must be used within the head element of the document. An example of CSS using <style> tags is,
…….
<head>
<style>
h1{font-weight:bold;}
</style>
……

Inline CSS styles.
If you only want to apply a style to a very specific part of the document, you can use inline styles to style that specific tag. The style attribute is used to give an inline style.
<h1 style=”font-weight:bold;”>

Generally external files should be preferred as they allow maximum flexibility.

Summary.
In this chapter you learnt about the basics of using CSS. In next chapter we will see the specific CSS properties and how to use them.


Main Menu XHTML CSS Basics CSS Properties CSS Layouts Finally XHTML Articles CSS Articles	CSS Basics The need for CSS. As we saw in the previous chapter XHTML removes all stylistic markups from the HTML part of the document. This is a worthy goal, but in absence of any stylistic markup, other mechanisms of styling a XHTML document are needed. CSS was born out of this need. The advantages of CSS. When you change your documents to use CSS, you are getting a lot of flexibility with your design. Traditional table based layout has been very binding, but with CSS you get pixel level control of the size of each element. Most of the attributes can be applied to each of the XHTML tag. CSS allows you to quickly change the look of entire site, without changing any XHTML part, as the CSS is generally independent of the XHTML. I would strongly recommend that you visit www.csszengarden.com to see how flexible CSS design can be. How CSS works? With CSS you need to specify the styling you want to attach to each element. Say you want to make your page with a yellow background, the CSS declaration would be, body {background-color:yellow;}. This is the general structure of a CSS declaration, selector{property:value;}. So in the above example body is the selector, background-color is the property yellow is the value. What can be selectors? You can have an element selector, a class selector or an id selector. The type of selector you will use depends what you need to style. The element selector. Element selector, also called simple selector matches a tag from the xhtml document. Suppose you wanted to make all text within <h2> tags bold. Then you will need to use the element selector, h2. The full CSS for this would be, h2 {font-weight:bold;} The class and id selectors. Simple selectors are great when you need to apply the same style to same tag. But within your document you may need to give different styles to same element. For example you may need to make some of your <h2> text green and other <h2> text blue. This can not be achieved by simle selectors. A class selector or a id selector is needed here. Class selectors are defined by adding a period before class name. So CSS declarations for changing text colors are, .green{color:green;} .blue{color:blue} You must add a class attribute to your <h2> tag to style them as in <h2 class=”blue”> or <h2 class=”green”>. A div selector is defined by adding a hash(#) before the id name. So id can be defined as, #footer{width: 200px;}. If you need to apply a style to only one type of element, you should add the element name before that class name. So to make a selector with only <p> elements with class green you need to define your CSS as, p .green{color:green;} A class cab appear any number of times in the document while one id can appear only once. Grouping selectors together. Suppose you wanted to make all texts within <h2>, <h3>, <h4> bold, then instead op writing them separately, you can write them as h2, h3, h4 {font-weight:bold;} Adding CSS to XHTML documents. You have learnt to define CSS but without ability to link them to XHTML documents, you cannot change the look of your document. CSS styles can be added to XHTML documents by using either external files, using <style> element and inline styles. CSS using external files. CSS styles can be added to a document by using a <link> tag. The basic link tag is, <link rel=”stylesheet” type=”text/css” src=”style.css” /> The type attribute defines the mime type of the file and it must be set to text/css. The src attribute sets the source CSS file to be used. CSS using <style> tag. Using the <style> tag you can put your CSS declarations within the XHTML document. The <style> tag must be used within the head element of the document. An example of CSS using <style> tags is, ……. <head> <style> h1{font-weight:bold;} </style> …… Inline CSS styles. If you only want to apply a style to a very specific part of the document, you can use inline styles to style that specific tag. The style attribute is used to give an inline style. <h1 style=”font-weight:bold;”> Generally external files should be preferred as they allow maximum flexibility. Summary. In this chapter you learnt about the basics of using CSS. In next chapter we will see the specific CSS properties and how to use them.
Copyright 2006 XHTML and CSS . All rights reserved.