How to make a CSS style sheet

25 October 2008 by varsha Tags: CSS,stylesheet

Style defines the appearance or presentation of a web page for example it can contains what font should be used for a particular paragraph in a page. Today, CSS styles became very popular by its power of layout control.

Benefits of CSS style Sheet:

• Reducing time: CSS have the ability to control the whole number of pages in a website.
• Simple and more flexible: CSS has its own syntax and is so easy to learn its commands.

There are many more benefits are there by using CSS and I have defined only a few things.

Preparation of a Cascaded Style Sheet:

The style can defined by two ways. One is Internal Style sheet. It will be defined within a web page and should be written for every single page of website.
Another method is External Style Sheet. It is a separate document with a file extension “.css”. It is a simple text file which can be written by using notepad. External style sheets are more advantageous than embedded sheets.

An example of how to make a external style sheet-

Open your windows notepad. Write your list of styles in the sheet and save it as “style.css”.
Below is an example styles that css stylesheet can hold

div#header {
width: 600px; //width of the div
height: 200px; //height of the div
padding: 10px; //push the contents around inside div by 10px
border: 1px solid #000; //draw a solid border of 1px thickness with color black
}

You can give any name for your style sheet but don’t forget to give the file extension as “.css”.
Now, we have to attach the sheet to the page(s)of the website.
Open the html page(s) which has to be controlled. Paste the following code at the header section of the page(s). i.e. the code should be placed anywhere between <head> and </head>.

Code:

To learn how to make a simple web page with CSS, please refer make a simple website using CSS style sheet