What is CSS?
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles are normally stored in Style Sheets
- 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
- Multiple style definitions will cascade into one
Styles solved a big problem
The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of a document, like:<p>This is a paragraph.</p> <h1>This is a heading</h1>When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process.To solve this problem, the World Wide Web Consortium (W3C) - responsible for standardizing HTML - created CSS in addition to HTML 4.0.
With HTML 4.0, all formatting can be removed from the HTML document and stored in a separate CSS file.
All browsers support CSS today.
Styles save a lot of work
Styles sheets define HOW HTML elements are to be displayed.Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single CSS document!
Multiple styles will cascade into one
Style sheets allow style information to be specified in many ways.Styles can be specified:
- inside an HTML element
- inside the head section of an HTML page
- in an external CSS file
Cascading order - What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:- Browser default
- External style sheet
- Internal style sheet (in the head section)
- Inline style (inside an HTML element)
If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!
