Overview of Cascading Style Sheets (CSS)
by WebAIM
What Are Cascading Style Sheets?
Cascading Style Sheets, or CSS, allow you modify properties of existing HTML
elements. All web browsers are based upon a built-in style sheet. This style
sheet is part of the program and is not typically viewable. It instructs the
browser how to display individual items or elements in your page. For instance,
when the browser sees the <p> tag, it knows to skip a line and start a
new section because that´s what the built-in style sheet instructs it to do.
The <strong>, <table>, and every other HTML tag is defined in this
style sheet; their size, color, position, and other characteristics are all
defined within it. When you add your own style sheet to a web page, you can
override this built-in style sheet and tell the browser to display elements
in a different way, according to your style sheet.
Although most tags allow you to add attributes to them to give them certain
characteristics (e.g., color="red"), with style sheets you have increased
flexibility and the capability to add several attributes that are not available
with normal HTML. One advantage of styles sheets (or just ´styles´ for short)
is that you don´t have to add extra attributes to individual elements, instead,
you can define a style for that element to achieve that attribute every time
that particular element is used. So, if you want all of the paragraphs on your
page to be a certain size, you don´t have to use the <font> element in
every paragraph. Instead, you tell the web browser that every time it encounters
a <p> to display it the size you want. Also, styles are easy to edit and
change; instead of finding and editing each occurrence of an HTML element, you
may change the style that was defined for that element and all occurances of
the element in the web page (or entire web site) will be changed.
Why Do They Call Them "Cascading"?
The word "cascading" applies to a hierarchy of importance. The user
has the highest level of control. By applying a user-selected style sheet, the
user has complete control over the styles of the web page. The next level down
in the hierarchy is in the document itself. If a style is applied to an element,
this takes precedence over any other style declaration (except for the user´s
own styles). Further down in the hierarchy are styles specified within the <head>
of a single page. Finally, there are styles specified in external documents
- these can be applied to multiple pages or an entire site.
Also, if you declare a style for the same element more than once, it is the
last style that will be applied. Take a look at the same style attributes below:
h1 {color:red; background-color:yellow;}
h1 {color:blue; background-color:red;}
h1 {color:white; background-color:black;}
In this example, there are three separate color combinations for the <h1>
tag. The first two color combinations will be ignored. Only the last one will
be applied. The last one in the cascade trumps all others.
The Issue of Control
The fact that the end user has the greatest control over the styles of a web
page is an accessibility benefit. This means that a person with extremely low
vision can set the background color of all web pages to black, and the font
to 300% bold white text—or any other style that best fits the needs of
that individual. Some designers are reluctant to give up any of their control
over the look and feel of their creations. The truth is that they never had
this control to begin with. The web is an electronic format. People can view
it in any browser that they choose, and they can manipulate it as much as they
like.
When it comes right down to it, the idea that web developers have control over
the display of their content is an illusion. The final look and feel has always
been in the control of the user. With style sheets, this control only increases.
Rather than fight it, web developers should just accept this fact and make sure
that their documents transform well.
posted on Jun 1, 2007
Article
Topics
Google