Selector

NCD Style Sheet Guide v5.0

+ Type Selector (the simplest html selector)

SELECTOR {PROPERTY: VALUE }

SELECTOR is a HTML tag name to specify the style. 
ex.
	H1 {font-family: Arial; font-size: 40pt; Color:red}
	P  {font-size:12pt; line-height:20pt}

+ Grouping

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

You can specify the same declaration to different tags at once. 
ex.
	H1, H2, H3 {font-family: Arial; font-size: 40pt; Color:red}
	P  {font-size:12pt; line-height:20pt}

+ Contextual Selector

TAG1 TAG2 {PROPERTY: VALUE }

Style is applied to only TAG2 within TAG1. 
<HEAD>
<STYLE TYPE="text/css">
     H1 I {font-family: Arial; font-size: 14pt; Color:red}
</STYLE>
</HEAD>
<BODY>
<H1>Today is <I>fine</I>.</H1>
<I>Tommorow will be fine.</I>
</BODY>

Today is fine.

Tommorow will be fine.


+ Class Selector for the Specific Tag

Class Selector
    TAG.#1 {PROPERTY: VALUE }
    TAG.#2 {PROPERTY: VALUE }
    ...
    TAG.#n {PROPERTY: VALUE }

Style Specification
    <TAG CLASS="#1">
    <TAG CLASS="#2">
    ...
    <TAG CLASS="#n"> 

<HEAD>
<STYLE TYPE="text/css">
   H3.red {font-family: Arial; font-size: 10pt; Color:red}
   H3.green {font-family: Times New Roman; font-size: 14pt; Color:green}
</STYLE>
</HEAD>
<BODY>
<H3 CLASS="red">Today is fine.</H3>
<H3 CLASS="green">Today is fine.</H3>
</BODY>

Today is fine.

Today is fine.



+ Class Selector for Any Tags

Class Selector
    .#1 {PROPERTY: VALUE }
    .#2 {PROPERTY: VALUE }
    ...
    .#n {PROPERTY: VALUE }

Style Specification
    <ANYTAG CLASS="#1">
    <ANYTAG CLASS="#2">
    ...
    <ANYTAG CLASS="#n"> 

<HEAD>
<STYLE TYPE="text/css">
   .red {font-family: Arial; font-size: 10pt; Color:red}
   .green {font-family: Times New Roman; font-size: 14pt; Color:green}
</STYLE>
</HEAD>
<BODY>
<H3 CLASS="green">Today is fine.</H3>
<H3 CLASS="red">Today is fine.</H3>
<DIV CLASS="green">Today is fine.</DIV>
</BODY>

Today is fine.

Today is fine.

Today is fine.


+ ID Selector

ID Selector
    #id1 {PROPERTY: VALUE }
    #id2 {PROPERTY: VALUE }
    ...
    #idn {PROPERTY: VALUE }

ID Specification
    <TAG1 ID="id1">
    <TAG2 ID="id2">
    ...
    <TAGn ID="idn">

The ID attribute allows authors to assign a unique name to an element. 
<HEAD>
<STYLE TYPE="text/css">
   #id100 {font-family: Arial; font-size: 10pt; Color:red}
   #id101 {font-family: Times New Roman; font-size: 14pt; Color:green}
</STYLE>
</HEAD>
<BODY>
<H3 ID="id00">Today is fine.</H3>
<DIV ID="id101">Today is fine.</DIV>
</BODY>

Today is fine.

Today is fine.


+ Link Selector

A:link {PROPERTY: VALUE}
A:hover {PROPERTY: VALUE}
A:active {PROPERTY: VALUE}
A:visited {PROPERTY: VALUE}

<HEAD>
<STYLE TYPE="text/css">
     A:link {font-size: 14pt; text-decoration:underline; Color:red}
     A:hover {font-size: 10pt; text-decoration:none; Color:blue}
     A:active {font-size: 20pt; text-decoration:none; Color:yellow}
     A:visited {font-size: 10pt; text-decoration:none; Color:green}
</STYLE>
</HEAD>
<BODY>
<A href="nopage.html">New Link</A><BR>
<A href="s001.htm#link">Visited Link</A>
</BODY>
New Link
Visited Link


Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading | Font | Text | List | Color & Background |
Box | Box Positioning | Other|
Style Property LIST

BACK TO NCD HOME
Network Communication Design - http://www.ncdesign.org/
 Copyright & Publishing 1994-1999 Yuriko Ienaga yuri@ncdesign.org