Beginners guide to CSS
CSS explained in our Beginners guide to Cascading Style Sheets
In our beginners guide to web site development we have explained how you use HTML to structure your web pages, so you can control the way a browser displays your pages with a style sheet. If you have ever done word processing in Microsoft Word than you know the enormous advantage you get from using styles in your document, and it is not different for web pages.
The style guides in web site development are called Cascading Style Sheets or CSS. They are called Cascading because the styles that you put in a CSS file for a page element will override the default styles that your browser has for these elements, while you can override the styles in your CSS file by providing display information in the HTML of a page.
The most common way of calling a style sheet from your HTML is by putting the following in your Head section:
<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">
This is another HTML element that does not have an end tag and it tells the browser to download the css file style.css. So let's have a look what such a CSS file would normally contain
Cascading Style Sheets
In general the content of a CSS file consists of lists of properties and values for some of the page elements of your web page in the format property:value. For instance:
p { font-size:large ; color:blue; }
specifies that you want your paragraphs to be displayed in a large font size (default is medium) and in the color blue. You can see that propery-value pairs are separted by a semi-colon. The identifyer before the curly bracket P is called the selector because it specifies to which page element this list of properties should be applied.
Most used types of CSS selectors
Selectors in CSS are very powerful and the more advanced use of selectors can be a bit confusing. However, as our aim is just to understand the CSS file so we can change some of the properties (or add some), we only have to look at the most used selectors. The selector we showed in our first example is actually a type selector. You just specify the type of an HTML element and you can change its style properties. There are two other selectors you should be able to recognise; the ID selector and the class selector.
A CSS property list using the ID selector looks like this:
#content {margin:0 200px;}
The ID selector starts with a #. If you remember the web page structure we discussed earlier, there was a Div element with the ID content and this line of CSS allows me to specify how I would like the content section to be displayed on my page.
The final selector, which you will commonly find on web page templates (I use it on this web page in the menu), is the class selector:
.intro {font-size:1.1em; font-weight:bold; letter-spacing:-1px; }The class selector starts with a point punctiation mark. You will find the class selector intor in my CSS file, and it is used to give the first paragraph on each web page a different appearance, all I need to do is add a class declaration to the first paragraph:
<p class="intro"> paragraph </p>
Now you know part of the basics of Cascading Style Sheets, it is time to look at the style sheet for this page. Just click here. Although you may not yet have learned all the different properties in this CSS file, you should now be able to recognize the structure of the style sheet.