Inline and Internal Styles

There are different ways we can add CSS to a page, and 0:00 each way has its advantages, or it might have its disadvantages. 0:03 So let's review three methods we can use to apply CSS to our pages. 0:07 To get started, simply launch a new workspace and follow along. 0:13 You can also download the project files for 0:16 each lesson in the downloads section of each page. 0:18 When we lauch our first work space we'll see the files we need to 0:22 get started over here in the left side bar. 0:25 But before we start, let's go ahead and close this Console panel at the bottom of 0:28 the page since we're not going to use it in this course. 0:33 Over in our project files, 0:37 we have an index.html file containing parts of our Lake Tahoe page. 0:38 For now, we're only working with the header of the page, and 0:43 an introductory paragraph about Lake Tahoe. 0:47 We should also see a folder named CSS which we'll use in a later lesson. 0:51 So if we click the Preview button over here in the top right corner, 0:56 that brings up the workspace preview in the browser. 1:01 So in the browser preview, we see that our page is currently un-styled. 1:04 But keep in mind that even if we haven't written a single line of CSS for 1:09 the page, browsers use what's called a user agent style sheet, 1:13 that gives certain elements some default styling. 1:17 That way users can still have a somewhat presentable and 1:20 readable experience by default. 1:23 So that's why we're initially seeing some white space around the page, 1:26 below the headings, paragraphs and between lines of text. 1:30 These are the default styles applied by the Chrome browser. 1:35 But even if we look at this unstyled page in Firefox, Safari or 1:38 Internet Explorer, it should still look just like this. 1:42 So, what we'll do first is right a few simple styles for 1:46 this page, so, we can get a better idea of how CSS affects a page. 1:49 So, the styles we designers and developers create are called author styles. 1:55 And there are three methods for adding author styles to a page. 2:00 We can do it with inline styles, internal styles, and with an external style sheet. 2:04 So, let's go over these methods. 2:09 First up, when we write inline styles, we write the css in 2:12 the html file directly inside an elements tag using a style attribute. 2:16 So in our index.html file let's give the body element 2:22 a style attribute, then inside the quotation marks we're going to write, 2:29 background-color followed by a colon and 2:34 a space, then the word orange and a semicolon. 2:40 So now when we save our HTML file by going over to File>Save, 2:46 when we bring up the browser preview and refresh the page, 2:52 we can see how this makes the background color of our page the color orange. 2:56 And if we go back to our HTML file and give the h1 element a style attribute. 3:00 So we're going to go in the opening h1 tag and add a style attribute, and 3:07 inside the quotation marks, we're going to write color followed by a colon and 3:13 a space then, the word white, and a semi colon. 3:18 When we save our index.html file, and refresh the browser preview, 3:23 we see how the main heading text changes to the color white. 3:29 So, we can style any element with any css property, using this in-line style method. 3:34 We could style the entire page with this method if we wanted to, but 3:39 I don't recommend that you do that. 3:43 In fact, inline styles are not considered a good practice for 3:45 developing websites, and they should be used sparingly if at all. 3:49 Because if we need to make any styling changes, 3:53 it means we need to go inside our html to make those changes. 3:56 So we're not really separating content from presentation. 4:01 And the CSS gets scattered throughout the file, 4:05 making maintenance difficult and impractical. 4:07 Inline styles are also at the lowest level possible of 4:11 what's referred to as the CSS cascade. 4:14 They're very powerful and specific. 4:17 That means they will override other styles applied to an element. 4:20 So for example if we declare a new background color style for 4:24 the body or a color style for the h1 element and 4:28 an internal or external style sheet, we wont be able to see those changes because 4:33 these inline styles will always override them and we'll see that in just a bit. 4:38 But inline styles may come in handy when creating quick HTML and CSS mockups. 4:44 Or, if we're in a pinch, we can use the inline style method for 4:49 debugging purposes or writing temporary fixes. 4:53 So the second way we can add CSS to a page is with internal styles. 4:56 Internal styles are usually embedded in the head section of the HTML document. 5:02 And they are defined using the style tag. 5:08 So inside of our head element. 5:11 Let's go ahead and add a style tag right beneath the title tag. 5:14 And this time we're going to style the paragraph. 5:18 In our page, by writing P, followed by a set of curly braces. 5:23 Then I'll place my cursor inside the curly braces and 5:29 hit enter twice to create some white space. 5:33 Then between the curly braces, I'm going to hit the Tab key, then write font-size 5:36 followed by a colon and a space, then I'm going to write 20 px and a semicolon. 5:45 Px stands for pixels, and we're gonna get to that later in this course. 5:51 So now I'm going to hit Return or 5:55 Enter, and right below what we just wrote, I'm going to write font-weight. 5:57 Followed by a colon and a space, then the word bold, and a semicolon. 6:04 Now don't worry about these properties, values, and 6:10 the syntax just yet, we'll cover a lot of that throughout this course. 6:13 For now, just know that the styles inside these curly 6:17 braces will increase the paragraph's text size and make it bold. 6:21 So let's take a look at it in the browser. 6:26 I'm going to go up here and hit File > Save, 6:28 then in the browser preview I'm going to refresh the page, and 6:32 notice how the text in our paragraph is now larger and bold. 6:36 And now we can also do the same for our headings. 6:43 So back in our html file, underneath the last curly brace here 6:45 we're going to style the h1 element in our page by writing h1 6:51 followed by a space and a set of curly braces then inside the curly 6:56 braces we're going to write font-size followed by colon, 7:01 a space, then were going to write 90px and a semicolon. 7:07 So now when we save our index.html file and refresh the browser 7:12 preview we can see that we have a pretty large heading on the page. 7:17 So what if we want to change the text color of our heading? 7:22 Well let's go back to our h1 styles here the ones we just wrote. 7:26 And we're going to add a color property. 7:32 So right after the semicolon I'll hit Enter, and 7:33 I will write color followed by colon and a space. 7:37 And instead of the color white, we want our h1 7:41 to be the color firebrick red because that's a pretty awesome sounding color. 7:44 So let's write, firebrick followed by a semi-colon. 7:49 So if we save our indexed.html file, go back to the browser preview, 7:54 and refresh the page, nothing happens. 7:59 Our h1 is still white. 8:02 So what's the problem here? 8:04 Well, as we learned earlier, in line styles are really powerful and 8:07 specific, so what's happening is the inline style and 8:12 the h1 tag here is overriding the firebrick color that we just wrote. 8:17 So now if we go back to our h1 tag and remove the in line style, so 8:23 I'm going to select the entire style attribute and hit Delete. 8:28 When we save our index file than go back to the browser preview and hit Refresh. 8:33 We're now able to see the color of the h1 change to Fire Brick Red. 8:39 So, the last thing we'll do is make the body color of 8:44 the page white instead of orange. 8:47 But, we still wanna keep the orange background color in the header of 8:49 the page. 8:53 So first, let's go back to out HTML file, and 8:54 we're going to delete the in line style in the body tag. 8:57 So I'm going to select this style attribute, hit Delete, and 9:01 then we're going to go back to our style block and we're going to style the header 9:06 by writing header followed by a space and a set of curly braces. 9:12 Then inside a curly braces we're going to write background-color. 9:19 Then a colon and a space, followed by the word orange, and a semi colon. 9:26 So now when we save our index file, and refresh the browser preview, 9:33 we can see that the body background is back to the default color of white, 9:37 while the header maintains that orange background color. 9:42 So the internal style sheet method we just used is useful if we're 9:47 creating a small-scale site, maybe a coming soon holding page, or for 9:51 temporary use while testing a new feature on our site. 9:56 But again, it's not a best practice for developing websites. 10:00 The downside to using this internal style sheet method on larger projects is that 10:05 because the styles are written inside the HTML file, and 10:10 there could be tens or hundreds of HTML files depending on the project, 10:15 the browser has to download the styles each time a new page is loaded. 10:19 And it also means that we're duplicating a lot of the same styles across 10:24 multiple pages, which defeats the real purpose and convenience behind using CSS. 10:28