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:fixedWhen 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;
}
