SM5312 week 6: basic CSS syntax1 An Introduction to Cascading Style Sheets Basic CSS Syntax Nick Foxall

SM5312 week 6: basic CSS syntax 1

An Introduction to Cascading Style SheetsBasic CSS Syntax

Nick Foxall


What is CSS?

CSS stands for Cascading Style Sheets

Styles define how XHTML elements and markup should be displayed by the browser (or user agent)

Styles can be included in the <head> area of an XHTML document, or placed in external Style Sheet files.

Multiple style definitions are able to cascade into one…


What’s a “Cascade”?

All styles will "cascade" into a new "virtual" style sheet in the following rule order, where number four has the highest priority:

1. Browser default

2. External style sheet

3. Internal style sheet (inside the <head> tag)

4. Inline style (inside an HTML element)

An inline style (inside an HTML element) with the highest priority will override a style declared inside the <head> tag, in turn overrides an external style sheet, which finally overrides browser default values.


External Style Sheets

Having all styles in an external Style Sheet allows for the style formatting of many pages from one file, saving a lot of updating work.

An external Style Sheet is a text file saved with the extension .css At the top of a new CSS document, the character set should be specified:

@charset "UTF-8";

Not essential, but good practise to ensure the CSS file is compliant with web standards. A new, blank .css file created in Dreamweaver will automatically include this syntax.


Rules in CSS

A CSS Style Sheet is basically a collection of rules, describing how the browser should display XHTML elements.

Each rule contains 2 parts:

A Selector, stating which element in the XHTML a rule applies to;

One or more Declarations, which describe how these elements should be displayed.


CSS Rules: Selectors and Declarations

h1 { font-family: Times, Georgia, serif; font-size: 24px; text-align: center; }

Selector

DeclarationsEnclosed in curly brackets { }

Rule


h1 { font-family: Times, Georgia, serif; font-size: 24px; text-align: center;

}

CSS Rules: Selectors and Declarations

Selector

Declarations

Rule

A more readable way of writing CSS rules


h1 { font-family: Times, Georgia, serif; font-size: 24px; text-align: center;

}

CSS Rules: Declaration Parts

ValuesProperties

Declarations consist of 2 parts: a property and a value. Each declaration ends with a semi-colon ( ; ). Properties and values are separated with a colon ( : ).

Properties and values separated with a colon

Each declaration separated with a semi-

colon

: ;


h1 { font-family: “Trebuchet MS”, serif; font-size: 24px; text-align: center;

}

CSS Rules: Declaration Parts

Unlike XHTML, values do not have to be enclosed in quotation marks, unless the value name includes a space (e.g multi-word name).

Only values with a space in the name need to be enclosed in quotes


Versions of CSS

Like XML and XHTML, CSS specifications are laid down by the World Wide Web Consortium.

The current, most widely used version of the CSS specification is version 2.1

There are over 100 different properties available in CSS 2.1. You can view the current CSS 2.1 specification at www.w3.org/TR/CSS21/

You can also validate the CSS you are working on by going to http://jigsaw.w3.org/css-validator/

http://www.w3.org/TR/CSS21/

http://jigsaw.w3.org/css-validator/


CSS Simple, or Element Selectors

The most basic form of CSS selector is an XHTML element name;

h1, h2, p, ol, ul, table, etc.

This is the simple or element selector. Example:

p { color: #003366; }

This will set every occurrence of content marked up the <p> paragraph tag to be a dark blue colour.


CSS Class Selectors

However, in XHTML markup, elements can have class attributes assigned to them. The value attached to a class attribute can be one (or more) names, separated by spaces. Example:

<h1 class=“special”> or

<h1 class=“special underlined”>

The actual definition of the value “special” is defined in a CSS class selector…


CSS Class Selectors

h1.special { color: #FF0000; }

This will now make all <h1> elements with the class “special” display text with a red colour. <h1> elements that don’t have the class attribute “special” will continue to display in the default <h1> colour.

A CSS class selector can also be defined more generally, without the element name (just the dot):

.special { color: #FF0000; }

This class can now be applied to any XHTML element that has the class attribute “special”.

Actually the full CSS syntax is *.special, where * is a selector that matches anything. However, CSS shorthand means we can drop the *.


CSS ID Selectors

XHTML elements can also have id selectors assigned to them. Example:

<p id=“summary”>blah, blah, blah.</p>

In the CSS, the id “summary” can be styled in a rule, thus:

#summary { font-style: italic; }

Whereas class selectors can be used across a number of elements in an XHTML document, ID selectors can only be assigned to one specific element in any given XHTML document.


CSS ID Selectors

In the CSS, id selectors are always defined with a # (hash) symbol first:

#summary { font-style: italic; }

Again, this is CSS shorthand for…

*#summary { font-style: italic; }

…meaning the id #summary can be applied to any XHTML element (but only one element can have that id name in the XHTML document).


Class Selectors vs ID Selectors

How do we know which to use and when?

ID selectors:

1. As they must be unique to a page, ID selectors are useful for persistent structural elements, such as navigation zones, or key content areas, that occur once on a page, but that are consistent across a site.

2. For example, #mainNav may be the selector to style the the main navigation element, which will likely appear on every page of your site.

3. So, ID selectors are generally applied to conceptually similar elements across a site.


Class Selectors vs ID Selectors

How do we know which to use and when?

Class selectors:

1. As they can be allied to any number of elements on a page, class selectors are useful for identifying (and targeting) types of content, or similar items.

2. For example, you have a news page with a date at the start of each story. If you use ID selectors, you’d have to give every occurrence of the date a separate ID name. Much easier to give every date one class name and style that one class.


CSS Pseudo-Classes

Pseudo-classes are CSS classes used to add effects to certain elements. They are used most often to style the anchor elements <a> of hyperlinks. Example:

a:link { color: blue; text-decoration: underlined; }

Can also be written without the a (anchor) element:

:link { color: blue; text-decoration: underlined; }


CSS Pseudo-Classes

There are four pseudo-class elements provided to make rollover and on-click effects possible:

a:link { color: blue; text-decoration: underlined; }link not yet visited

a:visited { color: green; text-decoration: underlined; }visited link

a:hover { color: red; text-decoration: none; }effect on the link when the mouse hovers over it

a:active { color: purple; text-decoration: none; }effect on the link when the mouse button is pressed down on it

Note that pseudo-classes for rollover effects must be written in this order in a CSS file for them to work correctly.


Combining Pseudo-Classes with Classes

Pseudo-classes can also be combined with regular CSS class selectors to create multiple link and rollover styles, depending on the parent class. Examples:

a.main:link { color: blue; }a.sidebar:link { color: grey; }a.footer:link { color: white; }


Element Selector Grouping

Element selectors can be grouped together if you want to apply one CSS rule to a range of elements. Example:

h1, h2, h3, h4, h5, h6 { color: #FF0000; }

Each element is separated by a comma (except for the last element before the start of the declaration).

However…


Inheritance

Certain CSS properties are inherited by the descendents of the elements those styles are applied to.

For example, if you give the <body> element a color style of gray, all descendents of <body> will inherit the color gray, until you specify otherwise.


Inheritance

By setting a number of ‘basic’ styles in top-most elements, such as <body>, you can avoid having to style many descendent elements. This…

body { color: gray; }

Is much better than having to write this…

p, div, h1, h2, h3, ul, ol { color: gray; }

Note: inheritance is not the same as cascade!


The Universal Selector

There is also a Universal Selector, that acts like a wildcard, styling every available element that isn’t specifically styled elsewhere. Example:

* { padding: 0; margin: 0; }

…would usefully set the overall page styling to zero padding and margin, which could then be adjusted as-needed further down the line.

The universal selector is donated by an * symbol


Descendent Selectors

Descendent Selectors (sometimes called contextual) can give a finer level of control over class selectors. Examples:

p em { font-weight: bold; color: red; }

Bold and blue will be applied to the <em> element, only if it occurs inside a <p> element. It would not apply if the <em> was inside say an <h1> element.

#mainNav ul { font-family: Arial, sans-serif }

The font of the <ul> element would only change to Arial if it was inside the content area defined by the ID #mainNav

Each descendent element is separated by a single space in the CSS code (no commas!)


Class & Element Selector Order

A class selector will take precedence over a more general element selector. Example, These two CSS rules set the color of paragraph elements:

p { color: gray; }

p.first { color: black; }

The top rule sets all general <p> content to a grey colour. The next rule sets all paragraphs with the class attribute “first” (i.e. <p class=“first”> ) to black text.

The p.first rule takes precedence and changes the text to black.


Class & Element Selector Order

If an XHTML element belongs to more than one class, then the later CSS rules take precedence over earlier ones Example:

p.first { color: #000000; }

p.changed { color: purple; }

If a <p> element in the XHTML is specified with both classes (i.e. <p class=“first changed”> ) then the text will become purple, not black.

The last class rule in the order takes precedence.

Documents

SM5312 week 6: basic CSS syntax1 An Introduction to Cascading Style Sheets Basic CSS Syntax Nick Foxall