HTML, CSS, JavaScript Tutorial

CSS Tutorial

1. Introduction

Cascading Style Sheets (CSS) is one of the three main components of modern webpages, along with Hypertext Markup Language (HTML) and JavaScript. HTML indicates to the browser what elements should be included on the page (and in what order). CSS indicates how each should be styled. JavaScript provides a means for webpage authors to manipulate these elements programmatically and in response to actions by the end user. Tutorials and reference material covering all three components are available here.

In these pages, we describe CSS further. Text used within HTML, CSS or JavaScript files is generally shown in courier new (i.e. a fixed space) font. The pages contain links to an extensive body of reference material explaining HTML, CSS and JavaScript in detail. We also provide a wide range of examples, which can help you understand better how HTML, CSS and JavaScript work. See below for further details on how to access these examples.

CSS instructions can be:

(a) included within an individual HTML element (as part of the mark-up relating to that element), i.e. as ‘in-line’ CSS

(b) included in the HTML file where the relevant element(s) are located, but not directly within the elements concerned, i.e. as ‘in-file’ CSS

(c) included in external CSS files, i.e. as ‘external’ CSS, with a HTML <link> element used to indicate where any such CSS files applicable to a given HTML file are located.

The style attributes of an HTML element can also be altered by JavaScript ‘on the fly’, e.g. after the page has initially loaded or in response to specific user actions such as clicking a button.

CSS styles typically operate according to a hierarchy, with any JavaScript overrides taking precedence over any CSS styles present when the page is initially loaded but otherwise in-line CSS taking precedence over in-file CSS and in-file CSS taking precedence over external CSS (unless the ‘important’ characteristic is included in the style statement). In-file CSS is contained in a <style> element. If there is more than one such element then later ones take precedence over earlier ones.

Older versions of HTML (e.g. HTML 4) require <style> elements to be in the <head> of the HTML file, although most browsers currently seem to accept them even if they appear in the <body>. In theory, the latest HTML version at the time of writing (HTML 5) has the concept of a ‘scoped’ attribute (e.g. <style scoped>) which should allow you to apply different <style> elements to different parts of the webpage (which could then legitimately appear in the <body> element), but not all browsers currently seem to cater for this aspect of HTML 5.

External style sheets are referenced using a <link> element, which goes inside the <head> section. This type of link element has a form such as:

External style sheets can be created in any text editor, should not contain any HTML tags (elements) and should be saved with a .css extension.

In-file and external CSS are typically set out in the form of ‘rule-sets’. A rule set involves a selector and a declaration block. The selector points to the type of HTML element to which the style applies, whilst the declaration block contains one or more style declarations separated by semicolons. Each declaration involves a CSS property name, followed by a colon, followed by the value assigned to the property.

For example, the style rule

h3 {color: blue; text-align: center;}

has a selector which is h3 and a declaration block which is {color: blue; text-align: center;}. It tells the browser that any <h3> element (to which the rule applies) should be centre-aligned and appear in blue. As with HTML, line breaks and multiple spaces are ignored.

Other types of selectors are introduced here and covered in more detail here.

In-line CSS rule-sets involve the style attribute (and do not include a selector or the curly brackets / braces included in in-file or external CSS), e.g. they involve setting the element’s style attribute along the lines of: style = "color: red";.

Comments in CSS start with /* and end with */ and can span multiple lines.

Over time CSS has been refined. At the time of writing the latest version is CSS3. Features in CSS1 and CSS2 can typically still be used in CSS3.

Tutorial content

1. Introduction (i.e. this page)

2. Selectors

3. Hints and further information

To access HTML, CSS or JavaScript examples please go to the webpage on www.nematrian.com that covers the specific feature you are seeking help with.

Disclaimer: Whilst we have made efforts to check the accuracy of the material in these pages, you should note that HTML, CSS and JavaScript are evolving languages. Information contained in this document may therefore be inaccurate or out-of-date. You should not rely on the accuracy or fitness for purpose of any material that you obtain from the Nematrian website (or from its associated web services). If you need these results to be accurate or fit for purpose then you should seek independent corroboration of whatever you extract from the Nematrian website. Whilst using the site, users may be directed to the websites of other organisations, over which Nematrian may have no control and for which it takes no responsibility. A copy of the current Nematrian Web Services License Agreement can be viewed here.

NAVIGATION LINKS
Contents | Prev | Next | CSS

Desktop view | Switch to Mobile

CSS Tutorial 1. Introduction

CSS Tutorial

1. Introduction