CSS stands for Cascading Style Sheets. Styles define how to display HTML elements. Styles are normally stored in Style Sheets. External Style Sheets are stored in CSS files and can save you a lot of work.
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. HTML is used to structure content. CSS is used for formatting structured content.
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.
As the major browsers continued to add new HTML tags and attributes to the original HTML specification, it became more and more difficult to create websites where the content of HTML documents was clearly separated from the document's presentation layout. To solve this problem, the World Wide Web Consortium (W3C) created STYLES in addition to HTML 4.0.
CSS was a revolution in the world of web design. The benefits of CSS include:
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your web, just by editing one single CSS document.
Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.
What style will be used when there is more than one style specified for an HTML element?
All the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).
Assume you want a red color as the background of a webpage. Using HTML, you could have done it like this:
<body bgcolor="#ff0000">
With CSS the same result can be achieved like this:
body {background-color: #ff0000;}
Format
selector {property: value;}