3-6: Styling your webpages or website with CSS

In addition to the tags used for text markup that we have seen in the previous section, there is a particular tag called span, that is a generic way to tag a chunk of text. We will use the span tag as a demonstration example on how to apply CSS to a tag. All tags can actually be styled with CSS similarly to what we show below for the span tag.

Let’s consider a span tag in the context of a proper HTML page:

If implemented like this, the span tag does nothing special to the tagged text. Unlike the h or strong tags, the span tag does not have any particular appearance associated with it by default by browsers. If you view the code above in a browser, you will not notice anything special about the format of the tagged text (figure 3-6-1).

We can use CSS to style the tagged text.

The different ways of using CSS

There are two main ways to assign a style declaration to a span tag (or any other tag):

• Using the style attribute within the span tag itself
• Assigning the span tag a class with the Class attribute, and then associate a style with this class in the styles definition. The style definitions can be included directly in the HTML page, typically within the head section of the page or placed in a separate CSS style sheet file (whose name usually ends with the .css extension) that is then linked to from the HTML page

Approach 1: Declaring Styles through the tag’s Style attribute

Let’s now use the style attribute to style a span tag. In this example, we will use CSS definitions to:

• set the font size to 20 pixels: font-size : 20px
• render the text in bold: font-weight : bold
• set the text color to red: color : red

Approach 2: Assigning a class to the tag and styling the class with a style declaration

Assigning a style with the style attribute directly within a tag has some limitations. Let’s imagine for instance that in your page you have 10 different pieces of text (for example sentences) that you wish to assign a particular formatting to, say the same we have used above: 20px, red, bold. You proceed to tag the relevant portions of text with span tags, each with a style attribute with the declaration:

This declaration is repeated for each span tag.

Let’s now imagine that one day you decide to change the color of your tagged pieces of text from red to blue. You have to change 10 style declarations to do this. You will easily miss a couple (at least one, I promise). After a while of proceeding this way, your web page will start to look as an heterogeneous mess.

For this reason, styling a tag with a style attribute is usually relegated to quick fixes, or anyway to styles applied only once in your page or site.

The way to proceed is instead to create a class, that you can style freely, and then assign this class to one or several tags. Changes to the styles definition of the class will affect all the tags of this class.

Let’s assign a class to a span tag by using the class attribute. We will call this class “enhanced-text”, but you are free to name your own classes as you wish.

We recommend to use meaningful, explicit class names that will make it easy to understand what a particular class is about. In the framework of the semantic HTML approach we follow in this course, your class names should reflect/indicate the meaning/nature of the elements the class is applied to.

2a. Inserting the style declarations in the head section of the HTML page

In the following example we use the class attribute within the span tag to assign the tag the “enhanced-text” class.

The graphical appearance of this class is dictated by the style definition in the head section of the HTML page.

Please note that in the style declaration the class name itself is preceded by a dot:

.enhanced-text

this is how classes are selected in CSS.

2b. Linking from the HTML page to an external CSS file

Inserting the style definitions directly in the head tag is apparently handy and quick, you have everything in one place (the HTML page). However the inclusion of styles in the page itself can make the HTML page code heavy to read. More importantly, a single CSS file can be imported from several HTML pages, maybe all the pages of your website, making sure you are using a consistent style for the whole site. When you want to change a style, you do so in a single place, the css file, instead of having to browse through all the pages and making individual changes. This last methodology is not only time consuming and un-necessary, it is error prone and will lead to site styling problems in the medium-long run.

For these reasons, we will keep in mind that the technique described above in paragraph 2a exists, but we will only use it for quick testing or quick fixes, maybe for a particular style used only in one page.

Instead, for general purposes, and for building a web site or even single pages, we will always have a dedicated, separated style sheet file, that we will import from the HTML pages.

The location of this file in the filesystem is up to you. However for consistency reasons and good practice, we will create this file in a subdirectory of our Document Root directory called css. Let’s call the css file itself “styles.css”. So we will create a css file and refer to it in html web pages with the following web absolute path:

/css/style.css

Let’s remind again that in web paths, the first slash indicates the Document Root directory rather that the root of the filesystem.

Here’s our style.css file contents for this simple first example, we invite you to create this file so that you can try for yourself:

This file now contains a single style declaration, which is unusual for a css file that would normally contain several declarations. This is just an example.

Let’s now import this file in the HTML page, with a link from the head section. To link to the css file the link tag is used. Similarly to the a tag, the link tag has an href attribute that takes as an argument the URL or path of the file to be linked. In the case of a stylesheet, this will typically be the path of a local file rather then an URL of an external file. The link tag also requires a mandatory rel attribute that indicates the relationship between the curent document and the document to be linked.

Learn more about the HTML link tag

Check out the link tag in the head section in the page code below:

Try this example for yourself:

• Create a styles file at /css/styles.css
• Link to it from a test page and check that the styles are applied correctly to the tagged text

Let’s now learn in more detail how to style common page tags and assign them to classes, so as to be able to fully control the aspect of our pages.

Chapter Sections

[pagelist include=”135″]

[siblings]