Welcome in Faculty Of Computer and Infromatics

Welcome In HTML Course:-
Back To Advanced index

Cascading Style Sheets (CSS)

Many basic HTML tags are now deprecated in HTML in favor of style sheets. Cascading Style Sheets (CSS) is a easy way to give your web site a feel without using commands over and over again. However, CSS only works with newer browsers, like Internet Explorer 4 and Netscape Navigator 4 and better.

CSS lets you define attributes of a HTML command once for a whole page. For example, with CSS we can define everything inside the <p>...</p> command to have be red or have some other unique attribute. Then whenever you use the <p>...</p> command anywhere on you page the paragraph will show up as red. CSS many times gives you more control over the appearance of objects on your web page. You can also use CSS to define attributes for a whole site.

Here is an example of an HTML file that uses CSS to make <h1>.../<h1> bold and green and <p>...</p> font size 2, face arial, and purple. It also will make a custom command that I can apply anywhere I want that makes text large and orange, called CUSTOM. This particular example is called an embedded style sheet:
<HTML> <HEAD> <TITLE>CSS Example</TITLE> <STYLE TYPE="text/css">

</STYLE> </HEAD> <BODY>

<H1>Heading</H1> <P>In this simple example, we use CSS to define some tag attributes for one page</p> <H1>Heading</H1> <SPAN STYLE="custom">This is my custom style.</SPAN>

</BODY> </HTML>

Here are some CSS attributes that can be used with almost any HTML tag.

margin-top	Sets the top margin of an object. All margin values can be entered in numerical lengths or percentages.
margin-right	Sets the right margin of an object.
margin-bottom	Sets the bottom margin of an object.
margin-left	Sets the left margin of an object.
margin	Sets the top, right, bottom and left margin.
padding-top	Sets the top padding of an object. All padding values can be entered in numerical lengths or percentages.
padding-right	Sets the right padding of an object.
padding-bottom	Sets the bottom padding of an object.
padding-left	Sets the left padding of an object.
padding	Sets the top, right, bottom and left padding.
color	Sets the color (usually text) by using HTML RGB color triplet codes.
background-color	Sets the background color of the object by using HTML RGB color triplet codes.
background-image	Sets background image.
border-style	Assigns border style of all four borders of an object. Values can be none, dotted, dashed, solid, double, groove, ridge, inset, and outset. Borders can be individually set by using border-bottom-style, border-left-style, border-right-style, border-top-style.
border-color	Sets the border color by using HTML RGB color triplet codes
border-width	Defines width of all four borders. Values can be thin, medium, thick, or a length value. You can define individual parts of a border by using border-bottom-width, border-top-width, border-left-width, and border-right-width.
border	A short way to assign the same width, color, style on all four borders of an object.
font-family	Sets font face. More than one font can be listed, in case one is not present on the computer viewing the page.
font-size	Font size. This can be an absolute, relative, or percentage value.
font-weight	Values include: normal, bold, bolder, or lighter.
font-variant	Values include: small-caps or normal

If you get tired of defining the CSS styles on every page on your site, you can use the <LINK> command to use a 'external' CSS file. This is very easy and convienent to do. Using well designed external CSS files allows you to drastically change the look of all of your pages on your site, while only changing one file. To do this, you first have to make a text file named mystyle.css using any text editor. This file can look like this:

BODY { background-color: #CCFFCC;
	font-family: Arial, Delvetrica, sans-serif;
	color: #330066;
	padding: 50px, 70px
A:link { color: #CC9900 }
A:visited { color: #660000 }
A:hover { color: #FFCC00 }
A:active { color: #FF0000 }
H1 { color: #996633;
	background-color: #FFFFCC }

Whenever you want to use this CSS, you only need to place the following between the <HEAD>...</HEAD> tags in you HTML file:

<LINK REL="stylesheet" HREF="mystyle.css">

A third way to use CSS to improve your site is using 'inline' styles. You can use this when you want to have a style defined for one element on your page, not the whole page or site. You can use the <SPAN>...</SPAN> and STYLE. Example:

<P style="color: red; font-family: arial; font-weight: bold">This paragraph uses the font 'arial' in red and bold</P>

<P>This paragraph is divided up using the 'span' tag.

<span style="background-color: #123456; color #FFFFFF">Background Color.</SPAN>

<SPAN STYLE="font-family: courier; size: medium">Medium Courier.</SPAN></P>

This paragraph uses the font 'Arial' in red and bold

This paragraph is divided up using the 'span' tag. Background Color. Medium Courier.

Note: You can assign the <SPAN>...</SPAN> tags and STYLE attribute with any HTML tag except the following: <BASE>, <BASEFONT>, <HEAD>, <HTML>, <META>, <PARAM>,<SCRIPT>,<STYLE>, and <TITLE>.

Back To Advanced index