Style Sheet Basic
NCD Style Sheet Guide v6.0
Sponsor's ADs:
Style Declaration
{PROPERTY: VALUE }
{PROPERTY: VALUE ; PROPERTY: VALUE ; ... PROPERTY: VALUE }
ex.
{font-family: Arial; Color:red}
Style Specification
To specify the Style Declaration to Tags:
- Linking Style Sheet
- Embedding Style Sheet
- Inline Style
- Import Style Sheet
Linking Style Sheet
Style Sheet File (#.css):
SELECTOR1 {PROPERTY: VALUE }
SELECTOR2 {PROPERTY: VALUE }
....
SELECTORn {PROPERTY: VALUE }
ex.
H1 {font-family: Arial; font-size: 40pt; Color:red}
P {font-size:12pt; line-height:20pt}
To specify the Style Sheet File from HTML:
<LINK REL="stylesheet" TYPE="text/css" HREF="#.css">
ex.
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="samp.css">
</HEAD>
<BODY>
<H1>Today is fine.</H1>
<P>
Long before the advent of TV weather forecasters,
people used tabletop glasses like a spherical flask
to predict upcoming changes in weather.
</P>
</BODY>
View this Example Page
Embedding Style Sheet
<HEAD>
<STYLE TYPE="text/css">
SELECTOR1 {PROPERTY: VALUE }
SELECTOR2 {PROPERTY: VALUE }
....
SELECTORn {PROPERTY: VALUE }
</STYLE>
</HEAD>
ex.
<HEAD>
<STYLE TYPE="text/css">
H1 {font-family: Arial; font-size: 40pt; Color:red}
P {font-size:12pt; line-height:20pt}
</STYLE>
</HEAD>
<BODY>
<H1>Today is fine.</H1>
<P>
Long before the advent of TV weather forecasters,
people used tabletop glasses like a spherical flask
to predict upcoming changes in weather.
</P>
</BODY>
View this Example Page
Inline Styles
<TAG STYLE="PROPERTY: VALUE"> ... </TAG>
ex.
<BODY>
<H1 STYLE="font-family: Arial; font-size: 40pt; Color:red">
Today is fine.
</H1>
<P STYLE="font-size:12pt; line-height:20pt">
Long before the advent of TV weather forecasters,
people used tabletop glasses like a spherical flask
to predict upcoming changes in weather.
</P>
</BODY>
View this Example Page
Import Style Sheet
@import url(#.css);
<HEAD>
<STYLE TYPE="text/css">
@import url(samp.css);
</STYLE>
</HEAD>
<BODY>
<H1>Today is fine.</H1>
<P>
Long before the advent of TV weather forecasters,
people used tabletop glasses like a spherical flask
to predict upcoming changes in weather.
</P>
</BODY>
View this Example Page
Style Sheet Guide
|
HTML Design Guide
Basic |
Selector |
Cascading
Font |
Text |
List |
Color & Background |
Box |
Table |
Position & Format |
Other|
Selector List |
Property List
Network Communication Design -
/
Copyright & Publishing 1994-2008
Network Communication Design