CSS Syntax

CSS declarations are know as rules and consist of two parts.

The selector - The element to which the rule is to apply.
The declaration - The part that defines what style should be applied to the element. The declaration itself consists of two parts.
- The property of the element that is to be affected by the declaration
- The value to which the property is to be set

Therefore rules always follow the format

tag {
property: value
}

Example Heading Rule

h1 {
color: #ff0000
}

The rule above sets all h1 headings to red.
Multiple property declarations can be made but must be separated by semicolons.

Example Heading Rule with Multiple Properties

h1 {
color: #ff0000;
font-size: 20px;
font-family: helvetica
}

Properties can also be applied to multiple tags by grouping the tags in the selector statement separated by commas.

Example Headings Rule

h1, h2 {
color: #ff0000
}

The rule above sets all h1 and h2 headings to red.

Inheritance

When tags are enclosed within other tags then they inherit the style of the enclosing tag. This is useful since it means that styles needn't be specified for all possible tags - only where exceptions are required.

Example of a Body Style Rule

body {
color: #000000;
font-size: 12px
}

The rule above sets the font colour and size for all elements that body encloses but if we wanted text within tables to appear differently then we can add another rule.

Example of a Body Style Rule with an Exception

body {
color: #000000;
font-size: 12px
}
table {
color: #0000ff;
font-size: 10px
}

The rules above set the font colour and size for all elements that body encloses except tables which are set to a different font colour and size.

Contextual Selectors

Inheritance allows styles to be applied depending on the context. So for example we may wish a particular style to be applied to unordered list items generally but differently when they occur within tables.

Example of a Contextual Selector

body {
color: #000000;
font-size: 12px
}
table ol {
color: #0000ff;
font-size: 10px
}

The rules above set the font colour and size for all elements that body encloses, including unordered lists. However any unordered lists that are enclosed by tables are set to a different font colour and size.

Important: The selector tags must be separated by white space as opposed to commas as was used to group tags.

Previous - Implementing CSS Next - Pseudo Classes / Elements

Basics Creating a Document Head and Body Elements Formatting Text Creating Lists Embedding Images URLs Explained Linking to Documents Creating Tables Forms Form Basics Input and Textarea Select Lists Frames Framesets The Frame Element Nested Framesets Targetting Frames Inline Frames		Tips and Tricks Meta Tags Transition Effects HTML Generators Create a Document Create a List Create a Table

Basics Implementing CSS CSS Syntax Pseudo Classes/Elements CSS Classes CSS Properties Font Properties Color and Background Text Properties Border Properties Margins and Padding Size and Position		Tips and Tricks Menu Buttons Special Effects

Basics Running a Script Variables Expressions and Operators Objects.Properties.Methods The Date Object Strings Regular Expressions Defining RegExp Patterns Branches and Conditions Loops Arrays Array Basics Array Methods Sorting Arrays User-Defined Functions Cookies Windows Frames		Tips and Tricks Image Replacement Using Includes Form Validation Debugging

Basics Creating a Script Running a Script Variables Expressions and Operators Strings Strings Basics Strings and Substrings Replacing Substrings Regular Expressions Branches and Conditions Loops Arrays Array Basics Array Functions Sorting Arrays User-Defined Functions Include and Require Uploading Files File Functions Session Variables		Tips and Tricks Page Templates Form Reply Scripts Form Validation JavaScript to PHP