Adding custom style instructions with CSS3

Go back to HTML and CSS Index

In this lesson, we will have a look at how to add custom style instructions to our pages using CSS.

What is CSS?

CSS is an abbreviation for Cascading style sheet. Like with HTML I don't consider it a programming language, but a language used to add styling to HTML elements.

Every browser has its own standard style instructions for each HTML element that it supports - these standard style instructions apply if there are no custom style instructions added to the element.

The pages that we have created so far don't have any custom style instructions and therefore it is the browser's standard style instructions that apply.

If we open up one of our pages in the Google Chrome browser and then use the inspect tool, we can actually see what style instructions apply - the ones marked with user agent stylesheet are the ones added by the browser:

Example of a user agent stylesheet
Example 3.10 | The User Agent Stylesheet

3 ways to add style instructions

There are 3 ways to add style instructions to a page:

  • Inline (not recommended)
  • Internal (not recommended)
  • External (go for it!)

Inline CSS

I don't recommend using inline CSS, but I'll show you an example anyway since you might come across it at some point:

<h1 style="color: red"> This heading is red </h1>
Example 3.11 | Inline CSS

As you can see from the example, inline CSS is added directly to the HTML element that you want to style by adding the style attribute to the start tag. The value of the style attribute is the CSS property you want to change followed by a colon and the value you want the property to have.

In the example, we are changing the font color to red (standard is black).

Does it work? Yes. So why not use it?

The problem with inline CSS is that you have to style each and every element seperately which gives an enormous amount of code and makes it impossible to get a good overview. As web developers, you should strive to not repeat yourself - this is known as DRY.

Internal CSS

Another way to add CSS is doing it internally, like so:

<head>
<style>
p {
color: green;
}
</style>
</head>
Example 3.12 | Internal CSS

The style element is placed somewhere inside the head element. Inside it, the selector defines the element. The selector is followed by curly brackets that wraps around each property name/value pairs that you want to change seperated by a semicolon.

In the example above, we change the font color of each p to green, which basically means that all of our paragraph text turn green.

The problem with internal CSS is that you have to copy the whole style element to each and every page on your website in order for them to look the same - and if you change anything, you have to do it all over again. If you only have a couple of pages - not a big problem; but if you have closer to 1000 product pages in a webshop - well, you get the idea.

External CSS

The best way to add CSS is therefore to link to an external CSS file.

We start by actually creating and saving the external CSS document:

Creating a CSS3 document with Adobe DreamWeaver

  • Open up Adobe DreamWeaver
  • Create a new file
    • File -> New
    • Select CSS
    • Create
  • Save the file
    • File -> Save as...
    • Name the file style.css
    • Save the file in a subfolder named css.

The css document will look something like this:

@charset "UTF-8";
/* CSS Document */
Example 3.13 | Basic CSS template

Below the code inserted by DreamWeaver, CSS is added the same way as before (but without wrapping it in style tags):

@charset "UTF-8";
/* CSS Document */
p {
color: blue;
}
Example 3.14 | External stylesheet

Then, once we have the css document saved to the subfolder css inside the project folder, we go to the HTML page that we want to style and insert the following element:

<head>
<link rel="stylesheet" href="css/style.css">
</head>
Example 3.15 | Link to external CSS

Using the empty link element with the two attributes rel and href, we create a link to our stylesheet. The link can be inserted on any page on our site, giving the site a consistent look and feel.

The rel attributes specifies the relationship between the current document and the linked document, telling the browser that the linked document is a stylesheet.

The href attribute specifies the URL of the resource - in this case, it points at the file style.css placed in the subfolder css.

Assignment

If you add more than one style instruction to an element, eg. changing the color, the one closest to the content will overwrite the other(s). But which one is the closest?

  • In your about.html document, add inline style instructions to a paragraph, changing the color of the text to red.
  • Internally in the same document, add the style element in the head. From there, change the color of paragraph text to green.
  • Create an external file (if you haven't already) and name it style.css. Save it in a subfolder named css in your project folder. In the css document, change the color of the paragraph to blue.
  • In about.html, add a link to the external stylesheet.

Judging by the color of the paragraph - which one overrules the others?

Comments in CSS

Comments are only visible in the code, not on the actual page. In CSS, they look like this:

/* My comment */
3.2 | Single line comment in CSS

When you have a multiple line comment, you usually write it like this:

/*
* This is a
* multiple line
* comment
*/
3.21 | Multiple line comment in CSS

Next up

In the next lesson, we will look at how to change the colors of the elements.

Next up: Changing colors