CSS

CSS
Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.
HTML tags were originally designed to define the content of a document. They were supposed to say “This is a header”, “This is a paragraph”, “This is a table”, by using tags like <h1>, <p>,
<table>and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

Introduction to CSS Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML, XML, XHTML ect . Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML(markup) document, includingSVG and XUL. World Wide Web Consortium (W3C) maintain the CSS specifications.

CSS has various levels and profiles. There are multiple levels of CSS, denoted as CSS1, CSS2, and CSS3 is builds upon the last, typically adding new features to existing one. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types which were added in CSS2.

What are style sheets?

A style sheet is a set of commands, each one of these instructions tells a browser how to draw a particular element on a page. When you are working with CSS, it is very important to grasp this idea of HTML elements. Well-formed HTML documents are a collection of elements arranged in a kind of suppression hierarchy.

 

The HTML containment hierarchy

 

Imagining for a moment that the document we want to style is as simple as the one in the image given above, you can use a style sheet to specify the different elements on the page, and then say what styles should be applied to them. Inheritance becomes much easier to understand, once you see the document as a hierarchy like this a very important aspect of CSS. If you apply style to an element which contains other elements then this will be inherited by the elements inside. You might think of them as parent elements and child elements. Child elements are contained by parent elements and inherit all their properties. So taking the example above, if you apply style to the parent, <span> element, the child, <p> (paragraph), will also get this style. But its early days, so don’t worry if this doesn’t make a lot of sense; you’ll see it more clearly when we start putting it into practice.

We refer the instructions in a style sheet as statements. There are a few different types of statement, but the one you’ll use most is referred to as a rule. Rules have two parts:selectordeclaration The selector informs a browser which elements in a page will be affected by the formatting rule. There are different types of selector. The declaration tells the browser which set of properties to apply or what we want to do or how something should look. There are many different properties. Throughout these lessons we’ll be investigating some of the different types of selector you can use in style sheets, and various properties that can be applied to elements on a page. All these statements are contained in a Cascading Style Sheet. This is nothing more than a text file, with the suffix .css added to the name, something like core-style.css. Rules have a very simple form: the selector, followed by the set of properties, which are surrounded by curly braces that is { and }.

span {font-size: 1em}

 selects any <span> elements, and makes their font 1em. You don’t have to worry too much about the details of this syntax if you use a CSS Editor which makes sure it all comes out just right.

Difference between CSS and HTML HTML is used to structure content. CSS is used for formatting structured content. Okay, it sounds a bit technical and confusing. But please continue reading. It will all make sense to you soon. Back in the good old days Tim Berners Lee invented the World Wide Web (WWW), the language HTML was only used to add structure to text. An author could mark his text by stating “this is a headline” or “this is a paragraph” using HTML tags(elements) such as <h1> and <p>.

Designers started looking for possibilities to add layout to online documents, as the Web gained popularity. To meet this demand, the browser producers invented new HTML tags such as for example <font> which differed from the original HTML tags by defining layout – and not makeup or structure.

This also led to a situation where original structure tags such as <table> were increasingly being misused to layout pages instead of adding structure to text. Many new layout tags such as <blink> were only supported by one type of browser. “You need browser X to view this page” became a common disclaimer on web sites.

To providing web designers with refined layout opportunities supported by all browsers,CSS was invented. site maintenance is made lot easier, by providing separation of the presentation style of documents from the content of documents.

Which benefits will CSS give us? CSS was a revolution in the world of web design. The concrete benefits of CSS include:

• control layout of many documents from one single style sheet;

• more precise control of layout;

• apply different layout to different media-types (screen, print, etc.);

• numerous advanced and sophisticated techniques.

What can we do with CSS? CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images,advanced positions and many other things. Just wait and see! What CSS can do for you?
HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today. After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your website a new great look.

Getting Started with CSS Basic CSS Syntax The basic CSS syntax is made up of following 3 parts: selector {property: value} The selector is typically an HTML tag or element such as <p>, <table>, <h1>,<div>etc . The following is a CSS code example of an internal style sheet. The selector (the<p> tag in this example) is made bold. Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely identify many of the codes. Let us look at a example. Let’s say we want a nice green color as the background of a webpage: Using HTML we could have done it like this:

<body bgcolor=”#0000FF”>

With CSS the same result can be achieved like this:body {background-color: #0000FF;} As you will note, the codes are more or less identical for HTML and CSS. The above example also shows you the fundamental CSS model:

 But where do you put the CSS code? This is exactly what we will go over now.  Applying CSS to an HTML document There are three ways, you can apply CSS to an HTML document. These methods are all outlined below. We recommend that you focus on the third method i.e. external. In-line (the attribute style) One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the green background color, it can be applied like this: <html>
<head>
<title>Example<title>
</head>
<body style=”background-color: #0000FF;”>
<p>This is a red page</p>
</body>
</html>  Internal (the tag style) Another way is to include the CSS codes using the HTML tag <style>. For example like this:  <HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body {
background-color:’#FFCCDD’;
}
</style>
</HEAD>
<BODY>
</BODY>
</HTML>Click here to view the output.  External (link to a style sheet)The recommended method is to link to a so-called external style sheet(saved as a .css file) . Throughout this course we will use this method in all our examples. An external style sheet is simply a text file with the extension .css. Like any other file, you can place the style sheet on your web server or hard disk. For example, let’s say that your style sheet is named style.css. The trick is to create a link from the HTML document (say “abc.php”) to the style sheet (style.css). Such link can be created with one line of HTML code, using <link> element :

<link rel=”stylesheet” type=”text/css” href=” style.css” />

Notice how the path to our style sheet is indicated using the attribute href.The line of code must be inserted in the header section (between the <head> and</head> tags) of the HTML code . Like this: <html>
<head>
<title>My document</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
… This link tells the browser that it should use the layout from the CSS file when displaying the HTML file.
One CSS file can be used to control the layout of many HTML documents.In other words, t he really smart thing is that several HTML documents can be linked to the same style sheet.

 This technique can save you a lot of work. If you, for example, would like to change thetext color of a website with 500 pages, a style sheet can save you from having to manually change all 500 HTML documents. Using CSS, the change can be made in a few seconds just by changing one code in the central style sheet.

CSS Comments

We can insert comments in our CSS much like we can with HTML code. And just as in HTML, the comment will be ignored by the web browser. A CSS comment begins with “/*“, and ends with “*/“, like the following example.

/* This is a CSS comment */ p { font-size: 120%; /* This is another CSS comment */ color: black; }

CSS Identifier

CSS identifier also known as CSS selectors. Selectors are used to access the CSS styles. They can be very useful sometimes you want to apply a special style to a particular element or a particular group of elements.

There are three kinds of selectors in CSS:

Element or Tag Selector Class Selector ID selector

Element Selector

The general syntax for an HTML selector is:

HTMLSelector {Property:Value;}

For example:

<HTML> <HEAD> <style type=”text/css”> B{ font-family:arial; font-size:14px; color:blue } </style> </HEAD> <BODY> <b>This is a customized headline style bold</b> </BODY> </HTML>

Click here to open a window that shows the result of the above example.

CLASS Selectors

HTML selectors are used when you want to redefine the general look for an entireHTML tag.

The general syntax for a Class selector is:

.ClassSelector {Property:Value;}

For example:

<HTML> <HEAD> <style type=”text/css”> .headline {font-family:arial; font-size:14px; color:red} </style> </HEAD> <BODY> <b>This is a bold tag carrying the headline class</b> <br> <i>This is an italics tag carrying the headline class</i> </BODY> </HTML>

Click here to open the output window.

Class selectors are used when you want to define a style that does not redefine anHTML tag entirely.

When referring to a Class selector you simply add the class to an HTML tag like in the above example (class=”headline”).

SPAN and DIV as carriers

Two tags are particularly useful in combination with class selectors: <SPAN> and<DIV>.

Both are “dummy” tags that don’t do anything in themselves. Therefore, they are excellent for carrying CSS styles.

<SPAN> is an “inline-tag” in HTML, meaning that no line breaks are inserted before or after the use of it.

<DIV> is a “block tag”, meaning that line breaks are automatically inserted to distance the block from the surrounding content (like <P> or <TABLE> tags).

<DIV> has a particular importance for layers. Since layers are separate blocks of information. <DIV> is an obvious choice when defining layers on your pages.

ID selector

In addition to grouping elements, you might need to identify one unique element. This is done by using the attribute id. Each id has to be unique. There can not be two elements in the same document with the same id, which is special about the attribute id. In other cases, you should use the class attribute instead. Now, let us take a look at an example of a possible usage of id:

The general syntax for an ID selector is:

#IDSelector {Property:Value;}

For example:

<HTML> <HEAD> <style type=”text/css”> #layer1 { position:absolute; left:100; top:100; z-Index:1; background-color:cyan } #layer2 { position:absolute; left:140; top:130; z-Index:0; background-color:pink } </style> </HEAD> <BODY> <div ID=”layer1″> THIS IS LAYER 1<br>POSITIONED AT 100,100 </div> <div ID=”layer2″> THIS IS LAYER 2<br>POSITIONED AT 140,130 </div> </BODY> </HTML>

Click here to view the output of the above HTML.

ID selectors are used when you want to define a style relating to an object with aunique ID.

This selector is most widely used with layers (as in the above example),sincelayers are always defined with a unique ID.

Colors and Backgrounds CSS background properties allow you to specify things such as:

• The background color of a web page(s), table(s), paragraph(s), etc
• The background image for a web page(s), table(s), paragraph(s), etc
• The position of the background image.
• It allows an image to scroll with a web page, or to fix the position on the screen.
• It allows you to control whether the image repeats itself or not.
• It allows you to control how image will repeat itself.

Setting Background Colors The background color property allows you to set the background color of an HTML element.The following CSS code example shows how to set the background property of a paragraph in an internal style sheet.

<html>
<head>
<style type=”text/css”>
p
{
background-color: cyan
}
</style>
</head>
<body>
<p>
This paragraph will have a cyan background
</p>
</body>

</html> Click here to view the web page the above code produces.

<html>
<head>
<style type=”text/css”>
body
{
background-color: cyan
}
</style>
</head>
<body>
<p>
This web page will have a cyan background
</p>
</body>
</html>

Click here to view the web page the above code produces.  Setting an Image as a Background

With the help of following CSS code, we will show you how to insert an image as a background. Scroll up and down the web page and notice how the image scrolls with the web page. By default, the page background image will scroll with the page.

<html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.gif’)
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> Click here to view the web page the above code produces. Creating a Fixed Background Image A fixed background image can be created using the background-attachment: fixed property. The property allows the image to stay in the same place on the screen while the web page scrolls. <html>
<head>
<style type=”text/css”>
{
background-image: url(‘img.gif’);
background-attachment: fixed
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> Click here to view the web page the above code produces. Controlling the Background Tiling Effect The tiling effect of the background image can be controled with the use of thebackground-attachment: fixed property. The following CSS examples show you how to control the various tiling effects with the respective background repeat properties. The CSS code {background-repeat: repeat} will tile the image both horizontally and vertically. This is the default setting. <html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: repeat
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> Click on CSS Example to view what this code produces. You can tile the image in the horizontal direction only if you like. <html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: repeat-x
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> Click on CSS Example to view what this code produces. You can tile an image in the vertical direction only. <html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: repeat-y
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> Click on CSS Example to view what this code produces. You can have a background image appear only once. <html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: no-repeat
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> Click on CSS Example to view what this code produces.  Positioning a Background Image CSS allows you to control precisely where you will place a background image (background positioning) within an HTML element by using the background-position property. The CSS code background-position: x% y% (position from left and toprespectively ) allows you to place the background image x% (x percentage) across the web page and y% (y percentage) down the web page. Giving it values of “0 0” will place the background image in the top left hand corner. <html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: no-repeat;
background-position: 50% 50%
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> Click on CSS Example to view what this code produces. The CSS code
{background-position: x y}
allows you to place a background image x units across the web page and y unitsdown the web page. Where “x” and “y” represent any unit you specify.

<html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: no-repeat;
background-position: 50px 200px
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>

Click on CSS Example to view what this code produces. CSS allows you to easily position a background image using various combinations of the following words: top left, top center, top right, center left, center center,center right, bottom left, bottom center and bottom right. <html>
<head>
<style type=”text/css”>
{
background-image: url(‘image.jpg’);
background-repeat: no-repeat;
background-position: bottom right
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> Click here to view the web page the above code produces.

Cascading  What is Cascading?Cascading is like a waterfall. You start at the top. As you go down, there are different levels. There are 3 “levels” of CSS commands:

1. On the same page within an HTML tag as a property.
2. On the same page in the <HEAD> … </HEAD> area.
3. On a separate page.

Choosing the one or combination of all is your choice. Everybody has an option on how they want to set up their page or site. The CASCADING part of CSS determines the importance of a command tag. If you have a tag for the same property on all 3 levels, but each one has a different value assigned to it, the CSS will take and use the most important out of them. Level 1 willover-ride Level 2 which will over-ride Level 3.  External

Having written all  CSS commands on a separate page is best suited for a multiple page site owner. Multiple pages are able to utilize the same commands in a single area. These pages are called “linked” or external CSS. For time, it saves from typing in all the commands on each individual page. For space, it takes less space since more than one page is using the same page reference. For editing, one change on the master CSS page will affect all pages connected to it, instantly. For maintenance, such sites are easy to modify and maintain since when we edit the master CSS, the effects are shown on all related pages.

CSS pages have a file extension of .css which is allowed on most, if not all, main homepage servers. Create and save the document in text-only format then give the document the .css extension. An external page is usually used for a “general”or “common” style layout. Setting the background color or image, setting the text colors, etc. To link to the external style sheet, a LINK must be placed in the HEAD area of the page code. That is anywhere after the <HEAD> tag and before the </HEAD> tag. <link rel=”stylesheet” type=”text/css” href=”FileName.css”>

LINK	There is a separate page of command tags linked to use on this page.
REL	The linked page is a STYLESHEET.
TYPE	The linked page is text format containing CSS commands.
HREF	The filename (and location or sub-directoriesif necessary) of the linked page.

External CSS pages do not use any foundation tags. Just the actual CSS commands are listed.  Embedded The HEAD area, is also used to store CSS commands. These are called embedded CSS. Embedded commands are more specific to the page. Any embedded CSS command will over-ride an external CSS command of the same tag. Embedded CSS codes are placed within the HEAD area of the page code. That is anywhere after the <HEAD> tag and before the </HEAD> tag. NOT in the HEAD tagitself. <style type=”text/css”>
<!–
… style sheet codes here …
–>
</style>  Most examples shown in the following CSS tutorial pages will be using the EMBEDDED style.  Inline Inline CSS are the most dominant type of CSS commands. They will over-ride any others before them. Style commands are actually placed within any regular HTML tagin the BODY area.<tag style=” CSS code “>
… text or object …
</tag>

CSS Text Key issue for any web designers are: formatting and adding style to text . Now you will be introduced to the amazing opportunities CSS gives you to add layout to text. The following properties will be described in this section:

1. text-indent
2. text-align
3. text-decoration
4. letter-spacing
5. text-transform

Text indention [text-indent] The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 110px is applied to all text paragraphs marked with <p>: p
{
text-indent: 110px;
} Click on example to view the page produced by above code.  Text alignment [text-align] The CSS property text-align corresponds to the attribute align used in old versions ofHTML. Text can be aligned either to the left, to the right or centred. In addition to this, the value justify will stretch each line so that both the right and left margins are straight. You know this layout for example newspapers and magazines. p
{
text-align: justify;
} Click on example to view the page produced by above code.  Text decoration [text-decoration] With the help of property text-decoration it is possible to add different “effects” or“decorations” to text. For example, you can underline the text, have a line through or above the text, etc. In the following example, <h1> are underlined headlines,<h2> are headlines with a line above the text and <h3> are headlines with a line though the text. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>CSS Text example</TITLE>

<style>
body
{
background-image: url(‘img.gif’);
background-repeat: no-repeat;
background-position: bottom left
}

h1
{
text-decoration: underline;
}

h2
{
text-decoration: overline;
}

h3
{
text-decoration: line-through;

}

</style>
</HEAD>

<BODY>
<P>
a CSS Text example [text-decoration]
</p>
<h1>Text Decoration underline</h1>
<h2>Text Decoration overline</h2>
<h3>Text Decoration line-through </h3>

</BODY>
</HTML> Click on example to view the page produced by above code.  Letter space [letter-spacing] The property letter-spacing can be used to specifiy spacing between text characters . The value of the property is simply the desired width. For example, if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>CSS Text example</TITLE>

<style>
body
{
background-image: url(‘img.gif’);
background-repeat: no-repeat;
background-position: bottom left
}

h1
{
letter-spacing: 6px;
}

p
{
letter-spacing: 3px;
}

</style>
</HEAD>

<BODY>

<h1>CSS Text example</h1>
<P>
a CSS Text example [letter-spacing]
</p>

</BODY>
</HTML> Click on example to view the page produced by above code.  Text transformation [text-transform] The capitalization of a text can be controled by using the text-transform property. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code. An example could be the word “headline” which can be presented to the user as“HEADLINE” or “Headline”. There are four possible values for text-transform: capitalizeCapitalizes the first letter of each word. For example: “Amantiwari” will be “AmanTiwari”. uppercaseConverts all letters to uppercase. For example: “Ravish tiwari” will be “RAVISH TIWARI”. lowercaseConverts all letters to lowercase. For example: “VISHWAJIT TIWARI” will be“vishwajittiwari”. noneNo transformations – the text is presented as it appears in the HTML code. As an example, we will use a list of names. The names are all marked with <li> (list-item). Let’s say that we want names to be capitalized and headlines to be presented in uppercase letters. Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>CSS Text example</TITLE>

<style>
body
{
background-image: url(‘img.gif’);
background-repeat: no-repeat;
background-position: bottom left
}

h1
{
text-transform: uppercase;
}

p
{
text-transform: capitalize;
}

</style>
</HEAD>

<BODY>

<h1>CSS Text example</h1>
<P>
a CSS Text example [text-transform]
</p>

</BODY>
</HTML> Click on example to view the page produced by above code.  Text Properties

Property	Values	NS	IE	Example
line-height	normal number length percentage	4W 4+ 4+ 4+	4+ 4P 4+ 4P	line-height:normal line-height:1.5 line-height:21px line-height:110%
text-decoration	none underline overline line-through blink	4+ 4+ 4+ 4+	4M 4+ 4W 4+	text-decoration:none text-decoration:underline text-decoration:overline text-decoration:line-through text-decoration:blink
text-transform	none capitalize uppercase lowercase	4+ 4+ 4+ 4+	4W 4W 4W 4W	text-transform:none text-transform:capitalize text-transform:uppercase text-transform:lowercase
text-align	left right center justify	4+ 4+ 4+ 4+	4+ 4+ 4+ 4W	text-align:left text-align:right text-align:center text-align:justify
text-indent	length percentage	4+ 4+	4+ 4+	text-indent:21px; text-indent:11%
white-space	normal pre	4+ 4+		white-space:normal white-space:pre

CSS Font So, why should we specify font of pages using CSS? CSS saves time and makes your life easier. One of the major advantages of using CSS to specify fonts is that at any given time, you can change font on an entire website in just a few minutes. Just change the master css and changes will be reflected in all linked pages instantly. We will also look at how to work around the issue that specific fontschosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be described:

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

Font family [font-family]

With the help of property font-family we can set a prioritized list of fonts to be used to display a given element or web page. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found.

There are two types of names used to categorize fonts: family-names and generic families. The two terms are explained below. Family-nameExamples of a family-name (often known as “font”) can e.g. be “Arial”, “Times New Roman” or “Tahoma”. Generic familyGeneric families can best be described as groups of family-names with uniformed appearances. An example is sans-serif, which is a collection of fonts without “feet”. The difference can also be illustrated like this:

 

Whenever you list fonts for your web site, you naturally start with the most favorite font followed by some alternative fonts. It is recommended to complete the list with a generic font family. That way at least the page will be shown using a font of the same family if none of the specified fonts are available.

An example of a prioritized list of fonts could look like this: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>CSS Font example</TITLE>

<style>
body
{
background-image: url(‘img.gif’);
background-repeat: no-repeat;
background-position: bottom left
}

h1
{
font-family: arial, verdana, sans-serif;
}
h2
{
font-family: “Times New Roman”, serif;
}

</style>
</HEAD>

<BODY>

<h1>CSS Font example</h1>
<h2>
a CSS font example [font-family]
</h2>

</BODY>
</HTML> Click on example to view the page produced by above code.  Headlines marked with <h1> will be displayed using the font “Arial”. If this font is not installed on the user’s computer, “Verdana” will be used instead. If both these fonts are unavailable, a font from the sans-serif family will be used to show the headlines. Notice how the font name “Times New Roman” contains spaces and therefore is listed using quotation marks.  Font style [font-style] The property font-style defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h2> will be shown in italics. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>CSS Font example</TITLE>

<style>
body
{
background-image: url(‘img.gif’);
background-repeat: no-repeat;
background-position: bottom left
}

h1
{
font-family: arial, verdana, sans-serif;
}
h2
{
font-family: “Times New Roman”, serif;
font-style: italic;
}

</style>
</HEAD>

<BODY>

<h1>CSS Font example</h1>
<h2>
a CSS font example [font-style]
</h2>

</BODY>
</HTML> Click on example to view the page produced by above code.  Font variant [font-variant] The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters. Confused? Take a look at these examples:

 If font-variant is set to small-caps and no small-caps font is available the browser will most likely show the text in uppercase instead. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>CSS Font example</TITLE>

<style>
body
{
background-image: url(‘img.gif’);
background-repeat: no-repeat;
background-position: bottom left
}

h1
{
font-variant: small-caps;
}
h2
{
font-variant: normal;
}

</style>
</HEAD>

<BODY>

<h1>CSS Font Style example</h1>
<h2>
a CSS font example [font-style]
</h2>

</BODY>
</HTML> Click on example to view the page produced by above code.  Font weight [font-weight] The property font-weight describes how “heavy” or bold a font should be presented. A font can either be normal or bold. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>CSS Font example</TITLE>

<style>
body
{
background-image: url(‘img.gif’);
background-repeat: no-repeat;
background-position: bottom left
}

h1
{
font-variant: small-caps;
}
h2
{
font-variant: normal;
}
p {font-family: arial, verdana, sans-serif; font-weight: bold;}

</style>
</HEAD>

<BODY>

<h1>CSS Font Style example</h1>
<h2>
a CSS font example [font-weight]
</h2>

<p> Font Weight example</p>
</BODY>
</HTML> Click on example to view the page produced by above code.  Font size [font-size] The size of a font is set by the property font-size.There are many different units (e.g. pixels and percentages) to choose from to describe font sizes. In this tutorial we will focus on the most common and appropriate units. Examples include: h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;} Click on example to view the page produced by above code. There is one key difference between the four units above. The units ‘px‘ and ‘pt‘ make the font size absolute, while ‘%’ and ‘em‘ allow the user to adjust the font size as he/she see fit.To make your website accessible for everybody, you should use adjustable units such as ‘%’ or ‘em‘. Many users are disabled, elderly or simply suffer from poor vision or a monitor of bad quality.Below you can see an illustration of how to adjust the text size in Mozilla Firefox andInternet Explorer. Try it yourself – neat feature, don’t you think?

  Compiling [font] Using the font short hand property it is possible to cover all the different font properties in one single property. For example, imagine these four lines of code used to describe font-properties for <p>:p
{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
} Using the short hand property, the code can be simplified:p
{
font: italic bold 30px arial, sans-serif;
} The order of values for font isfont-style | font-variant | font-weight | font-size | font-family

CSS Links With CSS you can add effects to hyperlinks. If you do not use CSS, the only alternative way to add effects to hyperlinks would be to use JavaScript.
A hyperlink has four states that it can be in. CSS allows you to customize each state that it is in. It is also necessary to write the code in the order in which they appear for the link(s) to work properly. a:link {color: #000000}
defines an unvisited link
a:visited {color: #000000}
defines a visited link
a:hover {color: #000000}
defines a mouse over link
a:active {color: #000000}
defines a selected link Some things to note and remember:a:hover has to come after a:link and a:visited in the CSS definition in order to work as it should a:active has to come after a:hover in the CSS definition in order to work as it should. Pseudo-class names are case-insensitive. Adding Colors to LinksThe following CSS code example shows how to add different colors to a hyperlink. <html>
<head>

<style type=”text/css”>
a:link {color: #FF0000}
a:visited {color: purple}
a:hover {color: blue}
a:active {color: #000000}
</style>

</head>

<body>
<p>
<a href=”examplelink.php”>This is a link</a>
</p>
</body>
</html> Click on example to view the page produced by above code.  Remove underline of links A frequently asked question is how to remove the underlining of links?

People are used to blue underlined links on web pages and know that they can click on them. So, you should consider carefully whether it is necessary to remove the underlining as it might decrease usability of your website significantly. Even my granny knows that! If you change the underlining and color of links there is a good chance that users will get confused and therefore not get the full benefit of the content on your website.

That said, it is very simple to remove the underlining of links. To determine whether text is underlined or not, the property text-decoration can be used . To remove underlining, simply set the value of text-decoration to none.a
{
text-decoration:none;
} Alternatively, you can set text-decoration along with other properties for all fourpseudo-classes.

<html>
<head>
<title>CSS Link Example</title>

<style type=”text/css”>
a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}
</style>

</head>

<body>
<p>
<a href=”#”>This is a link</a>
</p>
</body>

</html> Click on example to view the page produced by above code.  UPPERCASE and lowercase Property text-transform, which can switch between upper- and lowercase letters. This can also be used to create an effect for links:

<html> 
<head> 
<title>CSS Link Example</title>

<style type=”text/css”> 
a:link {
            color: blue;
            text-decoration:none;
}

a:visited {
            color: purple;
            text-decoration:none;
}

a:active {
            background-color: yellow;
            text-decoration:none;
}

a:hover {
            color:red;
            text-decoration:none;
            font-weight:bold;
            text-transform:uppercase;
            background-color:pink
}
</style>

</head>

<body> 
<p> 
<a href=”#”>This is a link 1</a><br />
<a href=”#”>This is a link 1</a><br />
<a href=”#”>This is a link 1</a><br />
<a href=”#”>This is a link 1</a><br />
</p> 
</body>

</html> Click on example to view the page produced by above code. The two examples gives you an idea about the almost endless possibilities for combining different properties. You can create your own effects – give it a try!

CSS Padding Padding can also be understood as “filling”. It’s like internal spacing. This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. All the padding (left, right, bottom, left) can be combined using this single tag.Usage:padding: 20px;
padding: 10px 20px 30px 10px;
padding: 10px 20px;
padding: 20px 10px 30px; Definition:The padding can be set using the tag “padding”.It takes the following values:a)20px : This will set a padding of 20px on the four sides (top, right, bottom, left). b)10px 20px 30px 10px: This format will set the padding in the order oftop,right,bottom,left. c)10px 20px : This format will set the padding for top and right. Bottom will take the top padding value (10px) and left will take right paddings value(20px). d)20px 10px 30px: This format will set the padding for top and right and bottom. left will take the right paddings value. The values can be in percentage or points or pixels.By defining padding for the headlines, you change how much filling there will be around the text in each headline: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>CSS Padding example</TITLE>

<style>

h1
{
background: pink;
padding: 20px 20px20px 80px;
}

h2
{
background: cyan;
padding-left:120px;
}

</style>
</HEAD>

<BODY>

<h1>CSS Font Size example</h1>
<h2>
a CSS Padding  example
</h2>

<p>CSS padding example</p>
</BODY>
</HTML> Click on example to view the page produced by above code. Example 1:<div align=right style=”padding: 22px;”>
Here we have set a padding of 22 pixels.
You can see that this paragraph has paddings on all the four sides.
</div> Example 2:<div style=”padding: 10px 50px 30px 5px;”>
Here we have set a padding with four values.
You can see that this paragraph has padding of 10px on top, 50px on right, 30px on bottom and 5px on left.
</div> Example 3:<div style=”padding: 22px 30px;”>
Here we have set a padding with two values.
You can see that this paragraph has paddings on 22px on top and bottom and 30px on left and right.
</div> Example 4:<div style=”padding: 10px 50px 40px;”>
Here we have set a padding with three values.
You can see that this paragraph has paddings of 10px on top, 50px on right , 40px on bottom. left padding took values from its right counter part as 50px.
</div>

Property	Description	Values	IE	F	N
padding	A shorthand property for setting all of  the padding properties in one declaration	padding-top padding-right padding-bottom padding-left	4	1	4
padding-bottom	Sets the bottom padding of an element	length %	4	1	4
padding-left	Sets the left padding of an element	length %	4	1	4
padding-right	Sets the right padding of an element	length %	4	1	4
padding-top	Sets the top padding of an element	length %	4	1	4

Margins The CSS margin properties define the space around elements. It’s opposite to padding. Negative values can also be used to overlap content. A shorthand margin property can be used to change all of the margins at once. The top, right, bottom, and left margin can be changed independently using separate properties. Note:Netscape and IE give the body tag a default margin of 8px. On the otherhand Operadoes not give any such margin! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly inOpera, the body padding must be set as well! An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). As the first example, we will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.

 The CSS code for this would look as follow:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>CSS Padding example</TITLE>

<style>

body
{
margin-top: 120px;
margin-right: 30px;
margin-bottom: 100px;
margin-left: 80px;
}

</style>
</HEAD>

<BODY>
<h2>CSS Margin example</h2>
</BODY>
</HTML> Click on example to view the page produced by above code. Or you could choose a more elegant compilation:body
{
margin: 100px 40px 10px 70px;
}

Line Spacing CSS allows you to control the widthand height of an element, as well as increase thespace between two lines, with the use of dimension properties. The following CSS code example shows how to increase the space between lines. <html>
<head>
<style type=”text/css”>
p
{
line-height: 1cm;
}
p.bigSpace
{
line-height: 1.5cm;
}
</style>
</head>

<body>
<p>
This paragraph has a line height of 1cm. This paragraph has a line height of 1cm. This paragraph has a line height of 1cm. This paragraph has a line height of 1cm.  This paragraph has a line height of 1cm.   This paragraph has a line height of 1cm.
</p>
<p>
This paragraph has a line height of 1.5cm. This paragraph has a line height of 1.5cm. This paragraph has a line height of 1.5cm. This paragraph has a line height of 1.5cm. This paragraph has a line height of 1.5cm. </p>
</body>
</html> Click on example to view the page produced by above code.

CSS Positioning The CSS positioning properties allow you to specify the position of an element (element’s left, right, top, and bottom position). It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element’s content is too big to fit in a specified area. Positioning Properties

Property	Description	Values	IE	F	N
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	auto % length	5	1	6
clip	Sets the shape of an element. The element is clipped into this shape, and displayed	shape auto	4	1	6
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	auto % length	4	1	4
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto	4	1	6
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed	4	1	4
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	auto % length	5	1	6
top	Sets how far the top edge of an element is above/below the top edge of the parent element	auto % length	4	1	4
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %	4	1	4
z-index	Sets the stack order of an element	auto number	4	1	6

CSS Relative Positioning The following CSS code example shows you how to position an element relative to its normal position.

<html>
<head>
<style type=”text/css”>
h1.left
{
position:relative;
left:-30px;
}
h1.right
{
position:relative;
left:30px;
}
</style>
</head>
<body>
<h1>
This heading is in the normal default position.
</h1>
<h1>
This heading is moved 15 pixels to the left of its normal default position.
</h1>
<h1>
This heading is moved 60 pixels to the right of its normal default position.
</h1>
<p>
Relative positioning moves an element RELATIVE to its original position.
</p>
<p>
The style “left:-30px” subtracts 30 pixels from the element’s original left position.
</p>
<p>
The style “left:30px” adds 30 pixels to the element’s original left position.
</p>
</body>

</html> Click on example to view the page produced by above code.  CSS Absolute Positioning The following CSS code example shows you how to position an element using anabsolute value. <html>
<head>
<style type=”text/css”>
h1.absolutepositioning
{
position:absolute;
left:50px;
top:50px
}
h1.absolutepositioning2
{
position:absolute;
left:200px;
top:200px
} 
</style>
</head>
<body>
<h1>
Absolute positioning was used to place this heading 50px from the left of the page and 50px from the top of the page.
</h1>
<h1>
Absolute positioning was used to place this heading 200px from the left of the page and 200px from the top of the page.
</h1>
<p>
Absolute positioning was used to place both of the headings below.
</p>
</body>
</html> Click on example to view the page produced by above code.

CSS Layers CSS allows you to position HTML elements on top of one another, giving control over which item will appear on top.CSS layers are more flexible and more convenient than other layout management schemas. Layers can be used for effective layout management. In the beginning, you may find it difficult , but as you get more use-to with layers, you will feel that they are more easy then their alternative. CSS Layer Example: The following CSS code is an example of how position (layer) one item over another. Notice in this example that h1 has a higher value (z-index: 2) than the paragraph(z-index: 1), and therefore has a higher priority, and is positioned on top of the paragraph.

<html>
<head>
<style>
h1
{
position: relative;
top: 30px;
left: 50px;
z-index: 3;
background-color:pink;
}
p
{
position: relative;
z-index: 1;
background-color: cyan;
}
</style>
</head>
<body>
<h1>
This header with its pink background is positioned on top of this paragraph.
</h1>
<p>
You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph.
</p>
</body>

</html> Click on example to view the page produced by above code.

Border Color The CSS border properties allow us to specify the style and color of an element’s border.With CSS we can create styled border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element. Usage:border-color: red;
border-color: #454545;
border-color: rgb(123,123,123); Definition:The border of any object can be set with any color using the tag/argument border-color. border-color will not take effect with out border style. Border style can be set using “border-style”. It takes the following values:

1. red: The border color can be set using text names of colors.
2. #454545: The border color can be set using hexadecimal color code.
3. rgb(x,y,z): The border color can be set rgb code.

Example 1:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-style: solid;
border-color: red;
}
</style>
</HEAD>

<BODY>
<div>testing border color</div>
</BODY>

</HTML> Result:

 Click on example to view the page produced by above code.  Example 2:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 4px;
border-style: solid;
border-color: #454545;
}
</style>
</HEAD>
<BODY>
<div>testing border color</div>
</BODY>
</HTML> Click on example to view the page produced by above code.  Example 3:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 4px;
border-style: solid;
border-color: rgb(125,125,125);
}
</style>
</HEAD>
<BODY>
<div>testing border color</div>
</BODY>
</HTML> Click on example to view the page produced by above code.

Border Width The width of elements borders is defined by the property border-width, which can have the values thin, medium, and thick, or a numeric value, indicated in pixels.
The border width of any object can be set with any width using the tag/argument border-width. border-width will not take effect with out border style. Border style can be set using “border-style“. Border Width takes the following values:

1. 5px : The border width can be set in pixels.
2. 5pt : The border width can be set in points.
3. 1% : The border width can be set in percentage.

The figure below illustrates the system:

 Usage:border-width: 5px;
border-width: 5pt;
border-width: 2%; Example 1:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 4px;
border-style: solid;
border-color: red;
}
</style>
</HEAD>

<BODY>
<div>testing border width</div>

</BODY>
</HTML> Click on example to view the page produced by above code. Example 2:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 5pt;
border-style: solid;
border-color: #454545;
}
</style>
</HEAD>

<BODY>
<font>testing border width</font></BODY>

</HTML> Click on example to view the page produced by above code. Example 3:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 2%;
border-style: solid;
border-color: rgb(125,125,125);
}
</style>
</HEAD>
<BODY>
<div>testing border width</div></BODY>

</HTML> Click on example to view the page produced by above code.

Border Style There are different types of borders to choose from. Below are shown 8 different types of borders as Internet Explorer 5.5 and Firefox 2 interprets them. All examples are shown with the color “gold” and the thickness “thick” but can naturally be shown in other colors and thicknesses. Note:Some border style make not show properly on Firefox 2, because they are non-standard or supports IE only. The style of the border can be set using the tag border-style. Border Style takes the following values:

1. dotted- This will create a border with dotted lines.
2. dashed- This will create a border with dashed lines.
3. solid- This will create a border with solid lines.
4. double- This will create a border containing double lines.
5. groove- This will create a border that will look like groove.
6. ridge- This will create a border that will look like ridge.
7. inset- This will create a border with the line looking inset.
8. outset- This will create a border with the line looking outset.

 

 Usage:border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset; Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 2px; border-style: dotted; border-color: red;
}
.border2
{
border-width: 2px; border-style: dashed; border-color: red;
}
.border3
{
border-width: 2px; border-style: solid; border-color: red;
}
.border4
{
border-width: 4px; border-style: double; border-color: red;
}
.border5
{
border-width: 4px; border-style: groove; border-color: red;
}
.border6
{
border-width: 4px; border-style: ridge; border-color: red;
}
.border7
{
border-width: 4px; border-style: inset; border-color: red;
}
.border8
{
border-width: 4px; border-style: outset; border-color: red;
}
</style>
<HEAD>

<body>
<div> testing border style[dotted]</div><br />
<div> testing border style[dashed]</div><br />
<div> testing border style[solid]</div><br />

<div class=”border4″> testing border style[double]</div><br />
<div> testing border style[groove]</div><br />
<div> testing border style[ridge]</div><br />
<div> testing border style[inset]</div><br />
<div> testing border style[outset]</div>
</body>

</HTML> Click on example to view the page produced by above code.

Side Border Each side of the border can be handled separately using the these tags. Usage:border-top: <border-top-width> || <border-style> || <border-color> ;border-left: <border-left-width> || <border-style> || <border-color> ;border-bottom: <border-bottom-width>|| <border-style> || <border-color> ;border-right: <border-right-width> || <border-style> || <border-color> ; Each side of the border can be handled separately using this tags. Border sides takes the following values.

1. border-top: 5px dotted red – The top border is set using the tag border-top. The values or in the order width, style and color of top border.
2. border-left: 5pt dashed green – The left border is set using the tag border-left. The values or in the order width, style and color of top border.
3. border-bottom: 2% groove grey – The bottom border is set using the tag border-bottom. The values or in the order width, style and color of top border.
4. border-right: 5px solid blue – The right border is set using the tag border-right. The values or in the order width, style and color of top border.

Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-top : 2px dotted red ;
border-left : 2pt dashed rgb(100,100,100);
border-bottom: 5px ridge brown;
border-right: 5px groove #733366;
}

</style>
</HEAD>

<BODY>
<div> testing side border </div><br />

</body>

</HTML> Click on example to view the page produced by above code.

Border borders:Instead of setting each side of borders separately, the whole thing can be done using the single property ( the border property). Usage:border: <border-width> || <border-style> || <border-color>; This will set the border to any object.

1. border : 5px dotted green – The border is set using the tag border. The values or in the order width, style and color of border.

It sets the border on all four sides. Example 1:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border : 2px dotted red ;border : 2px dotted red ;
}

 

</style>
</HEAD>

<BODY>
<span> testing border properties </span>
</body>

</HTML> Click on example to view the page produced by above code. CSS Border Properties

Property	Description	Values
border	A shorthand property for setting all of the properties for the four borders in one declaration	border-width border-style border-color
border-bottom	A shorthand property for setting all of the properties for the bottom border in one declaration	border-bottom-width border-style border-color
border-bottom-color	Sets the color of the bottom border	border-color
border-bottom-style	Sets the style of the bottom border	border-style
border-bottom-width	Sets the width of the bottom border	thin medium thick length
border-color	Sets the color of the four borders, can have from one to four colors	color
border-left	A shorthand property for setting all of the properties for the left border in one declaration	border-left-width border-style border-color
border-left-color	Sets the color of the left border	border-color
border-left-style	Sets the style of the left border	border-style
border-left-width	Sets the width of the left border	thin medium thick length
border-right	A shorthand property for setting all of the properties for the right border in one declaration	border-right-width border-style border-color
border-right-color	Sets the color of the right border	border-color
border-right-style	Sets the style of the right border	border-style
border-right-width	Sets the width of the right border	thin medium thick length
border-style	Sets the style of the four borders, can have from one to four styles	none hidden dotted dashed solid double groove ridge inset outset
border-top	A shorthand property for setting all of the properties for the top border in one declaration	border-top-width border-style border-color
border-top-color	Sets the color of the top border	border-color
border-top-style	Sets the style of the top border	border-style
border-top-width	Sets the width of the top border	thin medium thick length
border-width	A shorthand property for setting the width of the four borders in one declaration, can have from one to four values	thin medium thick length

Top Margin The CSS margin properties define the space around elements. CSS padding properties refer to the white space within the border or we can say that it’s internal spacing. Setting the value of a margin is NOT the same as setting the padding value, and you should always remember that padding & margin are two different properties.All four sides (top, bottom, right, left) can be changed independently using separate properties. It is also possible to use negative values to overlap content. Usage:margin-top: 10px;
margin-top: 10pt;
margin-top: 10%;
margin-top: auto; Many a times we would need to set margin for our objects. This will set the top margin of the object.It takes the following values.

1. pt: You can set values in points. (e.g: 10pt or 100pt).
2. px: You can set values in pixels. (e.g: 10px or 100px).
3. %: You can set values in percentage. (e.g: 10% or 100%).
4. auto: This will set a automatic margin.

The following CSS code example shows how to set the value of the top margin:

<html>
<head>
<style type=”text/css”>
.topmargin
{
margin-top: 5cm
}
</style>
</head>

<body>
<p>
This paragraph does not have a specified margin.
</p>
<div>
This paragraph has a top margin of 5cm.
</p>
</body>

</html> Click on example to view the page produced by above code.

Left Margin Many times we would need to set margin for our objects. This will set the left marginof the object. Usage:margin-left: 10px;
margin-left: 10pt;
margin-left: 10%;
margin-left: auto; It takes the following values:

1. pt: You can set values in points. (e.g: 10pt or 100pt).
2. px: You can set values in pixels. (e.g: 10px or 100px).
3. %: You can set values in percentage. (e.g: 10% or 100%).
4. auto: This will set a automatic / default margin.

The following CSS code example shows how to set the value of the left margin:

<html>
<head>
<title>CSS margin example</title>
<style type=”text/css”>
.leftmargin
{
margin-left: 2cm
}
</style>
</head>

<body>
<p>
This paragraph does not have a specified margin. </p>
<p> This paragraph has a left margin of 2cm. </p>
</body>

</html> Click on example to view the page produced by above code.

Bottom Margin Many a times we would need to set margin for our objects. margin-bottom property can be used to set the bottom margin of the object. Usage:margin-bottom: 10px;
margin-bottom: 10pt;
margin-bottom: 10%;
margin-bottom: auto; It takes the following values:

1. pt: You can set values in points. (e.g: 10pt or 100pt).
2. px: You can set values in pixels. (e.g: 10px or 100px).
3. %: You can set values in percentage. (e.g: 10% or 100%).
4. auto: This will set a automatic / default margin.

The following CSS code example shows how to set the value of the bottom margin:

<html>
<head>
<title>CSS margin example</title>
<style type=”text/css”>
.bottommargin
{
margin-bottom: 1cm
}
</style>
</head>

<body>
<p>
This paragraph does not have a specified margin.
</p>
<p>
<p>
This paragraph has a bottom margin of 5cm.
</p>
<p>
This paragraph does not have a specified margin.
</p>
</body>

</html> Click example to view the page produced by above code.

Right Margin Many times we would need to set margin for our objects. margin-right will set the right margin of the object. Usage:margin-right: 10px;
margin-right: 10pt;
margin-right: 10%;
margin-right: auto; It takes the following values:

1. pt: You can set values in points. (e.g: 10pt or 100pt).
2. px: You can set values in pixels. (e.g: 10px or 100px).
3. %: You can set values in percentage. (e.g: 10% or 100%).
4. auto: This will set a automatic / default margin.

The following CSS code example shows how to set the value of the right margin:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>CSS Mragin example</TITLE>
<style type=”text/css”>
.rightmargin
{
margin-right: 10cm
}
</style>
</head>

<body>
<p>
This paragraph does not have a specified margin.
</p>
<p>
This paragraph has a right margin of 10cm.
</p>
</body>

</html> Click example to view the page produced by above code.  CSS Margin Properties

Property	Description	Values
margin	A shorthand property for setting the margin properties in one declaration	margin-top margin-right margin-bottom margin-left
margin-bottom	Sets the bottom margin of an element	auto length %
margin-left	Sets the left margin of an element	auto length %
margin-right	Sets the right margin of an element	auto length %
margin-top	Sets the top margin of an element	auto length %

Cursor The cursor for any element can be set by using the css property “cursor“.CSS allows you to specify custom cursor that should appear when hovering over an element.
The normal default cursor icons are usually a skewed arrow, an “I” icon that appears when selecting text, and an hourglass.

Example 1:

<html>
<head>
<title>CSS Cursor example</title>
<style>
p { cursor: wait; }
h1 { cursor: help; }
h2 { cursor: crosshair; }
h3{cursor:pointer}
</style>
</head>
<body>
<p>
This cursor will show the “wait” icon when you hover over this paragraph.
</p>
<h1>
This cursor will show the “help” icon when you hover over this heading.
</h1>
<h2>
This cursor will show the “crosshair” when you hover over this heading.
</h2>
<h3>This cursor will show the “pointer” when you hover over this heading.

</h3>
</body>

</html> Click here to view the page produced by above code.  Example 2:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd”&gt;
<HTML><HEAD><TITLE>css tutorial cursor</TITLE>
<BODY>
<P style=”CURSOR: default”
alt=”CSS Tutorial Cursor Default Image”>
<IMG src=”img/fct-images-cursor-default.gif”>
style=”cursor: default;” </P>
<P style=”CURSOR: hand”>
<IMG src=”img/fct-images-cursor-hand.gif”>
style=”cursor: hand;” </P>
<P>Note: the “hand” cursor icon is not supported by Firefox, and will
instead appear as the default “text” cursor icon. </P>
<P style=”CURSOR: pointer”>
<IMG src=”img/fct-images-cursor-hand.gif”>style=”cursor:
pointer;” </P>
<P style=”CURSOR: hand”>
<IMG src=”img/fct-images-cursor-hand.gif”> style=”cursor:
pointer; cursor: hand;” </P>
<P style=”CURSOR: crosshair”>
<IMG src=”img/fct-images-cursor-crosshair.gif”>
style=”cursor: crosshair;” </P>
<P style=”CURSOR: text”>
<IMG src=”img/fct-images-cursor-text.gif”> style=”cursor:
text;” </P>
<P style=”CURSOR: wait”>
<IMG src=”img/fct-images-cursor-hourglass.gif”>
style=”cursor: wait;” </P>
<P style=”CURSOR: help”>
<IMG src=”img/fct-images-cursor-help.gif”> style=”cursor:
help;” </P>
<P style=”CURSOR: move”>
<IMG src=”img/fct-images-cursor-move.gif”> style=”cursor:
move;” </P>
<P style=”CURSOR: e-resize”>
<IMG src=”img/fct-images-cursor-e-resize.gif”>
style=”cursor: e-resize;” </P>
<P style=”CURSOR: ne-resize”>
<IMG src=”img/fct-images-cursor-ne-resize.gif”>
style=”cursor: ne-resize;” </P>
<P style=”CURSOR: nw-resize”>
<IMG src=”img/fct-images-cursor-nw-resize.gif”>
style=”cursor: nw-resize;” </P>
<P style=”CURSOR: n-resize”>
<IMG src=”img/fct-images-cursor-n-resize.gif”>
style=”cursor: n-resize;” </P>
<P style=”CURSOR: se-resize”>
<IMG src=”img/fct-images-cursor-se-resize.gif”>
style=”cursor: se-resize;” </P>
<P style=”CURSOR: sw-resize”>
<IMG src=”img/fct-images-cursor-sw-resize.gif”>
style=”cursor: sw-resize;” </P>
<P style=”CURSOR: w-resize”>
<IMG src=”img/fct-images-cursor-w-resize.gif”>
style=”cursor: w-resize;” </P>
<P style=”CURSOR: progress”>
<IMG src=”img/fct-images-cursor-progress.gif”>
style=”cursor: progress;” </P>
<P style=”CURSOR: all-scroll”>
<IMG src=”img/fct-images-cursor-all-scroll.gif”>
style=”cursor: all-scroll;” </P>
<P style=”CURSOR: col-resize”>
<IMG src=”img/fct-images-cursor-col-resize.gif”>
style=”cursor: col-resize;” </P>
<P style=”CURSOR: not-allowed”>
<IMG src=”img/fct-images-cursor-not-allowed.gif”>
style=”cursor: not-allowed;” </P>
<P style=”CURSOR: no-drop”>
<IMG src=”img/fct-images-cursor-no-drop.gif”>
style=”cursor: no-drop;” </P>
<P>Note: In Firefox, the “no-drop” cursor icon will appear as a
“not-allowed” cursor icon. </P>
<P style=”CURSOR: row-resize”>
<IMG src=”img/fct-images-cursor-row-resize.gif”>
style=”cursor: row-resize;” </P>
<P style=”CURSOR: vertical-text”><IMG
src=”img/fct-images-cursor-vertical-text.gif”>
style=”cursor: vertical-text;” </P></DIV>

</BODY>
</HTML> Click here to view the page produced by above code.

Classification The CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control thevisibility of an element. CSS Classification Properties

Property	Description	Values
clear	Sets the sides of an element where other floating elements are not allowed	left right both none
cursor	Specifies the type of cursor to be displayed	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help
display	Sets how/if an element is displayed	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption
float	Sets where an image or a text will appear in another element	left right none
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed
visibility	Sets if an element should be visible or invisible	visible hidden collapse

Dimension The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines. CSS Dimension properties:

Property	Description	Values
height	Sets the height of an element	auto length %
line-height	Sets the distance between lines	normal number length %
max-height	Sets the maximum height of an element	none length %
max-width	Sets the maximum width of an element	none length %
min-height	Sets the minimum height of an element	length %
min-width	Sets the minimum width of an element	length %
width	Sets the width of an element	auto % length

onMouseover Effect Using onMouseover property, we can define how a link (or image or any other element) should act when the mouse is moved over the element. It is very simple to do this. Just follow the steps and you can do it. In head portion add style that you want the text to change, as follows:

<html>
<head>
<title>onMouseover example</title>
<style>
/*This is how the text will look before mouse over*/
.colc{
font-family: san-serif;
color: red;
}

/*This is how the text will look on mouse over. Note “hover” is the most important change here*/
.colc:hover
{
font-family: san-serif;
color: #456745;
text-decoration:none
}
</style>
</head>
<body>
<h2>onMouserover demo</h2>
<a href=”#” onMouseOver=”window.status’Go to http://www.ebizelindia.com'”>Sample link</a>
</body>

</html> Click on example to view the page produced by above code.

onMouseover Effect

Using onMouseover property, we can define how a link (or image or any other element) should act when the mouse is moved over the element. It is very simple to do this. Just follow the steps and you can do it.

In head portion add style that you want the text to change, as follows:

<html> <head> <title>onMouseover example</title> <style> /*This is how the text will look before mouse over*/ .colc{ font-family: san-serif; color: red; } /*This is how the text will look on mouse over. Note “hover” is the most important change here*/ .colc:hover { font-family: san-serif; color: #456745; text-decoration:none } </style> </head> <body> <h2>onMouserover demo</h2> <a href=”#” onMouseOver=”window.status’Go to http://www.ebizelindia.com'”>Sample link</a> </body> </html>

Click on example to view the page produced by above code.

Creating a CSS based menu

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <style type=”text/css”> .hovermenuul{ font: bold 13px arial; padding-left: 0; margin-left: -1; margin-top:-1; height: 20px; } .hovermenuul li{ list-style: none; display: inline; } .hovermenuul li a{ padding: 2px 0.5em; text-decoration: none; float: left; color: black; background-color: #FFF2BF; border: 2px solid #FFF2BF; } .hovermenuul li a:hover{ background-color: #FFE271; border-style: outset; color:#FF9966 } html>body .hovermenuul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } </style> <TITLE>Simple Hover menu[CSS based]</TITLE> <META NAME=”Generator” CONTENT=””> <META NAME=”Author” CONTENT=””> <META NAME=”Keywords” CONTENT=””> <META NAME=”Description” CONTENT=””> </HEAD> <BODY bgcolor=’#FFCC00′> <div> <ul> <li><a href=”http://www.ebizelindia.com”>eBIZ.com</a></li&gt; <li><a href=”http://education.ebizelindia.com”>eBIZ education</a></li> <li><a href=”http://ebizgk.com”>eBIZ GK</a></li> <li><a href=”http://support.ebizelindia.com”>eBIZ.com support</a></li> <li><a href=”http://mail.ebizelindia.com”>Web mail</a></li> </ul> </div> </BODY> </HTML>

Click here to view the page produced by above code.

Color Value

Style Object The Style object represents an individual style statement. The Style object can be accessed from the document or from the elements to which that style is applied. Syntax for using the Style object properties:document.getElementById(“id“).style.property=”value” The Style object property categories:

• Background
• Border and Margin
• Layout
• List
• Misc
• Positioning
• Printing
• Scrollbar
• Table
• Text
• Standard

IE:Internet Explorer, M: Mac IE only, W: Windows IE only, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).  Background properties:

Property	Description	IE	F	O
background	Sets all background properties in one	4	1	9
backgroundAttachment	Sets whether a background-image is fixed or scrolls with the page	4	1	9
backgroundColor	Sets the background-color of an element	4	1	9
backgroundImage	Sets the background-image of an element	4	1	9
backgroundPosition	Sets the starting position of a background-image	4	No	No
backgroundPositionX	Sets the x-coordinates of the backgroundPosition property	4	No	No
backgroundPositionY	Sets the y-coordinates of the backgroundPosition property	4	No	No
backgroundRepeat	Sets if/how a background-image will be repeated	4	1	9

Border and Margin properties:

Property	Description	IE	F	O
border	Sets all properties for the four borders in one	4	1	9
borderBottom	Sets all properties for the bottom border in one	4	1	9
borderBottomColor	Sets the color of the bottom border	4	1	9
borderBottomStyle	Sets the style of the bottom border	4	1	9
borderBottomWidth	Sets the width of the bottom border	4	1	9
borderColor	Sets the color of all four borders (can have up to four colors)	4	1	9
borderLeft	Sets all properties for the left border in one	4	1	9
borderLeftColor	Sets the color of the left border	4	1	9
borderLeftStyle	Sets the style of the left border	4	1	9
borderLeftWidth	Sets the width of the left border	4	1	9
borderRight	Sets all properties for the right border in one	4	1	9
borderRightColor	Sets the color of the right border	4	1	9
borderRightStyle	Sets the style of the right border	4	1	9
borderRightWidth	Sets the width of the right border	4	1	9
borderStyle	Sets the style of all four borders (can have up to four styles)	4	1	9
borderTop	Sets all properties for the top border in one	4	1	9
borderTopColor	Sets the color of the top border	4	1	9
borderTopStyle	Sets the style of the top border	4	1	9
borderTopWidth	Sets the width of the top border	4	1	9
borderWidth	Sets the width of all four borders (can have up to four widths)	4	1	9
margin	Sets the margins of an element (can have up to four values)	4	1	9
marginBottom	Sets the bottom margin of an element	4	1	9
marginLeft	Sets the left margin of an element	4	1	9
marginRight	Sets the right margin of an element	4	1	9
marginTop	Sets the top margin of an element	4	1	9
outline	Sets all outline properties in one	5M	1	9
outlineColor	Sets the color of the outline around an element	5M	1	9
outlineStyle	Sets the style of the outline around an element	5M	1	9
outlineWidth	Sets the width of the outline around an element	5M	1	9
padding	Sets the padding of an element (can have up to four values)	4	1	9
paddingBottom	Sets the bottom padding of an element	4	1	9
paddingLeft	Sets the left padding of an element	4	1	9
paddingRight	Sets the right padding of an element	4	1	9
paddingTop	Sets the top padding of an element	4	1	9

Layout properties

Property	Description	IE	F	O
clear	Sets on which sides of an element other floating elements are not allowed	4	1	9
clip	Sets the shape of an element	4	1	9
content	Sets meta-information	5M	1
counterIncrement	Sets a list of counter names, followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default is 1	5M	1
counterReset	Sets a list of counter names, followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0	5M	1
cssFloat	Sets where an image or a text will appear (float) in another element	5M	1	9
cursor	Sets the type of cursor to be displayed	4	1	9
direction	Sets the text direction of an element	5	1	9
display	Sets how an element will be displayed	4	1	9
height	Sets the height of an element	4	1	9
markerOffset	Sets the distance between the nearest border edges of a marker box and its principal box	5M	1
marks	Sets whether cross marks or crop marks should be rendered just outside the page box edge	5M	1
maxHeight	Sets the maximum height of an element	5M	1	9
maxWidth	Sets the maximum width of an element	5M	1	9
minHeight	Sets the minimum height of an element	5M	1	9
minWidth	Sets the minimum width of an element	5M	1	9
overflow	Specifies what to do with content that does not fit in an element box	4	1	9
verticalAlign	Sets the vertical alignment of content in an element	4	1	No
visibility	Sets whether or not an element should be visible	4	1	9
width	Sets the width of an element	4	1	9

List properties

Property	Description	IE	F	O
listStyle	Sets all the properties for a list in one	4	1	9
listStyleImage	Sets an image as the list-item marker	4	1	No
listStylePosition	Positions the list-item marker	4	1	9
listStyleType	Sets the list-item marker type	4	1	9

Misc properties

Property	Description	IE	F	O
cssText		4	1

Positioning properties

Property	Description	IE	F	O
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	5	1	9
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	4	1	9
position	Places an element in a static, relative, absolute or fixed position	4	1	9
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	5	1	9
top	Sets how far the top edge of an element is above/below the top edge of the parent element	4	1	9
zIndex	Sets the stack order of an element	4	1	9

Printing properties

Property	Description	>IE	F	O
orphans	Sets the minimum number of lines for a paragraph that must be left at the bottom of a page	5M	1	9
page	Sets a page type to use when displaying an element	5M	1	9
pageBreakAfter	Sets the page-breaking behavior after an element	4	1	9
pageBreakBefore	Sets the page-breaking behavior before an element	4	1	9
pageBreakInside	Sets the page-breaking behavior inside an element	5M	1	9
size	Sets the orientation and size of a page		1	9
widows	Sets the minimum number of lines for a paragraph that must be left at the top of a page	5M	1	9

Scrollbar properties (IE-only)

Property	Description	IE	F	O
scrollbar3dLightColor	Sets the color of the left and top sides of the arrows and scroll boxes	5W	No	No
scrollbarArrowColor	Sets the color of the arrows on a scroll bar	5W	No	No
scrollbarBaseColor	Sets the base color of the scroll bar	5W	No	No
scrollbarDarkShadowColor	Sets the color of the right and bottom sides of the arrows and scroll boxes	5W	No	No
scrollbarFaceColor	Sets the front color of the scroll bar	5W	No	No
scrollbarHighlightColor	Sets the color of the left and top sides of the arrows and scroll boxes, and the background of a scroll bar	5W	No	No
scrollbarShadowColor	Sets the color of the right and bottom sides of the arrows and scroll boxes	5W	No	No
scrollbarTrackColor	Sets the background color of a scroll bar	5W	No	No

Table properties

Property	Description	IE	F	O
borderCollapse	Sets whether the table border are collapsed into a single border or detached as in standard HTML	5	1	9
borderSpacing	Sets the distance that separates cell borders	5M	1	9
captionSide	Sets the position of the table caption	5M	No	No
emptyCells	Sets whether or not to show empty cells in a table	5M	1	9
tableLayout	Sets the algorithm used to display the table cells, rows, and columns	5	No	No

Text properties

Property	Description	IE	F	O
color	Sets the color of the text	4	1	9
font	Sets all font properties in one	4	1	9
fontFamily	Sets the font of an element	4	1	9
fontSize	Sets the font-size of an element	4	1	9
fontSizeAdjust	Sets/adjusts the size of a text	5M	1	No
fontStretch	Sets how to condense or stretch a font	5M	No	No
fontStyle	Sets the font-style of an element	4	1	9
fontVariant	Displays text in a small-caps font	4	1	9
fontWeight	Sets the boldness of the font	4	1	9
letterSpacing	Sets the space between characters	4	1	9
lineHeight	Sets the distance between lines	4	1	9
quotes	Sets which quotation marks to use in a text	5M	1
textAlign	Aligns the text	4	1	9
textDecoration	Sets the decoration of a text	4	1	9
textIndent	Indents the first line of text	4	1	9
textShadow	Sets the shadow effect of a text	5M	1
textTransform	Sets capitalization effect on a text	4	1	9
unicodeBidi		5	1
whiteSpace	Sets how to handle line-breaks and white-space in a text	4	1	9
wordSpacing	Sets the space between words in a text	6	1	9

Standard Properties

Property	Description	IE	F	O
dir	Sets or returns the direction of text	5	1	9
lang	Sets or returns the language code for an element	5	1	9
title	Sets or returns an element’s advisory title	5	1	9

Web standards and Validation

W3C is the World Wide Web Consortium, which is an independent organization that manages code standards on the web (e.g. HTML, CSS, XML and others such web technologies). Microsoft, The Mozilla Foundation and many others are a part of W3C and agree upon the future developments of the standards.

If you have been working just a bit with web design, you probably know how a webpage is presented across different browsers and that there can be a big differences on different browsers. It can be very frustrating and time-consuming to create a webpage which can be viewed in Mozilla, Internet Explorer, Opera and all the rest of the existing browsers.

The idea of having standards is to agree upon a common denominator on how to use web technologies. A web developer has a certainty, by observing the standards, that what he or she does will work in a more appropriate manner across different platforms.

We therefore recommend that you back up the work carried out by the W3C and validate your CSS in order to observe the standard.

CSS validator

W3C has made a so-called validator which reads your stylesheet and returns a status listing errors and warnings, if your CSS does not validat; to make it easier to observe the CSS standard.

To make it easier for you to validate your stylesheet, you can do it directly from this webpage. Simply replace the URL with the URL of your stylesheet below and click to validate. You will then be informed by the W3C site if there are any errors found.