Today is

CSS - Cascading Style Sheets (Page 1)

Next

Introduction

Cascading Style Sheets help us to define how our html elements will appear on the browser. External stylesheets are stored in files with the extension of .css and they solve the problem of making changes in many pages in a site at the same time. They were added to HTML 4.0 to solve the problem of new tags and attributes being introduced by Netscape and Internet explorer. Browsers IE 4.0 and Netscape 4.0 support stylesheets. If stylesheets are not supported by a browser, then by default the browser will render the html elements in the way it has be designed to display. Stylesheets help us to separate layout from presentation or content. So without changing content by making changes in the stylesheet the look and feel of the website can be changed.

We have already seen a short introduction about stylesheets in the previous articles (StyleSheets )

Now we will see about cascading style sheets. The main properties of html elements that can be set with stylesheets are as follows:

We will see about each of the properties one by one. Before that a brief introduction to how to include a stylesheet in a html page(you can also include stylesheets in php, jsp, asp or any other server-side programming file).

The hierarchy of cascading in stylesheets is

So Inline Styles get the highest priority. So if you don't define any type of stylesheet, the content is displayed by the browser as to how it should display it. When you use an External Stylesheet (files with .css extension), the browser defaults are overwritten by the stylesheet and the content display is determined by the External Stylesheet. External stylesheets are useful when you want to change the appearance of website at a go, by making alterations in a single file. On the otherhand if you want to use specific styles for a particular file, you can use Internal Stylesheets(using style tag). This gets the second highest priority and external stylesheets get the third priority.

Defining an External StyleSheet

To include a stylesheet you can use the tag

<link type="text/css" href="./style.css" rel="stylesheet" /> The path must be given carefully. If the stylesheet file style.css is in the same directory as the file you are using, then it is ./style.css if it is in a directory named include then it is ./include/style.css. Similarly if you are trying to access from some interior directory use use ../(move a directory backwards) and then ../include/style.css

So we will see what is the content we can place in the .css file.

Defining a Internal stylesheet

Inside the head tag of the html file or asp(or php or jsp or cfm) file, you can place the internal stylesheet between <style></style> tags.

Eg.

In Inline Style, for the html element, you just define the style using style attribute of the element. Almost all html elements have this style attribute.

Next