CSS: Using Styles

This series will talk about CSS in the hope of helping developers, new and old, to get a better understanding of CSS.

---

Why am I writing this?

As someone who mentors students in a local bootcamp, I'm seeing little appreciation for CSS. Most of it comes from frustration that many new developers feel when dealing with CSS. I hope that this series can show that CSS isn't your enemy.

Whether or not you learn something new from the series, I hope you enjoy reading it nonetheless.

Who is this for?

This series is for someone, beginner or not, who wants to learn or get a better understanding of CSS.

How often will I post?

I plan on posting a new part at least once a week depending on whether or not the topic needs to be split up into multiple parts.

---

Using Styles

Let's begin with the complete basics; how do we use styles? We can use styles in three different ways -- inline styling, style tag and link tag.

Inline Styles

Inline styling is the simplest to understand as it is the most verbose of all the different ways we could use styles. Inline styling means that you're using the style attribute of HTML tags to specify that element's style.

<div style="background-color: lightblue; border: 1px solid blue;">
  <p style="font-size: 12px; font-weight: bold;"></p>
</div>

Now, inline styling isn't really manageable specially if you have a lot of elements to style. Luckily, we have the style tag so we can centralize our styles.

style Tag

The style is a regular HTML element located, usually, as a child of the head tag. I say usually because you can technically put it within the body tag but it's not recommended.

<style>
  div {
    background-color: lightblue;
    border: 1px solid blue;
  }

  p {
    font-size: 12px;
    font-weight: bold;
  }
</style>

NOTE: You can have multiple style tags in your HTML document but you don't really need to do that.

<style>
  div {
    background-color: lightblue;
    border: 1px solid blue;
  }
</style>

<style>
  p {
    font-size: 12px;
    font-weight: bold;
  }
</style>

Great! We now have a central location where we can put our styles but what if we want to reuse the styling? We don't really want to copy and paste the style everywhere; that would get unmanageable really quickly.

This is where external styles and the link tag come in.

link Tag

The link tag allows us to link an external resource into our HTML document. We can move our styles from the style tag into a .css file.

We can make a file called style.css and link it into our HTML.

/* style.css */

div {
  background-color: lightblue;
  border: 1px solid blue;
}

p {
  font-size: 12px;
  font-weight: bold;
}

We can then link this CSS file.

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

If we have multiple CSS files, we can link all of those as well.

<link href="style.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">
<link href="style3.css" rel="stylesheet">

Writing styles?

Now that we know how to incorporate CSS into our HTML, how do we actually write it?

A style block is comprised of a few parts -- the selector, and a property-name-value pair. You can have as many property-name-value pairs as needed.

selector {
  property-name: property-value;
}

It's important to end each propert-name-value pair with a semicolon (;) as it signifies the end of that pairing.

Any property-name-value pair that exists within the block will be applied to the selector.

div {
  background-color: lightblue;
  border: 1px solid blue;
}

p {
  font-size: 12px;
  font-weight: bold;
}

All div elements in your HTML will have a light blue background colour and blue border while all p elements will have a font size of 12px and bold.

What if we want certain div elements to have a different background colour or border? What if we only want one of our p elements to have a font size of 12px? That's where the next topic of the series comes in -- selectors.

---

PS. I hope you enjoy the our first topic about CSS!