7.0

Table Of Contents

4.1 Key Concepts

To apply styling to HTML elements, you should understand the following key concepts:

• Tags, IDs and classes (Page 16)

• CSS Syntax (Page 16)

4.1.1 Tags, IDs and classes

Each element on the page is rendered using standard HTML tags or by using <div> and <span> tags that

have a unique identifier and/or a class.

IDs are used when there is only one occurrence on a page, classes are used when there are one or more

occurrences on a page. CSS IDs are similar to classes in that they define a special case for an element. In

other words, they assign an identifier. Standards specify that any given id name can only be defined once

within a page or document.

You can reveal ID and class information by viewing the source of the web page or by using additional web

developer browser extensions. Your style files will need to refer to these elements to set their formatting.

<span id="fcCompanyNameLabel" class="formLabel">Company name:

</span>

<input type="text" value="Oasis" name="fcCompanyName"

id="fcCompanyNameField" class="formField"/>

</span>

</div>

4.1.2 CSS Syntax

The CSS syntax is made up of the following parts: a selector, a property and a value:

selector {property: value}

Normally the selector is the HTML element/tag you wish to style, the property is the attribute you wish to

change, and each property can take a value. A colon is used to separate the property and its value. They are

surrounded by curly braces, see the snippet below:

h1 {color: lime}

You can specify more than one property, the properties should be separated by a semicolon.

fieldset {

width: 70%;

margin-left: 1.25em;

}

Selectors can be grouped by separating each selector with a comma.