CSS for the complete beginner

April 5, 2021

What is CSS?

CSS (Cascading Style Sheets) is used to modify the style and layout of a webpage. While HTML may be considered the bones of a website, CSS could analogically be considered the skin.

Every single website you see that doesn’t look like left-aligned black Times New Roman text on a white background with blue underlined links, has indeed been styled with CSS.

CSS Syntax

CSS is rule based and because of this, it allows you to specify specific styles to be applied to specific elements on your web page. For example, one could set a rule to state, “I want all paragraph text on this web page to be 16px and green”.

This could be accomplished with the following CSS rule:

p {
    font-size: 16px;
    color: green;
}

The anatomy of a rule

css-f1.png

As seen in the image above, there are several key pieces to a CSS rule.

The Selector

The selector is how you tell the browser what element(s) should have their properties updated with the properties’ paired value in the declaration. The selector can take many different forms.

In the example above, we see that the selector is simply using p. This is called a type selector, and will select all paragraph elements in the HTML document that this stylesheet is applied to.

Of course the type selector is just one of many ways to select an element. We will explore some of the other selectors later in this article.

The Property and Value

Properties and values are the bread and butter of CSS.

Simply put, a property within a declaration is an identifier for a particular attribute to be altered by the properties’ paired value. CSS allows you to modify a multitude of properties. The list of properties includes just about everything you can think of!

You can check out a full list of valid properties here.

The Declaration

The declaration is simply everything contained within the curly braces after the selector. It is a collection of property: value; pairs. In nearly every case, the top-down order of your property: value; pairs is not important!

The Rule

The rule is the entirety of the code block. It's what you get when you put everything all together!

Comments

A comment is simply a piece of code that will be ignored. To create a comment in CSS, you can wrap your text in /* …… */. This can be on a single line, or on multiple lines:

/* This is what a comment looks like */
p {
    color: red;
}

/*
This is a comment
that spans
multiple lines
*/

h1 {
    color: green;
}

Adding CSS to HTML

As usual, there’s more than one way to add your CSS to your HTML.

Inline Styles

Inline styles is generally regarded to as the opposite of a best practice. In using inline styles, you are writing one rule per element. This is detrimental because any time you may need to change a particular CSS rule, you will have to attempt to find every place you’ve declared that rule in your HTML, and update it in each place.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>

    <body>
        <h1 style="color: red; font-size: 36px;">Hello world!</h1>
        <p style="color: blue; font-size: 16px;">I am an example!</p>
    </body>
</html>

As you can see in the above code, we have an inline style applied to our H1 element that sets the color to red, and the font size to 36px. We also have a paragraph element with a color of blue, and font size of 16px.

Let’s imagine for a moment that we have several <p> elements:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>

    <body>
        <h1 style="color: red; font-size: 36px;">Hello world!</h1>
        <p style="color: blue; font-size: 16px;">I am an example!</p>
        <p style="color: blue; font-size: 16px;">I am an example!</p>
        <p style="color: blue; font-size: 16px;">I am an example!</p>
        <p style="color: blue; font-size: 16px;">I am an example!</p>
        <p style="color: blue; font-size: 16px;">I am an example!</p>
    </body>
</html>

With multiple elements each individually styled, we will have to update the inline style of every element, even if we just want to change a single property. It's much simpler instead to use a CSS file that is linked to our HTML that contains a style for all paragraph elements.

External Stylesheets

Now that we know we should be using external stylesheets, how do we do it? Well its actually very simple.

The first thing we have to do is to create a file in the same directory as our HTML document. You can call this anything you like, but it must end with the extension .css. A common practice, especially if only using a single CSS file, is to call this styles.css.

Once your CSS file is created, you have to link it to your HTML document. This can be accomplished by simply adding a link tag somewhere inside of your <head> element in your HTML document:

<link rel=“stylesheet” href=“styles.css”>

This <link> tag defines a relationship between the current HTML document and an external resource. It’s most often used to link to external style sheets.

There are two properties that we see here, the first of which is rel. rel stands for relationship, and this specifies the relationship between the current HTML and linked resource.

The second property we see is href. Similar to the href that you’ve probably already seen in <a> elements, this tag specifies the URL of our resource. This must be the name of the CSS file that you previously created.

Now, we can setup some CSS code in our new file:

h1 {
    color: blue;
    font-size: 36px;
}

p {
    color: green;
    font-size: 16px;
}

In addition to our new CSS, we can remove our inline styles from the HTML:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>

    <body>
        <h1>Hello world!</h1>
        <p>I am an example!</p>
        <p>I am an example!</p>
        <p>I am an example!</p>
        <p>I am an example!</p>
        <p>I am an example!</p>
    </body>
</html>

Now, if we edit the rule that is altering our <p> elements, we only have to make that change in a single place to alter all five <p> elements.

Diving into selectors

Basic selectors

As mentioned previously, there are many ways to select elements with CSS. We’ll go over a handful of them here.

Type Selector

The type selector selects all elements that have a type matching said selector. Here are a few examples:

p {
    color: red;
}

h1 {
    text-align: center;
}

div {
    display: flex;
}

Class Selector

The class selector selects all elements matching a particular class name. It’s prepended with a period like so:

.blog-content {
    color: red;
    font-size: 16px;
}
<p class="blog-content">
    This is p content with the blog-content class.
</p>

This is particularly useful if you don’t want to select every element of a given type. In your HTML document, you can simply assign a class to each of the elements you wish to target.

ID Selector

The ID selector selects all elements matching a particular ID. Instead of prepending with a period the way that class selectors are, you prepend with a hashtag:

#blog-title {
    font-size: 36px;
    color: green;
}
<h1 id="blog-title">I am a blog title!<h1>

It’s important to note that IDs should generally be unique per HTML document. Because of this, the ID selector is not typically used as often as the class selector.

Universal Selector

The universal selector simply selects everything. You can further specify what this everything is by combining it with a combinator. We will dive deep into combinators in a different post.

/* 
This style will be applied to all
elements on the page
*/

* {
    background-color: red;
}

/*
This style will only be applied to all
elements that are descendants of a <div> 
element.
*/

div * {
    background-color: pink;
}

CSS Is powerful

In summary, CSS is an extremely powerful tool that allows you to completely change the look and feel of a web page. This post is just the tip of the iceberg of what can be accomplished with CSS.

Thanks for reading, and stay tuned for more!

Header photo by Greg Rakozy on Unsplash