Why do style sheets exist?
SGML (of which HTML is a derivative) was meant to be a
device-independent method for conveying a document's
structural and semantic content (its meaning.) It was
never meant to convey physical formatting information.
HTML has crossed this line and now contains many
elements and attributes which specify visual style and
formatting information. One of the main reasons for
style sheets is to stop the creation of new HTML
physical formatting constructs and once again separate
style information from document content.
What are the advantages/disadvantages of the various
style methods?
External Style Sheets
Advantages
* Can control styles for multiple documents at once
* Classes can be created for use on multiple HTML
element types in many documents
* Selector and grouping methods can be used to apply
styles under complex contexts
Disadvantages
* An extra download is required to import style
information for each document
* The rendering of the document may be delayed until the
external style sheet is loaded
* Becomes slightly unwieldy for small quantities of
style definitions
Embedded Style Sheets
Advantages
* Classes can be created for use on multiple tag types
in the document
* Selector and grouping methods can be used to apply
styles under complex contexts
* No additional downloads necessary to receive style
information
Disadvantages
* This method can not control styles for multiple
documents at once
Inline Styles
Advantages
* Useful for small quantities of style definitions
* Can override other style specification methods at the
local level so only exceptions need to be listed in
conjunction with other style methods
Disadvantages
* Does not distance style information from content (a
main goal of SGML/HTML)
* Can not control styles for multiple documents at once
* Author can not create or control classes of elements
to control multiple element types within the document
* Selector grouping methods can not be used to create
complex element addressing scenarios
What is inline style? How to link?
Inline style is the style attached to one specific
element. The style is specified directly in the start
tag as a value of the STYLE attribute and will apply
exclusively to this specific element occurrence.
<P STYLE="text-indent: 10pt">Indented paragraph</P>
What is imported Style Sheet? How to link?
Imported Style Sheet is a sheet that can be imported to
(combined with) another sheet. This allows creating one
main sheet containing declarations that apply to the
whole site and partial sheets containing declarations
that apply to specific elements (or documents) that may
require additional styling. By importing partial sheets
to the main sheet a number of sources can be combined
into one.
To import a style sheet or style sheets include the
@import notation or notations in the STYLE element. The
@import notations must come before any other
declaration. If more than one sheet is imported they
will cascade in order they are imported - the last
imported sheet will override the next last; the next
last will override the second last, and so on. If the
imported style is in conflict with the rules declared in
the main sheet then it will be overridden.
<LINK REL=STYLESHEET HREF="main.css" TYPE="text/css">
<STYLE TYPE="text=css">
<!--
@import url(http://www.and.so.on.partial1.css);
@import url(http://www.and.so.on.partial2.css);
.... other statements
-->
</STYLE>
What is a Style Sheet?
Style sheets are the way that standards-compliant Web
designers define the layout, look-and-feel, and design
of their pages. They are called Cascading Style Sheets
or CSS. With style sheets, a designer can define many
aspects of a Web page:
* fonts
* colors
* layout
* positioning
* imagery
* accessibility
Style sheets give you a lot of power to define how your
pages will look. And another great thing about them is
that style sheets make it really easy to update your
pages when you want to make a new design. Simply load in
a new style sheet onto your pages and you're done.
What is alternate Style Sheet? How to link?
Alternate Style Sheet is a sheet defining an alternate
style to be used in place of style(s) declared as
persistent and/or preferred .
Persistent style is a default style that applies when
style sheets are enabled but can disabled in favor of an
alternate style, e.g.:
<LINK REL=Stylesheet HREF="style.css" TYPE="text/css">
Preferred style is a default style that applies
automatically and is declared by setting the TITLE
attribute to the LINK element. There can only be one
preferred style, e.g.:
<LINK REL=Stylesheet HREF="style2.css" TYPE="text/css"
TITLE="appropriate style description">
Alternate style gives an user the choice of selecting an
alternative style - a very convenient way of specifying
a media dependent style. Note: Each group of alternate
styles must have unique TITLE, e.g.:
<LINK REL="Alternate Stylesheet" HREF="style3.css"
TYPE="text/css" TITLE="appropriate style description"
MEDIA=screen>
<LINK REL="Alternate Stylesheet" HREF="style4.css"
TYPE="text/css" TITLE="appropriate style description"
MEDIA=print>
Alternate stylesheet are not yet supported.
How can you set a minimum width for IE?
To set a minimum width, the CSS property is 'min-width'.
This can be very useful and works well in good browsers.
IE doesn't understand 'min-width'. However, it has a
proprietary property called 'expression' which allows us
to feed it javascript via a stylesheet. Below is how to
set a (780px) minimum width for IE...
<!--[if gte IE 5]> <style type="text/css">
body {
width:expression(documentElement.clientWidth < 780 ? (documentElement.clientWidth
== 0 ? (body.clientWidth < 780 ? "780px" : "auto") :
"780px") : "auto" );
}
</style>
<![endif]-->
As the property is non-standard, it won't validate with
the W3C validator, so if we put it in the head like this
(above) - in an IE conditional comment - the validator
will ignore it and the page will get a clean bill of
health.
Which browsers support CSS?
It depends on your definition of "support." If you are
interested in those browsers which makes some attempt at
supporting CSS, no matter how partial or bug-ridden,
then the list is:
* Internet Explorer 3.0 and above
* Navigator 4.0 and above
* Opera 3.6 and above
* Konqueror
* Arena
* Emacs-w3
* Amaya
* Lexicon
* XPublish by Media Design in·Progress
If instead you're interested in those browsers which are
known to do a credible job of bug-free and mostly
completel support for CSS1, then the list narrows
somewhat dramatically:
* Internet Explorer 5.0 for Macintosh and above
* Internet Exporer 5.5 for Windows and above
* Netscape Navigator 6.0 and above
* Opera 4.0 and above
While none of these browser can be claimed to have a
perfect implementation of CSS1, they are all quite good
and can be relied upon to operate in a consistent
fashion for most of CSS1.
Page Numbers :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
