A beginner’s guide to CSS

Overview

CSS (Cascading Style Sheets) are used to define the appearance of a webpage (layout of images and text, colours, fonts), while HTML deals with the content. It’s called “cascading” because theoretically you have a cascading series of style rules, starting with the broad definitions which are overridden by more specific style rules further down the sheet.

Here is an example of CSS:

CSS is made up of:

selector – selects which HTML element you want to style, such as p or div. The most common way of defining an element is with “class”, which would be written by following the element with a full stop and then the class name (which is made up by you) for example: p.chinese-translation or div.footnotes.

declaration block – the selector is followed by a block of text defining the selector, this block is put within wavy parentheses like these: {}

declaration each declaration is made up of a property (like “font”) followed by a colon (“:”), a space and a value. If there is more than one declaration in a declaration block then they are separated by a semi-colon (“;”).

span and div

HTML elements (like “p” for paragraph, “h1” for the biggest heading) all already have a value that can change how a browser displays the contents, even if you don’t change the values in CSS. For example, if you use <h1>Title</h1> tags, “Title” will appear bigger than other text on the page. However, there are two selectors (or HTML elements) that have absolutely no inherent meaning, and are completely defined by you in CSS. They are “span” and “div”.

span is used for small bits of content within larger blocks, such as a few words within a paragraph. It is named “span” just because it “spans” a section of text. Because it nests within larger tags, it overrides the values of those tags – so even if you’d defined a heading as blue text, you could use the span tag to make one word of the heading red.

div is short for “division” and defines a distinct block of content (like a paragraph).

id and class

An id is a unique identifier of an HTML element. It is unique because it may only be used once in an HTML page, and so defines something special (like a sidebar, a footer etc). In CSS, an id appears with a hash sign in front of it:

#sidebar { background-color: white; }

In HTML, this style could be called on with:

<div id=”sidebar”>
Sidebar will appear with white background
</div>

class works in the same way, except it’s much more versatile – it can be used many times in many different ways. classes appear with a full stop in front of them. Here’s an example of classes redefining the paragraph (“p”) element:

p.chinese-idiom {
font-size: 18pt;
}

p.english-translation {
font-size: 10pt;
}

And in the HTML you could use these classes like this:

<p class=”chinese-idiom”>Chinese saying goes here and appears as 18pt text</p>
<p class=”english-translation”>English translation goes here and is in 10pt text</p>

Leave a Comment

Your email address will not be published. Required fields are marked *