Style Sheet Basic

Style Sheet Guide v1.0

+ Style Declaration

{PROPERTY: VALUE }

{PROPERTY: VALUE ; PROPERTY: VALUE ; ... PROPERTY: VALUE }

ex.
{font-family: Arial; Color:red}


More about Properties: Style Property Reference



How to specify the Style Declaration to Tags.

There are three ways.

+ Linking Style Sheet

Style Sheet File (samp.css)

TAG1 {PROPERTY: VALUE }
TAG2 {PROPERTY: VALUE }
....
TAGn {PROPERTY: VALUE }

ex. 
H1 {font-family: Arial; font-size: 40pt; Color:red}
P  {font-size:12pt; line-height:20pt}

To call the Style Sheet File from
html source (linking.html)

<LINK REL="stylesheet" TYPE="text/css" HREF="samp.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">
TAG1 {PROPERTY: VALUE }
TAG2 {PROPERTY: VALUE }
....
TAGn {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

NCD HOME Style Sheet Basic || Specification
Style Sheet Guide
Style Property Reference
HTML Design Guide Main Page



Network Communication Design
http://ncdesign.kyushu-id.ac.jp/
C&P 1994-1996 Yuriko Ienaga v91102@vgenda.kyushu-id.ac.jp