2 – CSS

Getting ready

All the scripts that we will use while learning CSS are in classpak2.zip.

The following videos go over material that we will use:

Connecting HTML and CSS

Let’s go over Cascade Style Sheets (CSS); we will use them to add the style to the HTML content of our fan webpage that we started last week. Content – defined by HTML – is things like titles, text, images, and links; style – defined by CSS – is things like font families, image and font sizes, and background colors and patterns. We modify the style of some content when we modify its appearance. For example, we have some content – a line of text – that looks like this:

I’m red

created with this script:

that we can see in action here. We would like to color the word ‘red’, to emphasize it, like this:

I’m red

To do this we need to apply the following CSS style to the word ‘red’:

In CSS jargon, ‘color’ is the property that we want to set and ‘red’ is the property value that we want to set it to. Although we could apply the style to the paragraph <p>I’m red</p>, this would color all the words of the element, i.e., ‘I’m red’, but we only want to color the word ‘red’. Thus, we need to place the word ‘red’ in its own element, with a <span> tag:

Now that we have isolated in its own element the content whose style we want to change, let’s look at the three ways that we could use to apply the style.

Inline style


The first way to apply a style to an element is to add the style to the opening tag of the element, inline, in the html file. Inline style is convenient when we need to change something small, or only for a moment. However, it mixes content and style so it is difficult to debug, and it’s time consuming to apply and to modify.

Still, for this small example, the inline style works well. All we need to do is to add the style to the span element that contains the word ‘red’:



so we modify our script like so:

We can see the script in action here.

External style sheet

external style sheetA second way to apply the style to our element is to keep the content in the html file but move the style to an external css file. This works well when different people work on different aspects of the webpage, e.g., a writer on the content, and a graphics designer on the style; in this case, each person modifies only one file. External style sheets also work well when the same webpage can have different ‘skins’; changing the ‘skin’ of the site would only require changing the style sheet.

To get an external style sheet to work we need to create connections between the html and the css file. In the head of the html file, we create a link to the css file that we are going to use, e.g., ‘style.css’. Also, in our example, it is a good idea to give an identification to the element that we are going to change, e.g., we give the span that we want to change the id ‘red_text’:

Now we create the file ‘style.css’, and indicate that we want to set the ‘color’ property of the element with identification ‘red_text’, a.k.a. the selector, to the property value ‘red’:

We can see these scripts in action here.

We us selectors to target the elements that we want to change. Selectors can be the element name (e.g., ‘h1’), the element id (e.g., ‘#red_text’), the element class (e.g., ‘.my_class’), and others.

Internal style sheet

css internal style sheetThe third way to apply the style is to move all the css style inside the head of the html file.

This way to apply the style is a tradeoff between the inline style and the external style sheet. It separates the content from the style but it only works for a single html file. Also, it works best when a single person is working on the webpage.

All we need to do is to move the style from the external style sheet to the head of the html file, and set is as the content of a <style> element:

We can see this script in action here.

Summary

The different ways to apply styles cater to different type of projects:

  • inline style: it’s good for small single-person projects that need small or temporary changes
  • internal style sheet: it’s good for one/multiple-person single-page projects that have a single style all the time
  • external style sheet: it’s good for one/multiple-person single/multiple page projects that might have more than one style

Although our fan webpage is a single-person project, we are really working as two different people: one that writes the content, and another one that works on the style. We are done with the content, though, and we only need to work on the style, so it makes sense to use a external style sheet. Let’s go with that.