css

CSS was invented by Håkon Wium Lie on October 10, 1994 and maintained through a group of people within the W3C called the CSS Working Group.
cascading style sheets(css) is language which is used for formatting a document written in markup language.
it handles the look and feel of the webpage.
using cascading style sheet we can control the font color,font style,paragraph spacing,etc.
using cascading style sheet we can also control the variations of display size of web pages in various devices and screen sizes.

Advantages:

Platform independant:

It is platform independant and supports all latest browsers.
Faster page load time:

Using CSS increases the speed of the page load time,thus by reducing the size of the code.

We can reuse the code anywhere in multiple html pages,so it saves the time.

Has many styles when compared to the html tags.

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	h1
	{
	color:yellow;
	text-align: center;
	font-family: “monotype corsiva”;
	}
	p
	{
	color: blue;
	text-align: center;
	}
	body
	{
	background-color: orange;
	}
	</style>
	</head>
	<body>
	<h1>This is KPRBLOG</h1>
	<p>Hello World!</p>
	<p>This paragraph is styled with CSS.</p>
	</body>
	</html>

Using this code we can give specific color to h1 tag.
Specific color to body background.
In this example,we have specified the font style for heading1 as “monotype corsiva”.
In this we have also gave specific color to the paragraph <p> tag.
From this example we have learnt how to modify the background color,font style and color in specific tags.

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	ul.a {
	list-style-type: circle;
	}

	ul.b {
	list-style-type: square;
	}

	ol.c {
	list-style-type: upper-roman;
	}

	ol.d {
	list-style-type: lower-alpha;
	}
	</style>
	</head>
	<body>

	<p>Example of unordered lists:</p>
	<ul class=”a“>
	<li>CSE</li>
	<li>ECE</li>
	<li>EEE</li>
	</ul>

	<ul class=”b“>
	<li>CSE</li>
	<li>ECE</li>
	<li>EEE</li>
	</ul>

	<p>Example of ordered lists:</p>
	<ol class=”c“>
	<li>CSE</li>
	<li>ECE</li>
	<li>EEE</li>
	</ol>

	<ol class=”d“>
	<li>CSE</li>
	<li>ECE</li>
	<li>EEE</li>
	</ol>

	</body>
	</html>

In this example program we have used table attributes.
border collapse is used to display a single border table.
width and height of the table is given by Width,height properties.
Table padding is used to control the space between the table border and text in the table.
Table color specifies the color of the table border,background color and the font color.

To set the width and height of the element in all the browsers correctly,we need to know about box model.
All html elements can be considered as boxes.

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	h1.hidden {
	visibility: hidden;
	}
	</style>
	</head>
	<body>

	<h1>This is a visible heading: www.kprblog.in</h1>
	<h1 class=”hidden“>This is a hidden heading</h1>
	<p>Notice that the hidden heading still takes up space.</p>

	</body>
	</html>

position property is used to specify the type of positioning property used for the elements.
the types of positioning are static,relative,fixed and absolute.
static: It is not affected by the top,bottom,right and left properties.
relative: It is positioned relative to its normal positioned,other content will not be adjusted to fit into the gap left by this element.
fixed: It is positioned relative to the viewport, that is if even the page is scrolled the image remains in the same place.
absolute: It is positioned relative to nearest position ancestor, that is the image is moved along when the page is scrolled.

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	div.relative {
	position: relative;
	width: 400px;
	height: 200px;
	border: 3px solid #8AC007;
	}

	div.absolute {
	position: absolute;
	top: 80px;
	right: 0;
	width: 200px;
	height: 100px;
	border: 3px solid #8AC007;
	}
	</style>
	</head>
	<pre>
	<body>

	<h2>position: absolute;</h2>

	<p>An element with position: absolute; is positioned relative to
	the nearest positioned ancestor (instead of positioned relative to
	the viewport, like fixed):</p>

	<div class=”relative“>This div element has position: relative;
	www.kprblog.in
	<div class=”absolute“>This div element has
	position: absolute;
	www.kprblog.in</div>
	</div>

	</body>
	</pre>
	</html>

In this example relative and absolute is positioning is used.
relative: It is positioned relative to its normal positioned,other content will not be adjusted to fit into the gap left by this element.
absolute: It is positioned relative to nearest position ancestor.

For more click here Tricksout..