Learn Web Development for Beginners: Styling Your Page With CSS

Like HTML, learning and mastering CSS is equally crucial to your web development journey as we are able to personalize our (or your client’s) website to make it truly unique.

Let’s continue where we left off to touch upon the basics of styling our web page. If you haven’t read the previous guide and you’re not familiar with HTML, I recommend you read it first to follow along: Learn Web Development Fast: Your First HTML Page.

How do we style our web page?

To style a web page, we need to use a style sheet language along side our HTML.

Yes, another language… Don’t worry too much about it, it’s better to learn HTML and CSS simultaneously as they’re meant to work together. If you follow along you’ll eventually get the hang of it.

Writing Cascading Style Sheet or CSS for short requires you to select the HTML element and add the property-value pair. To put it into words, it’s like saying:
“Select all <h1> elements, set the color property to the value of blue“.

We will get into how we can add CSS in our HTML, don’t add the below code yet if you don’t know what you’re doing.

To put the words into code, it looks like this:

h1 {
  color: blue;
}

h1 { color: blue; }

h1{color:blue;}

Write the selector, surround the property: value; syntax with curly braces, and that’s it!

Selector: h1
Property: color
Value: blue

White spaces are ignored, but we will be formatting our CSS for the sake of readability.

If you’re wondering what the “Cascading” in CSS stands for, I bet you’ll figure the appearance of our <h1> tag with this code:

h1 {
  color: blue;
  color: indigo;
}

It’s called cascading because the browser applies our CSS to our HTML elements from top to bottom. That means the bottom-most CSS properties will always overwrite the properties above it, unless we use the !important keyword:

h1 {
  color: blue !important;
  color: indigo;
}

In this case, color: blue !important; will always take precedence and can’t be overwritten… unless:

h1 {
  color: blue !important;
  color: indigo !important;
}

See, how it’s getting confusing the more we use the !important keyword? That’s why it’s always recommended to avoid using it entirely, and only use it as a last resort. It will make your debugging easier in the long run if you don’t use it.

Now that the syntax and the keyword of doom is out of the way, let’s actually start applying our CSS.

Ways to apply CSS

In modern day web development, there are three ways to add CSS to our page: inline, embedded, and external. We will go through each one of them, but keep in mind that we are going to use the same language, it’s just the method of application that differs.

Inline Styles

As the name suggests, CSS is applied to the HTML element inline or directly, via the style=”” HTML attribute:

<h1 style="color: blue;">Welcome to My Website</h1>

You can chain multiple properties inside the style attribute like style=”color: blue; background-color: skyblue;” and it will work fine. Notice we don’t include the surrounding curly braces to it.

If you apply the same method to our <p> tag, we can do the same:

<h1 style="color: blue;">Welcome to My Website</h1>
<p style="color: #555555;">Hello, World!</p>

Notice the color value #555555, it’s a hex code. If you haven’t encountered one before, it’s basically a code value of a color, and is usually taken from a color picker. If you are more comfortable with RGB values, you can do that as well, like: color: rgb(85, 85, 85);

Easy right? But why do we have other methods in applying our CSS if inline styles are this straightforward? Well, try applying the same styles on our <p> tag above to the following code:

<h1 style="color: blue;">Welcome to My Website</h1>
<p style="color: #555555;">Hello, World!</p>
<p>From my first web page!</p>
<p>John Doe - CEO</p>
<h2 style="color: indigo;">Likes and Dislikes</h2>
<p>John likes Bread and butter.</p>
<p>He also likes Photography.</p>
<p>He doesn't like his socks to get wet.</p>
<p>He hates flying cockroaches.</p>

As you have guessed, it’s cumbersome. Not only that, but what if we’re chaining our styles?

<h1 style="color: blue; background-color: skyblue; text-align: center; font-style: italic; letter-spacing: -1px;">Welcome to My Website</h1>
<p style="color: #555555; line-height: 18px; letter-spacing: 1px; background-color: coral; font-size: 16px;">Hello, World!</p>
<p style="color: #555555; line-height: 18px; letter-spacing: 1px; background-color: coral; font-size: 16px;">From my first web page!</p>
<p style="color: #555555; line-height: 18px; letter-spacing: 1px; background-color: coral; font-size: 16px;">John Doe<br />- CEO. <a href="https://en.wikipedia.org/wiki/Seven_(1995_film)">Se7en</a></p>
<h2 style="color: #555555; background-color: skyblue; text-align: center; font-style: italic; letter-spacing: -1px;">Likes and Dislikes</h2>
<p style="color: #555555; line-height: 18px; letter-spacing: 1px; background-color: coral; font-size: 16px;">John likes Bread and butter.</p>
<p style="color: #555555; line-height: 18px; letter-spacing: 1px; background-color: coral; font-size: 16px;">He also likes Photography.</p>
<p style="color: #555555; line-height: 18px; letter-spacing: 1px; background-color: coral; font-size: 16px;">He doesn't like his socks to get wet.</p>
<p style="color: #555555; line-height: 18px; letter-spacing: 1px; background-color: coral; font-size: 16px;">He hates flying cockroaches.</p>

A couple of days later, you decided to change the color of your <p> tags and some of its content… good luck!

If you keep your code readable, collaborators, friends (if you have one), and your future self will thank you for it.

If inline styles are so bad, why go through the effort of learning it in the first place?

Because of specific styling purposes.

The general rule is to only use inline styles if you have a very specific style in mind that will only happen once. If you tend to use the style more than once, it’s best to use embedded or external styles instead.

Embedded Styles

Let’s clean up our previous mess since we don’t have anything to do with our HTML in the next examples.

<h1>Welcome to My Website</h1>
<p>Hello, World!</p>
<p>From my first web page!</p>
<p>John Doe<br />- CEO. <a href="https://en.wikipedia.org/wiki/Seven_(1995_film)">Se7en</a></p>

<h2>Likes and Dislikes</h2>
<p>John likes Bread and butter.</p>
<p>He also likes Photography.</p>
<p>He doesn't like his socks to get wet.</p>
<p>He hates flying cockroaches.</p>

As you have noticed on our first example with CSS, we were using a slightly different syntax than that of the inline styles, like this:

h1 {
  color: blue;
}

We can apply this syntax on both embedded and external styles. To apply this as an embedded style, we first create a <style></style> HTML tag and place all our CSS inside it, like:

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>Hello, World!</p>
  <p>From my first web page!</p>
  <p>John Doe<br />- CEO. <a href="https://en.wikipedia.org/wiki/Seven_(1995_film)">Se7en</a></p>
...

We can technically place the <style> tag anywhere, but it’s recommended to put it inside the <head> element.

If we were to convert what we did on the first inline styles examples, our code ends up like this:

h1 {
  color: blue;
}

p {
  color: #555555;
}

Compare that to our last inline styles example, we get a significantly readable HTML and CSS code while achieving the same effect.

What if we combine both inline and embedded styles in one page, what will happen? The inline style takes precedence. If you view the following code for example:

  <style>
    h1 {
      color: blue;
    }
    p {
      color: green;
    }
  </style>
</head>
<body>
<h1>Welcome to My Website</h1>

<p>Hello, World!</p>
<p>From my first web page!</p>
<p>John Doe<br />- CEO. <a href="https://en.wikipedia.org/wiki/Seven_(1995_film)">Se7en</a></p>

<h2>Likes and Dislikes</h2>

<p>John likes Bread and butter.</p>
<p>He also likes Photography.</p>
<p style="color: orange;">He doesn't like his socks to get wet.</p>
<p style="color: red;">He hates flying cockroaches.</p>

You’ll see that the inline styles we added for the last two <p> tags will overwrite the embedded CSS we added for all the <p> tags.

Screenshot of inline and embedded styles conflicting CSS

Not to conjure the devil or anything, but what happens if we add the !important keyword in our embedded CSS for the <p> tags? Like this:

p {
  color: green !important;
}

It will take precedence over the inline style we applied. It messes up the natural order of things, it loves chaos, so it’s better to keep it hidden deep within the bowels of the earth.

Now, it’s pretty obvious that this method is better than inline styles if you are planning to apply the same styles on multiple elements, but how about external styles, why bother?

Here’s the catch, embedded styles stay within the page where you added it. If you have more than one page, you have to copy the <styles> tag and its CSS styles again to that page, do the same if you have more. If you need to update the CSS, you have to update every single page. We’re seeing a similar pattern with the issues of inline styles, and that is repeating yourself.

That is where external styles come in.

Don’t Repeat Yourself (DRY): a principle in programming which we can also apply in our CSS. Basically it makes maintaining code easier since we only have to update the single source of repeatable code we implemented. You can read more about it here.

When should I use embedded styles then? Similar to the issues of using inline styles, use embedded styles if you plan to style multiple elements only specific to that page.

Say, if you have a base font size of 16px site-wide, and you have this specific page where the <p> tags must have a 20px font size –like a landing page– then embedded styles should be used to overwrite the existing external styles.

It is still recommended to use external styles entirely, though, even on the aforementioned landing page example. Why? Oh you’re stubborn huh? Short answer: code optimization. It’s an advanced topic, but just know that it’s easier to optimize code if your CSS is in its own file rather than embedded or inline.

External Styles

What do you call a fashion trend that only exists outside your house? External style…

Sorry for the feeble attempt to entertain you..

Jokes aside, external styles means putting all your CSS styles in a .css file and linking that file inside our HTML page.

To do that, we will be using the <link> HTML tag inside our <head> tag, like this:

<head>
  <link rel="stylesheet" href="style.css">
</head>

Behind the scenes, I created a style.css file in our project root, where our index.html is located.

Basically, the <link> tag links or “imports” the .css file into our HTML page. That in turn imports all the styles we placed in our CSS file:

style.css

h1 {
  color: blue;
}
p {
  color: #555555;
}

The href=”” HTML attribute takes a file path, in this case, since our .css is at the same level as our .html file, we only pass in its file name and extension.

You can pass files that are located inside a sub folder, or outside the current level the .html file is in. Here’s a quick example from w3schools. We will be dealing with complex file structures on some intermediate topics later on, but to keep things simple in this series of beginners guide, let’s place all the files within our project root.

Now, you only have to copy the single line <link> tag to all other pages. If there’s a need to update the CSS for our h1 tag for example, we do it in the source CSS file and all of the pages get updated. Pretty neat right?

Like in our previous examples, what happens if we combine inline, embedded, and external styles?

Inline styles will still take precedence, but the embedded or external styles follows the order in which you have placed them. The last external or embedded style will overwrite everything above it. Try it out and see for yourself!

<link rel="stylesheet" href="style.css">
<style>
  p {
    color: deeppink;
  }
</style>

Screenshot of text where embedded styles overwrite external styles.

<style>
  p {
    color: deeppink;
  }
</style>
<link rel="stylesheet" href="style.css">

Screenshot of text where external styles overwrite embedded styles.

There’s no limit to the number of external styles you can add to your page, just remember that the latest (bottom) styles will overwrite all the styles above it.

In the next page, we will cover CSS selectors and properties to learn more about how we could style our elements.

Continue to Next Page

Pages:

1 2