First introduced in 1996 by the World Wide Web
Consortium1, Cascading Style Sheets (CSS) serve an
important role for specifying the appearance of HTML pages. Style
sheets help you influence the way your HTML pages look in a way that
is far more efficient that the HTML element-by-element techniques
used in the past. With advances in Web browser technologies, CSS
level 22, should be now available to many users, and CSS
Level 3 is in development3.
Rather than specify the appearance of elements in an HTML file, writers need a way to specify the appearance of an entire set of HTML pages all in one place, separate from the HTML content. Style sheets make this possible. You can use style sheets to efficiently create a consistent look and feel for your web and change this look and feel quickly and easily.
Using style sheets, you can tell a Web browser how to display HTML elements such as margins, point sizes, text background colors, and many others. For example, you can influence the margin spacing used in every P (paragraph) element in your HTML pages on your Web site. Using variations within style sheets called classes, you can create different styles of an HTML element.
For example, let's say you have a need for cautionary statements in your document. One such paragraph class could be a statement of warning, another paragraph class could be a statement of imminent danger. You would like Web browsers to display these paragraph classes in different ways--the danger in red, bold, and underlined text; the warnings in purple and bold text.
In your style sheet file, call it mystyle.css, you would place these statements to affect the appearance of the P (paragraph) element:
With a little common sense and creativity, you you can still meet the needs of users who cannot use the style sheets. In fact, when you use style sheets, you can avoid much of the kind of syntax gymnastics that HTML writers have had to put into their pages to make things "look right." The result is that your HTML pages can be leaner and more easily displayed in all Web browsers. And instead of fiddling with how your Web pages look, you can focus on what your Web pages mean.
====================================================================
The Purpose of Style Sheets
The overall purpose of style sheets are to help people who write HTML to separate the content of a Web page from specifications of how it looks. Style sheets are used to influence HTML page appearance. For example, HTML writers might want to indent the first line of each paragraph by five spaces. To do this the old way, they would place the (non-breaking space) entity five times at the start of each paragraph. This worked fine for pages generated by HTML editors, or even on a small scale for hand-prepared HTML pages. But what if the Web designer decided that the paragraphs should not have the first line of each paragraph indented? It would be a laborious process to have to go through all the HTML pages to remove the entities.Rather than specify the appearance of elements in an HTML file, writers need a way to specify the appearance of an entire set of HTML pages all in one place, separate from the HTML content. Style sheets make this possible. You can use style sheets to efficiently create a consistent look and feel for your web and change this look and feel quickly and easily.
How Style Sheets Work
You create a style sheet in a file using a command syntax that describes how HTML elements in your files should be rendered in a Web browser. In your HTML files, you identify this style sheet file. When a user accesses your HTML pages, the Web browser refers to your style sheet file to display your HTML pages.Using style sheets, you can tell a Web browser how to display HTML elements such as margins, point sizes, text background colors, and many others. For example, you can influence the margin spacing used in every P (paragraph) element in your HTML pages on your Web site. Using variations within style sheets called classes, you can create different styles of an HTML element.
For example, let's say you have a need for cautionary statements in your document. One such paragraph class could be a statement of warning, another paragraph class could be a statement of imminent danger. You would like Web browsers to display these paragraph classes in different ways--the danger in red, bold, and underlined text; the warnings in purple and bold text.
In your style sheet file, call it mystyle.css, you would place these statements to affect the appearance of the P (paragraph) element:
P.danger {
color: red;
font-weight: bold;
text-decoration: underline;
}
P.warning {
color: purple;
font-weight: bold;
}
In your HTML files, you identify the style sheet you are using
(mystyle.css), and then you can then use these classes to label
statements.
For example, in your HTML file
mystyle.html, you could have:
<HTML>
<HEAD>
<LINK Rel="stylesheet" Href="mystyle.css" Type="text/css">
</HEAD>
<BODY>
<P class="warning">
Alien approaching!
</P>
<P class="danger">
Destruction imminent!
</P>
</BODY>
</HTML>
Your users will need to have more recent versions of the popular
Internet Explorer (3.0 or above) or Netscape Navigator (4.0 or
above) in order to see the style effects. If your users don't have
these style-enabled browsers, they won't see all the effects you
create. Therefore, in using style sheets, like many other kinds of
new HTML elements that have come before, you will need to be
sensitive to users who do not have the most current Web browser
software.
With a little common sense and creativity, you you can still meet the needs of users who cannot use the style sheets. In fact, when you use style sheets, you can avoid much of the kind of syntax gymnastics that HTML writers have had to put into their pages to make things "look right." The result is that your HTML pages can be leaner and more easily displayed in all Web browsers. And instead of fiddling with how your Web pages look, you can focus on what your Web pages mean.
====================================================================
CSS
CSS stands for Cascading
Style
Sheets. The styles define how to display
HTML elements and are normally stored in Style Sheets (.css).
External Style Sheets are stored in CSS files and can save you a lot of work.
Multiple style definitions will cascade into one. 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 two major browsers - Netscape and Internet Explorer - continued to
add new HTML tags and attributes (like the
<font>
tag and the color attribute) to the original HTML specification, it became more
and more difficult to create Web sites 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) - the non profit, standard setting consortium,
responsible for standardizing HTML created
STYLES
in addition to HTML 4.0. All major browsers support Cascading Style Sheets.
Styles sheets define how HTML elements are to be displayed, just like the
font tag and the color attribute in HTML 3.2. 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.
CSS is a breakthrough in Web design because it allows developers to control
the style and layout of multiple Web pages all at once. As a Web developer you
can define a style for each HTML element and apply it to as many Web pages as
you want. To make a global change, simply change the style, and all elements
in the Web are updated automatically. 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? 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 (inside the <head> tag).
-
Inline style (inside an HTML element).
No comments:
Post a Comment