There are different ways we can add CSS to a page, and

each way has its advantages, or it might have its disadvantages.

So let's review three methods we can use to apply CSS to our pages.

To get started, simply launch a new workspace and follow along.

You can also download the project files for

each lesson in the downloads section of each page.

When we lauch our first work space we'll see the files we need to

get started over here in the left side bar.

But before we start, let's go ahead and close this Console panel at the bottom of

the page since we're not going to use it in this course.

Over in our project files,

we have an index.html file containing parts of our Lake Tahoe page.

For now, we're only working with the header of the page, and

an introductory paragraph about Lake Tahoe.

We should also see a folder named CSS which we'll use in a later lesson.

So if we click the Preview button over here in the top right corner,

that brings up the workspace preview in the browser.

So in the browser preview, we see that our page is currently un-styled.

But keep in mind that even if we haven't written a single line of CSS for

the page, browsers use what's called a user agent style sheet,

that gives certain elements some default styling.

That way users can still have a somewhat presentable and

readable experience by default.

So that's why we're initially seeing some white space around the page,

below the headings, paragraphs and between lines of text.

These are the default styles applied by the Chrome browser.

But even if we look at this unstyled page in Firefox, Safari or

Internet Explorer, it should still look just like this.

So, what we'll do first is right a few simple styles for

this page, so, we can get a better idea of how CSS affects a page.

So, the styles we designers and developers create are called author styles.

And there are three methods for adding author styles to a page.

We can do it with inline styles, internal styles, and with an external style sheet.

So, let's go over these methods.

First up, when we write inline styles, we write the css in

the html file directly inside an elements tag using a style attribute.

So in our index.html file let's give the body element

a style attribute, then inside the quotation marks we're going to write,

background-color followed by a colon and

a space, then the word orange and a semicolon.

So now when we save our HTML file by going over to File>Save,

when we bring up the browser preview and refresh the page,

we can see how this makes the background color of our page the color orange.

And if we go back to our HTML file and give the h1 element a style attribute.

So we're going to go in the opening h1 tag and add a style attribute, and

inside the quotation marks, we're going to write color followed by a colon and

a space then, the word white, and a semi colon.

When we save our index.html file, and refresh the browser preview,

we see how the main heading text changes to the color white.

So, we can style any element with any css property, using this in-line style method.

We could style the entire page with this method if we wanted to, but

I don't recommend that you do that.

In fact, inline styles are not considered a good practice for

developing websites, and they should be used sparingly if at all.

Because if we need to make any styling changes,

it means we need to go inside our html to make those changes.

So we're not really separating content from presentation.

And the CSS gets scattered throughout the file,

making maintenance difficult and impractical.

Inline styles are also at the lowest level possible of

what's referred to as the CSS cascade.

They're very powerful and specific.

That means they will override other styles applied to an element.

So for example if we declare a new background color style for

the body or a color style for the h1 element and

an internal or external style sheet, we wont be able to see those changes because

these inline styles will always override them and we'll see that in just a bit.

But inline styles may come in handy when creating quick HTML and CSS mockups.

Or, if we're in a pinch, we can use the inline style method for

debugging purposes or writing temporary fixes.

So the second way we can add CSS to a page is with internal styles.

Internal styles are usually embedded in the head section of the HTML document.

And they are defined using the style tag.

So inside of our head element.

Let's go ahead and add a style tag right beneath the title tag.

And this time we're going to style the paragraph.

In our page, by writing P, followed by a set of curly braces.

Then I'll place my cursor inside the curly braces and

hit enter twice to create some white space.

Then between the curly braces, I'm going to hit the Tab key, then write font-size

followed by a colon and a space, then I'm going to write 20 px and a semicolon.

Px stands for pixels, and we're gonna get to that later in this course.

So now I'm going to hit Return or

Enter, and right below what we just wrote, I'm going to write font-weight.

Followed by a colon and a space, then the word bold, and a semicolon.

Now don't worry about these properties, values, and

the syntax just yet, we'll cover a lot of that throughout this course.

For now, just know that the styles inside these curly

braces will increase the paragraph's text size and make it bold.

So let's take a look at it in the browser.

I'm going to go up here and hit File > Save,

then in the browser preview I'm going to refresh the page, and

notice how the text in our paragraph is now larger and bold.

And now we can also do the same for our headings.

So back in our html file, underneath the last curly brace here

we're going to style the h1 element in our page by writing h1

followed by a space and a set of curly braces then inside the curly

braces we're going to write font-size followed by colon,

a space, then were going to write 90px and a semicolon.

So now when we save our index.html file and refresh the browser

preview we can see that we have a pretty large heading on the page.

So what if we want to change the text color of our heading?

Well let's go back to our h1 styles here the ones we just wrote.

And we're going to add a color property.

So right after the semicolon I'll hit Enter, and

I will write color followed by colon and a space.

And instead of the color white, we want our h1

to be the color firebrick red because that's a pretty awesome sounding color.

So let's write, firebrick followed by a semi-colon.

So if we save our indexed.html file, go back to the browser preview,

and refresh the page, nothing happens.

Our h1 is still white.

So what's the problem here?

Well, as we learned earlier, in line styles are really powerful and

specific, so what's happening is the inline style and

the h1 tag here is overriding the firebrick color that we just wrote.

So now if we go back to our h1 tag and remove the in line style, so

I'm going to select the entire style attribute and hit Delete.

When we save our index file than go back to the browser preview and hit Refresh.

We're now able to see the color of the h1 change to Fire Brick Red.

So, the last thing we'll do is make the body color of

the page white instead of orange.

But, we still wanna keep the orange background color in the header of

the page.

So first, let's go back to out HTML file, and

we're going to delete the in line style in the body tag.

So I'm going to select this style attribute, hit Delete, and

then we're going to go back to our style block and we're going to style the header

by writing header followed by a space and a set of curly braces.

Then inside a curly braces we're going to write background-color.

Then a colon and a space, followed by the word orange, and a semi colon.

So now when we save our index file, and refresh the browser preview,

we can see that the body background is back to the default color of white,

while the header maintains that orange background color.

So the internal style sheet method we just used is useful if we're

creating a small-scale site, maybe a coming soon holding page, or for

temporary use while testing a new feature on our site.

But again, it's not a best practice for developing websites.

The downside to using this internal style sheet method on larger projects is that

because the styles are written inside the HTML file, and

there could be tens or hundreds of HTML files depending on the project,

the browser has to download the styles each time a new page is loaded.

And it also means that we're duplicating a lot of the same styles across

multiple pages, which defeats the real purpose and convenience behind using CSS.