Today is

CSS - Cascading Style Sheets (Page 2)

Previous Next

Previously you had learnt about different types of stylesheets and how to use them in your html document. Now we will see how we can set each property. Just make a note, if you are using a separate file like style.css then you are using an external stylesheet. If you copy the content and place it inside tags <style></style> in the html document it becomes internal stylesheet and if you place the same content like style="background-color:blue;" then it is inline.

So in all the case we find the we have a html element, property and its value. The property and value are separated by a colon.

body { background-color: white;}

In the above code, body is the html element, background-color is the property and the value is set as white. You can place multiple properties for an element. Eg., to set the foreground text color you use color:black and the two properties are separated by a semicolon.

body {background-color: white; color:black;}

If the value contains a space inbetween use double quotes to make it appear as a single value.

body {font-family: "Times New Roman";}

If multiple tags take the same property separate the tag by a space and put the attributes together like

Till now we saw how we can define default styles to tags. What is you want to define a particular style for one element and a different style for another element. It is quite simple. You use the class selector. For eg. for one paragraph you want the background color as blue and for one paragraph you want the color as red.

In the above example we have seen p.red means paragraph with the style attributes give in red. If tagname is omitted you can use the same class for multiple elements. Eg. if you want h3 element to take the red background you can use the class="red" for h3 element provided in the stylesheet it is shown as .red{background-color:red} 

We saw the class selector, next we will see about the id selector. While the Class Selector can be used many times in the html file, ID selector can be used only once in a html file. ID attribute must be unique in a document.

The above rule will apply to paragraph element with sectionLinks as id.

The above rule will match the first element with id as sectionLinks.

Finally if you want to comment out few portions of the stylesheet you can use comments /* will not appear in netscape */

First we will start with background properties.

Example. We will see how we can set the Background information for the tag body.

Type the above code in style.css

Save the file and then include the file in index.html

Content of index.html

Open the file in browser and see what is happening. You will see that the background of the page is set as black and you will not see anything else in the page. If you do a Select All (using Ctrl+A) you will find that the text is displayed in black color and hence it is not visible. So to make the text visible, you have to set the text color as white. The can be done as follows:

Now view the page, you will see the text "Welcome everybody!!" in white color on black background. So this is how you set the style for body tag. Overall you can set the background property in a single line using

In the above code we see that background takes background-attachment, background-color, background-image, background-position and background-repeat properties. We will see each of them one by one. See the table below to find out how we can set the background attributes.

Next