Mhkonline Tutorials :: CSS intro

CSS Introduction

Welcome to the tutorials on Cascading Style Sheets at Mhkonline. Scroll to the bottom for all the tutorials.

HTML Styles are used to give what shall we say, 'style' to the pages. It is just a set of rules that tell the browser how to present a webpage. Note that HTML tells the browser what to display. There are three ways in which styles can be used.

Inline Styles.
Styles defined in the HEAD section of a page.
Styles defined in an external page, CSS

All these methods are used in different circumstances. Inline Styles are written using the <SPAN> tags. eg:To show this Sample we can use the inline style

<span style="color:#CCFF00; background-color:#003366;font-weight:bold;">Sample</span>

In the other two types, we can name each style and also change the appearance of the standard elements like link colors, styles of Headings etc. Selectors are used to define the designer's own styles. A Class Selector is defined starting with a '.' ,it can be used anywhere, any number of times across the pages it is defined in. On the otherhand, an ID Selector can be used only once in a page, ie, it is unique. It can be implemneted using the <DIV> tag.

Selector Syntax
selector { property1: value1; property2: value2 }

ID Selector eg:
#date{ color:#123456; text-decoration:underline;}
<DIV ID=date>1-1-2007</DIV>

An external style file is called a CSS and is an extremely useful ally to a web designer. It gives him complete control of the look and feel of the entire website. It is particualarly useful when a number of files share the common the same style. So whenever the designer has to change some minor detail, he only has to change it in the common CSS file rather that in each and every document that is used. This is how you link an external style sheet to a webpage by putting this code between the <HEAD> and </HEAD> tags.

		Cascading Style Sheet
Home • ae • Downloads •Solutions •Tutorials • Info • All Tutorials