Westciv Logo

These materials are © Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed © information or contact us [email protected].

style master css tutorial

A short introduction to style sheets

In this section you will learn

  • what a style sheet is
  • about the HTML containment hierarchy and the importance of inheritance
  • the building blocks of a style sheet: statements, rules, selectors and declarations
  • how a style sheet works with an HTML document to style your page

What are style sheets?

A style sheet is a set of instructions each of which tells a browser how to draw a particular element on a page. It's very important to grasp this idea of HTML elements when you are working with CSS. Well-formed HTML documents are a collection of elements arranged in a kind of containment hierarchy.

Figure 3: The HTML containment hierarchy

Figure 3: The HTML containment hierarchy

Imagining for a moment that the document we want to style is as simple as the one in the figure above, you can use a style sheet to specify the different elements, and then say what styles should be applied to them. Once you see the document as a hierarchy like this a very important aspect of CSS, called inheritance, becomes much easier to understand. If you apply style to an element which contains other elements then this will be inherited by the elements inside. You might think of them as parent elements and child elements. This parent/child metaphor is in fact a standard way of describing this relationship and you will see it often. Child elements are contained by parent elements and inherit all their properties. So taking the example above, if you apply style to the parent, <div>, the child, <p>, will also get this style. But it's early days, so if this doesn't make a lot of sense, don't worry, you'll see it more clearly when we put it into practice.

We refer to the instructions in a style sheet as statements. There are a few different types of statement, but the one you'll use most is referred to as a rule. Rules have two parts: a selector and a declaration.

The selector tells a browser which elements in a page will be affected by the rule. There are a number of different types of selector.

The declaration tells the browser which set of properties to apply. There are many different properties.

Throughout these lessons we'll be investigating some of the different types of selector you can use in style sheets, and various properties that can be applied to elements on a page.

All these statements are contained in a Cascading Style Sheet. This is nothing more than a text file, with the suffix .css added to the name, something like core-style.css.

Rules have a very simple form: the selector, followed by the set of properties, which are surrounded by curly braces (that is { and }). Practicing this will be the core of this tutorial, but just to give you an example right now

p {font-size: 1em}

selects any <p> elements, or paragraphs, and makes their font 1em. You don't have to worry too much about the details of this syntax if you use a CSS Editor like Style Master which makes sure it all comes out just right.

So how do they work?

So how does a browser know that there is a style sheet when it loads a page? Either there is a link to the style sheet in the page, or the style sheet is embedded in the <head> of the HTML document.

Style Master makes it very easy for you to do either of these things, as you'll learn.

When the browser loads the page, it sees the link or the embedded style sheet and uses this to style the page. Simple.

Next

Next we'll check that you have all of the tools you need to begin, then we'll create our first style sheet.