Cascading Style Sheets (CSS)

Let’s take a look at the CSS part of the simple graph code to understand why our graph looks the way it does.

The CSS portion of the code

The CSS code is as follows:

Understanding the CSS portion

CSS gives us control over the look, feel, and presentation of web content. The idea is to define a set of properties to objects on the web page.

They are made up of “rules.” Each rule has a “selector” and one or more “declarations.” Each declaration has a property and a value (or a group of properties and values).

For instance, in the CSS code above, we have the following:

• line is the selector. The period (.) in front of line indicates that the selector is a “class.” This tells us that on the web page, any particular element line (and we are going to apply this rule to the line of our graph), which we decorate with the “class,” will have the various declarations applied to it.

• There are three declarations as part of the rule. These are contained within curly braces and separated by semicolons.

• One of the declarations is for the width of the graph line (stroke-width: 2px;). The property is stroke-width:, and the value is 2px (2 pixels). This tells the web page that any element in the web page that has the class line will have lines drawn that are (amongst other things) 2 pixels wide.

Sure enough, if we look at the line of the graph:

That looks as if the line might actually be 2 pixels wide!

Let’s try a test. We can change that particular declaration (line 4) to the following:

stroke-width: 20px; 

And the result is:

Ahh, 20 pixels of goodness!

Because we’re getting the hang of things now, let’s change the color declaration to:

stroke: red; 

And we get:

Awesome! I think we can safely say that this has had the desired effect. So what else is there?

Since there’s only one declaration left, it seems like a shame not to try something different with it:

fill: blue; 

We’ll get:

So the fill property (line 2) looks like it will change the color of the area that would be closed by the line. Nice.

One thing to take away from this small exercise is that there is a good deal of flexibility in adjusting the properties of elements on the web page via CSS.

You can test these changes by editing the CSS portion (highlighted) below: