What is CSS?

The main benefit in CSS, is that it manages to separate the style from the content on your web page.

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

5 Advantages of CSS Web Design

 

Consistency

 

By making one change to your website's CSS style sheet, you can automatically make it to every page of your website. The bigger your website, the more time CSS saves you. And not only does CSS save time, it also ensures that your web pages have consistent styling throughout your site.

Bandwidth Reduction

 

When CSS separates your website's content from its design language, you dramatically reduce your file transfer size. Your CSS document will be stored externally, and will be accessed only once when a visitor requests your website. In contrast, when you create a website using tables, every page of your website will be accessed with each visit. Your reduced bandwidth needs will result in a faster load time and could cut your web hosting costs.

Search Engines

 

CSS is considered a clean coding technique, which means search engines won't have to struggle to "read" its content. Also, using CSS will leave your website with more content than code and content is critical to your search engine success.

Browser Compatibility

 

The recent arrival of Google Chrome is further evidence that today's Internet users have more browser options than ever before, which makes browser compatibility a major issue for your website. CSS stylesheets increase your website's adaptability and ensure that more visitors will be able to view your website in the way you intended.

Viewing Options

 

Another common web design concern is the increasing need to make websites available for different media. CSS can help you tackle this challenge by allowing the same markup page to be presented in different viewing styles

Examples

To set the background color

body {background-color:#b0c4de;}

To set image as background of a page

body {background-image:url('paper.gif');}

To set the text color

p {color:rgb(0,0,255);}

To align the text to right

p {text-align:right;}

CSS Positioning

Mostly css positioning is important  

position:static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.

#div-1 {

 position:static;

}

position:relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Let's move div-1 down 20 pixels, and to the left 40 pixels:

#div-1 {

 position:relative;

 top:20px;

 left:-40px;

}

position:absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let's move div-1a to the top right of the page:

#div-1a {

 position:absolute;

 top:0;

 right:0;

 width:200px;

}

position:fixed

When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is used.

#div-1a {

 position:fixed;

 top:20px;

 right:10px;

 }

position:relative + position:absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {

 position:relative;

}

#div-1a {

 position:absolute;

 top:0;

 right:0;

 width:200px;

}