CSS: Basics - an introduction to Cascading Style Sheet language

Previous

CSS: Basics plus Next

1.

Use of basic CSS styles on XHTML elements.

Embedding a style block in the page by using the <style></style> element.

Notation for adding comments in the style block.

Using single selectors to define font styles for individual XHTML elements.

2.

Further use of basic CSS styles on XHTML elements.

Embedding a style block in the page by using the <style></style> element.

Defining styles for nested ordered, <ol>, and unordered, <ul>, lists.

Already we can see that adding the CSS styles to each page in its own style block will mean that any changes to a website's overall appearance will be extremely time consuming as each individual page will need changing. Hence we should be adopting the method of using external style sheets for efficient website maintenance. See the next code snippet tutorial number 3. 'External style sheets' on how that is achieved.

Also we can already see that defining a fixed style to a single XHTML element means that every element of that type is restricted to a single style. Hence we need a method to fine-tune the styles. See code snippet tutorial number 4. 'Introducing 'class' and 'id' selectors' on how that is achieved.

3.

External style sheets. Linking to external .css style sheets that will contain your styles.

You will not need any XHTML or the <style></style> tags in the .css file just the styles themselves.

Link using the 'link' element or import style sheets using the '@import' statement.

(Note that we will continue to add the styles in a style block in the page for demonstration purposes to keep all the code in one place for convenience.)

The styles are processed in a cascading order of priority depending on their position and type. The precedence of cascading styles in CSS is controlled in order of the highest priority to the lowest priority: see cascading precedence of styles.

4.

Introducing 'id' and 'class' selectors.

You can assign a 'class' to multiple elements in a page but an 'id' must be unique: it can only occur once in a page.

Names for 'id' and 'class' selectors must not start with a number and by convention start with a lower case letter.

5.

Hexadecimal number format for colour (color).

Numbers are specified in hexadecimal base 16 RGB colour (color) format: a hex triplet. Either full hexadecimal, #FFFFFF, or the shorthand format, #FFF, is acceptable.

The full set of 216 Web-safe colours (colors) in a table.

6.

Hyperlinks or anchors. Customised links, <a>, using CSS anchor pseudo-classes 'link', 'visited', 'hover', 'active'.

Using standard link colours (colors).

7.

Block and inline elements default display.

A block element will display over the full width of the space available to it, and will start on a new line in the flow of the page, the flow of the page will continue on a new line after the block element. Block elements include: <h1> to <h6>, <p>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <table>, <form> and <div>.

An inline element will display in the flow of the page. Inline elements include: <a>, <strong>, <em>, <input>, <br />, <img /> and <span>.

8.

Override the block and inline elements default display.

Display a block header element as an inline element: to add background colour (color) highlight behind just the text of a header.

Display the hyperlink (anchor) inline element as a block element: to create a vertical navigation toolbar without using lists.

9.

Margins and padding.

Notation for displaying individual margins and padding demonstrated on paragraph text.

10.

Introducing the division, <div>, element: the generic container box.

Notation for displaying borders: defining width, style and colour (color) of individual border.

Add margins and padding using shorthand notation in order: top, right, bottm, left.

Build on the above knowledge.

Learn more CSS on CSS: Basics plus page.