Virtual Workshops

Part of keithjbrown.co.uk

Main Menu

• Server Environment
• MySQL
• PHP Databases
• Web Design
• Excel

A Brief Guide to CSS

Introduction

I wasn't going to write this originally but after writing one of the other workshops, and the feedback I got, I thought it would be a good idea. Again when looking around at a lot of the CSS stuff, it didn't seem particularly accessible to the novice web designer, so rather than throw them to the mercy of the WYSIWYG editors (such as Dreamweaver) without really understanding things..... here I go again with another Virtual Workshop.

What is CSS and why do we use it?

Cascading Style Sheets are a combination of Selectors and Properties that are used to control the appearance of a page. They are used to replace the font tags, blank images and nested tables that designers have relied on to control layout on the screen.

A Selector is a defined style that is made up of properties to control the appearance of an element on the page. For example if we wanted all our paragraphs be displayed with the Arial, Helvetica, sans-serif font family we could create a 'p' selector and use a font-family property to specify that font.

A Property is used to define one thing (of which there are many) about an element. Properties are defined in name: value pairs within a selector.

We will look at both these things in more detail later on in this workshop.

Why use CSS

The simplest answer is that we are marking up a page without attaching any particular style to those elements. Thus if we want to change the appearance of a page we don't have to change all the markup - just the style sheet. This leads to a greater flexibility when developing pages, it is also the recommended way of producing accessible webpages.... oh yeah and the webpages you produce are smaller which means they load quicker and the source code is easier to read.

Properties First

Although I said above that selectors contain properties (and thus it may seem sensible to start with them), however properties are easier to understand by seeing their impact and so we will look at these first. However for clarity of the examples below, a style defined in a stylesheet looks a bit like this:

selector_name {
	property_name: property_value;
}

For example:

p {
	font-family: "Times New Roman", Times, serif;
	font-size: 12pt;
}

With the selector name first and then properties contained within curly brackets. For our purposes we are going to use a another piece of Lorem Ipsem and apply different properties. Consider the following HTML.

<p>Lorem ipsum dolor sit amet</p>

This will be displayed in whatever the default browser font and size is. On windows this is normally Times New Roman, 12pt. I.e.

Lorem ipsum dolor sit amet

But if we wanted to the set the font to the Arial, Helvetica, sans-serif font family, we would add the font-family to the 'p' selector in our style sheet.

IMPORTANT: Properties are always given in with the following syntax:- property_name:      value;

p {
	font-family: Arial, Helvetica, sans-serif;
}

Which would result in the font changing to Arial or Helvetica or another sans-serif font depending on the fonts installed on the viewing device.

Lorem ipsum dolor sit amet

We could also change the size....

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
}

Lorem ipsum dolor sit amet

Or Colour....

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	color: rgb(0,153,153);
}

Lorem ipsum dolor sit amet

And so on. The following table shows some of the other common properties with ONE of the potential values (each property below does have other values).

I could go on and on giving examples... I find the best way to find the styles you like is just to experiment with different properties. For example combining different properties into a h1 selector.

h1 {
  	font-family: Arial, Helvetica, sans-serif;
	font-size: 18pt;
	color: rgb(0,153,153);
	border-bottom: solid 1px;
	text-transform: lowercase;
	width: 75%;
}

Would create a nice heading for a page:

my heading

Before leaving the properties it is worth noting that properties of the same type can sometimes be combined. For example if we wanted a border at the bottom and left of our text we could write:

border-style: solid;
border-bottom: 1px;
border-left: 1px;

however we could replace this with:

border-style: solid;
border-width: 0px 1px 1px 0px;

This is because the border width property allows us to stack these values together in a certain order:

border-width: top right bottom left;

This can be done with many CSS properties and the official specification will be able to fully advise you on how to use these and indeed a full list of available properties and potential values.

Selectors

Having looked at how we can change properties to define a style, we now need to concern ourselves with how we make an element on our page use that style. As we can see from the example above this is done by defining a selector with a style attached (so far we've used HTML element selectors - more of them in a moment). Before looking at the different types and examples of selectors it is worth stopping to note that there are three overall types of element.

• Block - this element surrounds a block of text, eg the <p></p> HTML elements. This by default is usually given a margin before and after the element.
• Inline - this surrounds a piece of text that usually exists as part block eg the <a href></a> elements to define a few words as a trigger to a link within a sentence.
• List - A list element is fairly self evident. It defines a list, like this one.

HTML Element selectors

These are perhaps the easiest to understand and get to grips with. If you are reading this then it is likely that you have used HTML to markup webpages before. Using an HTML element selector simply allows us to redefine the HTML element styles and we could do so as follows:

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18pt;
  color: rgb(0,153,153);
  border-bottom: solid 1px;
  text-transform: lowercase;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
  color: rgb(0,153,153);
  text-transform: lowercase;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14pt;
  color: rgb(0,153,153);
  text-transform: lowercase;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  line-height: 14pt;
}

And so on.... There are some problems with this:

• There are a limited number of html elements designed for a specific purposes (<p> is meant for paragraphs, <h1> for headings), but due to this limited number there would be a temptation to use these elements (and some designers do) 'out of place' which would cause problems for certain types of browsers.
• You may also want variations of the same element such as a different first paragraph at the start of a section.

Thus we can use class selectors to address these problems.

Class Selectors

Class selectors allow us to define variations of elements, opening up the possability of many different styles (they are often referred to as custom html tags). Classes are applied to HTML elements as an attribute within the HTML code like so (using a <p> element as an example).

<p class="myclass">Lorem ipsum dolor sit amet, co</p>

Once this class has been assigned to the element we need create a style for this class. This can be done in two ways, by having a standalone class that can be applied to ANY element or attaching a class to a specific element.

To explain this lets create a new class that we can apply to all HTML elements.

.myclass {
  font-family: "Courier New", Courier, mono;
  color: #333399;
}

This changes the font-family and colour of whichever element the class is applied to (while leaving all the other properties intact). To demonstrate we can apply this class to two of the HTML elements defined above (<h1> and <p>).

<h1 class="myclass">Heading One</h1>
<p class="myclass">Paragraph</p>

Heading One

Paragraph

We could alternatively make the class specific to an element by changing the selector, once again the <p> element.

p.myclass {
  font-family: "Courier New", Courier, mono;
  color: #333399;
}

That means that the style wouldn't be applied to the <h1> element.

Heading one

Paragraph

Similarly we could change the style to be specific to the <h1> element.

h1.myclass {
  font-family: "Courier New", Courier, mono;
  color: #333399;
}

Heading one

Paragraph

And the <h1> element is changed whereas the <p> element is not. Returning to our example of having a first paragraph variation of the <p> element, we could define a style like so:

p.firstpara {
  font-weight: bold;

}

And use that style in the first paragraph of some text.

<h1 class="myclass">Heading One</h1>

<p class="firstpara">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut</p>

Which would produce the desired result.

Heading one

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

ID Selectors

ID selectors are very similar to class selectors and are applied in the same way, as an attribute:

<div id="thisid">Lorem ipsum dolor sit amet, co</div>

Where they differ is that an ID selector is intended to be a unique instance of an element on the page whereas class selectors can be reused. ID selectors are also identified in the stylesheet by the use of a hash (#) whereas the class selector uses as a dot (.) as we've already seen.

The advantages (*I* think) are in defining certain sections that can be positioned or hidden for print versions (see Replacing tables with CSS for examples) and for providing a clear section structure when reading the code. Although there are those that believe there is nothing that can't be done exclusively with class selectors and some prudence.

Contextual Selectors

Contextual Selectors (called descendent selectors in the CSS2 specification) are so called because the depend on more than one element to build up a context for the style. Consider this problem:

Within a page you may have hyperlinks within several different HTML elements as below.

Heading one with Link

Paragraph with link also in the text

These links appear similar as they apply the same <a> HTML element selector. We could create different <a> class selectors and apply these as a class attribute.

a.h1link {
	color: #66CC66;
	text-decoration: none;
}

a.plink {
	color: #66CC66;

}

<h1>heading one with <a class="h1link" href="link.htm">link</a></h1>
<p>Paragraph with <a class="plink" href="link.htm">link</a> also in the text</p>

Heading one with Link

Paragraph with link also in the text

This results in different appearances (which is what we want) but it also means that we have to remember and define the class attribute for each link. That would be almost as laborious as using html font elements to format every little change, so luckily there is a better way. The <a> element can be stacked together with one of the existing elements (<h1> or <p>) creating a selector that applies a style to the links within the context of the original element.

Thus instead of the class selectors above we would construct the contextual selectors like so:

h1 a {
	color: #66CC66;
	text-decoration: none;
}

p a {
	color: #66CC66;

}

This means that we can omit the class attribute from the <a> HTML elements.

<h1>heading one with <a href="link.htm">link</a></h1>
<p>Paragraph with <a >href="link.htm">link</a> also in the text</p>

And the results are the same.

Heading one with Link

Paragraph with link also in the text

Contexts can be built up using a variety of combinations from the HTML Elements, Classes and ID selectors.

For example listing a specific need for a style to:

• Be applied to all hyperlinks
• Within the first paragraph (<p> variation using a class selector called 'firstpara')
• That is part of a <div> section called 'maintext' (defined by a ID selector).

The contextual selector would be:

div#maintext p.firstpara a {
	properties: values;  
}

As you can see contextual selectors can get quite complicated, but make a great deal of flex ability available to the developer. We are going to look at one more type of selector before leaving CSS alone, that of pseudo class selectors.

Pseudo Class Selectors

These are quite popular for providing rollover effects as they change the style according to the state of a hyperlink. These pseudo classes cannot exist without the <a> element and are bonded to it (and as such aren't true elements to be defined by a class, but states defined by pseudo class). They are:

• a:link - the style used for the normal state of a link
• a:visited - the style used for a visited state of a link
• a:hover - the style used when a cursor hovers over a link
• a:active - the style used when a link is clicked

These selectors can used in the same way as the class selectors above but are commonly used as part of a contextual selector like so:

p a:link {
	color: #66CC66;
	text-decoration: none;
}

p a:visited {
	color: #66CC66;
	text-decoration: none;
}

p a:hover {
	color: #CC0000;
	text-decoration: underline;
}

p a:active {
	color: #66CC66;
	text-decoration: none;
}

Which would result in the following:

Paragraph with rollover effect link also in the text

This example also allows us to look at one final point about selectors, that they can be grouped together.

Grouping Selectors

All the types of selectors can be grouped together, separated by commas, to allow properties to be attached to many styles at once. In the above, a:link and a:visited contain the same properties and values, so why bother rewriting the style rule twice? We can just put those two selectors on the same line and the properties will still be applied.

p a:link, p a:visited {
	color: #66CC66;
	text-decoration: none;
}

Conclusion

This has been a gentle introduction to CSS, and you should have a better understanding of CSS from reading this Virtual Workshop. It is worth issuing a warning that CSS can be frustrating, especially when trying to work out why your contextual selectors aren't working. The answer to that moves beyond the brief and the gentle and thus wont be discussed as part of this virtual workshop. (Hint: Look at Inheritance and Specificity). However, if you think that I should write another VW looking at those issues then leave a comment below and I'll think about it.

Lastest 10 Threads - view all

Post a Comment or Question

In this section

• Visual Design Tips
• Replacing Tables with CSS
• A Brief Guide to CSS
• A Brief Guide to HTML

Related Reading

• Css Edge

Related Books

Related Ads