CSS Introduction
What you should already know
Before you continue you should have a basic understanding of the following:
If you want to study these subjects first, find the tutorials on our Home page.
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
CSS demo
An HTML document can be displayed with different styles:
See how it works
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
Tip: Even multiple external style sheets can be referenced
inside a single HTML document.
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)
So, an inline style (inside an HTML element) has the highest priority, which
means that it will override a style defined inside the <head> tag, or in
an external style sheet, or in a browser (a default value).
 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!
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 3500 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
