ColorCode

Before we write any CSS I want you to know... all browsers already have a bunch of CSS in them. The reason why <h1> is bigger than <p> without you writing any CSS, is because the browser comes with a set of default styles. You can see these in Chrome if you just inspect element and go down to the styles tab. I’ll tell you what they mean soon. They might be slightly different from browser to browser. But they do exist.

So now that we know that, it’s time for us to write our own styles. There are 3 ways to change the styles of your page.

Inline styles (bad)

First one is Inline styles. This means within HTML, using an attribute directly added to your elements. I tell you why that’s a terrible idea here. But here’s an example just so you know how it’s done.

<header style="color: red"></header>

This is bad. Don’t do this.

Using <style> tag (better)

The second way is through actual CSS. Which is a much better idea. You can write your CSS inside a STYLE tag, usually in the HEAD. Whatever you put inside a STYLE tag the browser will treat as CSS.

Here’s a basic CSS formula. About 90% of your CSS statements look like this:

selector { 
    style property: style value
}

Alright Let me explain. A selector is what part of your HTML you want to style? Which elements. You have the select them first.

And we’ll talk about selectors a lot in the next video. There are all kinds. So for now let’s say a p selector. This will style all your paragraphs with the following styles.

Style property is things like Color, Font-size, Background, Border, that kinda thing. So let’s say color which will change the color of the text.

The : is almost like the = sign.

Style value, for example, red.

This is it. You just turned all your paragraphs -> red. So let’s recap:

Select all my <p> tags, change their color, to red. That’s it. You can replace any of these three to whatever you want (As long as it makes sense, you can’t say color should be small, or font-size, blue. It has to make sense).

So for example: you can instead target all <h1> tags. Or instead of color you can change the background-color, and instead of red, change it to green. So then it becomes a game of how these 3 things play together and choosing the right combinations.

Using <link> tag (much better)

Writing styles in a <style> tag is alright I guess... but there’s an even better way.

Which is to create a separate CSS file dedicated to your styles, and load it into your HTML using a <link> tag. This isn’t a link that the user can click on or anything like that, so don’t be tricked by the name. It just means we are linking the HTML to the CSS file. So let’s create a CSS file and move our styles there.

// index.html
<link href="some.css">

// some.css
all {
    your: styles;
}

This is the way we’re gonna do it from now on, because it separates the template (the HTML), from the styles (the CSS). This way things are clean and clear, and you know exactly where to look to find things. And you’ll have 2 small files instead 1 big one, which is hard to navigate, as your site grows.

So next we’re gonna look at Selectors and what different types there are.