Making Your First CSS Style Sheet

February 26, 2022 9 minutes read

Table Of Contents

Intro

This tutorial will show you how to style your created webpage made with HTML.

Before we start with styling what is CSS? CSS, the full name being: Cascading Style Sheets, is a style sheet language that provides styling to a markup language such as HTML. It allows us to make websites that look different (or the same) to other websites and to provide personality to whatever information is on our site, whether that is images, videos, text, etc.

Requirements

web-browser
plain-text editor
Know how to create a basic HTML document, if not read here

Setup

First we will need a HTML file with some content we can style later in the tutorial. For example you can use the below HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>This is a title</h1>
</body>
</html>

Where to place CSS

Once we have our HTML document we need to decide how we are going to place the styles into the document. There are several ways we can do this, we can also use different/multiple methods in the same page.

Very basic CSS styling will be shown, but will be explained in a later section.

Style Element (Internal)

The first method is going to be embedding a style element into our webpages head element. This allows us to write CSS that will allow us to style all elements in the page.

1
2
3
4
5
6
7
8


<!-- file: index.html -->
<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

Style Attribute (Inline)

The next method is to place a style inside a “style” attribute on an element.

1
2
3
4


<!-- file: index.html -->
<h1 style="color: blue;">
    Welcome
</h1>

This method is very restrictive as you can only style an individual element for example a “h1” element. As an example if you wanted to style all “h1” elements you would have to copy the style attribute to every element, this produces repeated code and therefore is not DRY code.

Use this method with caution as you loose many features of a “style sheet”.

Linked (External)

The last method is one of the best methods for creating a site. This is because it allows you to link a separate CSS file from somewhere else. This allows you to split up your styling from your content which brings many benefits, one of them being you can use the same “style sheet” on multiple pages.

Further sections in this tutorial will use this method.

1
2
3
4


<!-- file: index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

1
2
3
4


/* file: style.css */
h1 {
    color: blue;
}

As you can see we have two files, one is the HTML document and the other is the CSS file, with a “.css” extension. To link to the CSS file so it will be loaded by the browser; we use a “link” element inside the document’s head. This link has a “rel” attribute which is saying it is a “stylesheet”, this way the browser will know how the link effects the page. The “href” attribute is saying where the file is located; in this case it located in the same directory as the HTML file, but with a filename called “style.css”, this file must exist to be loaded.

Format

To create a style we need to follow a format. The below example will show how one can be created.

1
2
3


selector {
    property: value;
}

First we need to create a rule-set this will be a selector with curly braces “{ }” after it.

We can have multiple rule-sets per style sheet.

The selector is what will be styled this can be a element, class or id, we will cover those in the next section.

The property is what we styling for the element, this will end with a colon “:” and must have a value(s) after it. After the value a semi-colon will be placed at the end to indicate a completed declaration.

We can have multiple properties per rule-set.

A property with a value is called a declaration.

Styling

Now we know where the styles will be stored and what a style looks like, we can move on to selecting what should be styled. There are several ways we can do this.

By Element

The first way is by selecting by an element. In the code examples so far I have used the “h1” element. Let’s expand the example to have some more elements to style.

1
2
3
4
5
6
7
8
9


<!-- file: index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>This is a title</h1>
    <p>This is a paragraph, with some text worthy of a paragraph tag!</p>
    <h1>Another heading</h1>
</body>

1
2
3
4


/* file: style.css */
h1 {
    color: blue;
}

By Class

So far we have covered styling by elements. Although very useful, we will get into trouble if we want to style two “h1” elements with different styles. This is where selecting by a class comes in to play.

This will be achieved with the “class” attribute in the HTML element, in the style sheet we will instead start a rule-set with a “.” then the classes name.

1
2
3
4
5
6
7
8
9


<!-- file: index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="centred">This is a title</h1>
    <p class="centred">This is a paragraph, with some text worthy of a paragraph tag!</p>
    <h1>Another heading</h1>
</body>

1
2
3
4
5
6
7
8
9


/* file: style.css */
h1 {
    color: blue;
}

.centred {
    text-align: center;
    color: black;
}

As you can see we have added the class “centred” to two elements using class="centred", this class name has been made by me, you are free to use any name as long as no spaces are used.

You can add multiple classes to a element by separating each class with a space.

Let’s move on to the CSS file. It has the same “h1” style, but also a new one which will be our “centred” class. This will simply make the text aligned to center and set the text color to black.

If you look at the page with this new code you will see that the heading element with the class has a black color and is centred, this may be not what you expected. This is because CSS styles are inherited and allow for overrides, we will cover this more in another section.

By ID

We also have the option to use the “id” attribute for a element instead of a class. This is used for unique elements on a page. Each element that is given an id should not use another elements id.

1
2
3
4
5
6
7
8


<!-- file: index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 id="main-heading">This is a title</h1>
    <h1>Another heading</h1>
</body>

1
2
3
4


/* file: style.css */
#main-heading {
    text-align: center;
}

As you can see the first “h1” element has: id="main-heading", this is the elements id being defined. The CSS will make the “main heading” centred, instead of a “.” like a class we are instead using “#” to signify we want to match a id.

Priorities, Inheritance & Overriding

A style sheet applies the selectors in a specific order, this allows for inheritance and overriding.

Below is the order that the selector styles will be applied.

element
class
id

Try out the below code sample to see priorities and overriding in action:

1
2
3
4
5
6
7
8
9


<!-- file: index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="centre" id="main-heading">This is a title</h1>
    <h1>Another heading</h1>
    <h1 class="centre">Another heading 2</h1>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


/* file: style.css */
h1 {
    color: blue;
}

.centre {
    color: black;
    text-align: center;
}

#main-heading {
    text-align: left;
}

Let’s move on to inheritance. This is when a element inherits the parents styling.

Some element types don’t inherit

Try out the below code sample to see inheritance:

1
2
3
4
5
6
7
8
9


<!-- file: index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body class="blue">
    <h1>This is a title</h1>
    <p>This is a paragraph, with some text worthy of a paragraph tag!</p>
    <p class="reset">This is another paragraph</p>
</body>

1
2
3
4
5
6
7
8


/* file: style.css */
.blue {
    color: blue;
}

.reset {
    color: black;
}

As you can see I have applied the class “blue” to the body, this will make all children have blue text. I then have another class called “reset” which will make the text black, this will override the inherited style.

Extras

This section will briefly show some extra things you can do with CSS.

Pseudo-class

As well as selecting by element, class and id; you can select by pseudo-class. This is useful for many things, one of them allowing for hover effects over buttons. This is achieved with the normal selector such as a element then a “:” with the pseudo-class in this example “hover” is used to change the button color when the mouse is hovered over.

1
2
3
4
5
6
7


<!-- file: index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#">My Button</a>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


/* file: style.css */
a {
    padding: 12px;
    margin: 4px;
    background-color: lightgrey;
}

a:hover {
    background-color: grey;
}

Multiple Selections

We can also style multiple elements with the same styles easily. This is achieved by specifying multiple selectors separating them with a “,”

1
2
3
4
5
6
7
8


<!-- file: index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>This is a title</h1>
    <p>This is another paragraph</p>
</body>

1
2
3
4


/* file: style.css */
h1, p {
    color: blue;
}

Nested Selections

We can also use nested selections for when we want to style a specific parent’s child or children.

The following code example will only style the heading inside the “div” element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!-- file: index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>This is a title</h1>
    <div>
        <h1>Nested Title</h1>
    </div>
</body>

1
2
3
4


/* file: style.css */
div h1 {
    color: blue;
}

Conclusion

With this tutorial you should be able to:

Know what CSS is
Be able to styling using the style element, inline styles and external linked style sheets
Implement styles using selectors such as: element, class and id
Understand how priorities, inheritance & overriding work in CSS

There is much more to learn about CSS. I would consider learning how to lay out elements as they allow you to make interesting designs. Also knowing some of the properties will be useful, there are many, so don’t expect to remember all of them!