Properties and Values in DHTML

An HTML Selector Rule

The property is what is being defined for a selector and the value is the value placed into the property.

HTMLselector {property: value;}

Below we are redefining the B tag for bold text as being an underlined, 16 point, serif font and the I tag for italicised text as being 5 point.

<HEAD>
	<STYLE>="text/css"
		B { font: bold 16pt times,serif; text-decoration: underline; }
		I { font: italic 5pt; }
	</STYLE>
</HEAD>

A Class Selector Rule

Defining a class selector
```
.classname {property: value;}
```
Using a class selector.
```
selector.classname (property: value;}
```

Classes can be dependant upon an HTML tag or independant of any HTML tag. Dependant classes can only be used in association with the specified HTML tag and independant classes can be used with any HTML tag. In the class selector definition below the class extra is associated with the bold tag and is thus a dependant class (dependant upon the bold tag and usable only with the bold tag) and the class huge is independant and can thus be used with any HTML tag.

<HEAD>
	<STYLE>="text/css"
		B.extra { font-style: italic; font-size: 18pt; }
		.huge {font-size: 42pt; }
	</STYLE>
</HEAD>

As shown below the classes must be included with an HTML tag before they function and the class extra has to be used with the bold tag.

<BODY>
	Look, this is <B>really</B>, <B CLASS="extra">really</B>, <BIG CLASS="huge">really</BIG> important.
</BODY>

An ID Selector Rule

Defining an ID selector
```
#IDName {property: value;}
```

Using an ID selector in an HTML tag

<SPAN ID="IDName"> ... <SPAN>

The example below places a red text colored paragraph within two normally colored paragraphs.

<HEAD>
	<STYLE>="text/css"
		#area1 {position: relative; margin-left: 9em; color: red;}
	</STYLE>
</HEAD>

...

<BODY>
	<P>What is your name ?</P>
	<SPAN ID="area1"><P>What's it to you ?</P></SPAN>
	<P>I dunno !</P>
</BODY>

Several HTML Selectors with the Same Definition

H1, H2, H3, H4, H5, H6 {font: bold 18pt/20pt helvetica,sans-serif;}
H1 {font-size: 26pt;}

Putting Selectors into Context

In the example below any bold tag occuring within a paragraph will have a pink background.

P B {background: pink;}

Adding CSS to Individual HTML Tags

The example below shows that properties can be altered temporarily for individual HTML tags.

<P STYLE="font-size: 10pt; line-height: 18pt;">This is the paragraph.</P>