CSS Tutorial — 3 ways to write CSS in an HTML page (2/13)

CSS Tutorial — 3 ways to write CSS in an HTML page (2/13)

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 say on an H1 (so right click, inspect element) and go down to the styles tab. Here they are. 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.

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. I take this header tag and I’ll add a style attribute, then I’ll say color is blue. Done. You can see it change but this is bad. Don’t do this.

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….

Sina, what…. the fuck…. Are you talking about?

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’s 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. COLON. This 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 H1s. 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.

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.

DEMO 1 -

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.

You can also mess around in Chrome Dev tools and manipulate your styles at run-time. Here’s what I mean by that...

DEMO 2 -

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

Видео CSS Tutorial — 3 ways to write CSS in an HTML page (2/13) канала ColorCode