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!
Reliable, Affordable, Feature-Rich Web Hosting!
Take the uncertainty out of Web hosting and let
GoDaddy.com put service, performance and value back in. No matter which
hosting type or plan you choose, your site receives 24/7
maintenance and protection in our world-class data center. Plus,
you get the expert, friendly service you deserve, from the
world's largest hostname provider.
With three plans to choose from and
prices starting at just $4.99 per month, GoDaddy.com is sure to have a plan that's
right-sized and right-priced just for you!
All plans feature FREE 24x7 setup, FREE 24x7 monitoring, best-
of-breed routers, firewalls and servers, 24x7 onsite physical security
and access to our exclusive Go Daddy Hosting Connection, THE place
to install over 30 FREE applications. Virtual Dedicated and Dedicated
Server plans also available.
Visit GoDaddy.com today.
Virtual Dedicated, Dedicated Server and unlimited plans also available.
Save 20% on 12 months or more of shared web hosting - Enter code w3s20off at checkout
| 
