Create a Basic CSS Stylesheet
Oct 20th, 2011 by Jenn
CSS is the way most sites control their look. You have already witnessed the power of CSS through the site CSSZenGarden at : http://www.csszengarden.com/ . Now we look at how to create a basic css style sheet. Once again we will suggest the wonderful teach site at http://www.w3schools.com/css/default.asp to help you along as well. They have areas there to try out different calls and see the results.
Firstly, CSS style sheets are always called style.css. They are always a plain text file. So they can be opened, edited and saved with just a plain text editor, no need for a full graphics program. Understanding the basic parts of a CSS style sheet will make it easier to play around with and customize the style sheets that come with themes for websites, blogs and more online.
At it’s most basic the following is a full CSS style sheet.
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:”Times New Roman”;
font-size:20px;
}
It is formatting the pages by giving them a background colour. Next it sets up a colour and alignment for all the headers on the page. Finally it set up a font family and size for the text that appears on the page. Well done you now have a CSS Style sheet.
Now that you have a style sheet how do you use it? There are three way to insert a CSS style sheet into a site or web page.
External Style Sheet
Internal Style Sheet
Inline Style
Using any of these methods will cause the browser to pull all the styling elements for your pages from the style sheet indicated. The first thing to know is the ranking of these sheets, meaning which sheet overrides which. Highest priority is given to the inline style which will override any other style sheet’s commands. Next is the internal followed by the external and last would be the browser’s default style sheet. This is important to know so that you can control small sections of a specific page on a whole site if needed through inline or internal style sheets, while the rest of the site continues to follow the main external style sheet.
First let us look at the external style sheet which is most often used. This is most commonly used because it is ideal when used to apply a style to multiple pages. Also by using an external style sheet, you can change the look of an entire web site by changing only one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section like this:
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. You also need to avoid leaving leave spaces between the property value and the units, “margin-left:20 px” instead of “margin-left:20px” will work in IE, but not in Firefox or Opera.
Next we look at internal style sheets are used for single document styling. Say one page of your website needs to be different from the rest of the site then this one solution. The internal style sheet is contained within the head section of the page’s html using the <style> tag, like this:
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
Inline styles are given the highest priority but they are also the most diluted form of style sheets. You want to use them sparingly. Simply by using the style attribute in the relevant tag you create an inline style. The style attribute can contain any CSS property. For example this inline style changes the color and the left margin of a paragraph:
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
So summing up the basics of CSS style sheets, using them can help you create easily customized pages and sites with a single page to edit. You can override the main external style sheet with internal or inline calls or even by calling a different style sheet in that page’s head section. The style sheet is there to style your pages it only effects how things are presented not the actual content in and of itself. By learning how to work with style sheets and customize them you will open the door to creativity in your web designing.
Next time we will look at the basic calls for CSS sheets, to help you further understand and utilize this powerful web designing tool.