CSS

Overview

Recall questions on what CSS does, inline styles and external stylesheets, writing rules, classes and identifiers, colour, font, size and border properties, hexadecimal colour codes, and inline styles overriding a stylesheet.

What you need to know

Answer each one before you reveal it.

Questions from this subtopic

Each one with the model answer underneath.

1. 1

   What is CSS for?

   Model answer

   CSS describes how the elements of a document should be presented - their colour, background, typeface and size, borders, and dimensions. It is written as rules, each pairing a selector saying which elements the rule applies to with a set of property and value declarations saying how they should look. Keeping it separate from the markup means the same content can be presented differently, and one change of rule restyles every element it selects.

2. 2

   What are the two ways of applying CSS you should know, and what is the difference?

   Model answer

   Inline, using the style attribute on a single element, for example a heading written as <h1 style="color:blue;">, which styles just that one element on that one page. Externally, in a separate stylesheet file that pages attach with a link element, containing rules that apply to every page linked to it. The external stylesheet is the normal approach: it keeps presentation out of the markup, styles the whole site from one file, and is cached by the browser and reused. The inline style attribute is for a genuine one-off exception, because it has to be repeated on every element it applies to and is missed when styles are later changed.

3. 3

   Write and explain a CSS rule that makes all main headings blue.

   Model answer

   h1 { color: blue; } The selector h1 chooses every first-level heading in any document that uses the stylesheet. The declaration inside the braces sets the property color to the value blue. Every such heading is then drawn in blue, and changing that one word changes them all.

4. 4

   What is a CSS class, how is it written, and when would you use one?

   Model answer

   A class is a named style that can be applied to any number of elements, of any kind. In the stylesheet the selector is the class name preceded by a full stop, for example .infoBox { background-color: green; } and in the markup any element is given class="infoBox" to receive it. You use one when a group of elements scattered around the site should share an appearance - warning boxes, product cards, highlighted terms - because the appearance can then be changed for all of them at once, and an element can be given the class without knowing anything about its position in the page.

5. 5

   What is a CSS identifier, how is it written, and how does it differ from a class?

   Model answer

   An identifier styles one specific unique element. In the stylesheet the selector is the name preceded by a hash, for example #menu { background-color: #A2441B; } and the element carries id="menu". The difference from a class is uniqueness of purpose: an id names one particular element and should appear only once in a page, so it suits a single unique region such as the navigation menu or the footer, whereas a class describes a category of appearance and is meant to be reused on as many elements as you like. Because an id is unique it is also what JavaScript uses to locate a single element in the page.

6. 6

   What do the properties background-color, color, font-family, font-size, height and width control?

   Model answer

   background-color sets the colour drawn behind the element's content. color sets the colour of the element's text - a common confusion is expecting color to change the background. font-family sets the typeface used for the text. font-size sets how large that text is drawn. height and width set the dimensions of the element's box. Applied to an image these last two control the displayed size; applied to a container they control how much space it occupies, which is how blocks are given a consistent size.

Other ways to work this

The same content, four other ways.

What is inside Levo

Six ways to work the same material.