In this lesson, you will learn about using HTML and CSS together in Adobe Dreamweaver. The first thing we're going to do so that we utilize all of the wonderful features of Dreamweaver is go up to the site menu and create a new site. We're going to click on the folder icon to browse for a folder. I'm going to have you navigate out to wherever it is you have saved the module 1 lesson folder from the lesson files folder. We're going to select that module 1 folder. We're going to name this module 1 and we're going to click on the Save button. We're going to go over and double click on the index underscore no CSS. And when we look at this, if we are in design view, we can see that there really isn't much of a design to this document. We do have some images and we do have a lot of text, but there's no real style to this page. Now over in our files panel, if we look in the CSS folder, we can see that there is a style a CSS page in there, cascading style sheets called multi column template. And what we're going to do is attach that CSS page as an external style sheet to this Dreamweaver HTML file so that we can see how HTML is providing the structure here. But CSS is providing the style. Before we actually apply that CSS style, I do want to take a look at some of the information that's on this page. Right at the top are hiking monthly. If we go down here to our properties panel, it says that this has a format of paragraph. Now if you don't see your properties panel, you can always go to the window menu and choose properties. But what I want to do here is this is important information. So I'm going to change that to a heading 1. And then we have a main content area. Now we're going to change that to a heading 2 and a featured hike to a heading 2. And we can see down here at the bottom, we have our hiking, our apps, our gear, and our apparel. They all have the heading 4 style applied to them. So we're going to leave those as they are. We're going to go over to code view and we're going to scroll all the way up to the top. Because right at the top of our page, we can see on line number 7 that we have a title for our HTML file. But nowhere in that head region is a link to our external cascading style sheet. So that's what we're going to create now. So we're going to hit the enter key a couple times. And we're going to use a link tag. Now when we work in Dreamweaver, a couple of the really cool things is that Dreamweaver when working with code is that Dreamweaver is going to show us what that tag is supposed to be. So we're going to do a link and the type of link this is going to be is a text slash CSS. And you can see Dreamweaver is helping us with all of this. And then we need to do an href, the reference for this file. And we're just going to go into the CSS folder. And we're going to choose that multi column template dash CSS. And now the last attribute we're going to put here is the relationship. We need to tell this what relationship this file has to our document. So it's going to be the relationship is style sheet. And we're just going to put a space and a slash and a close that carrot. So we have our link to that CSS. If we go down here to our properties and click on this refresh button, it will update our design view. So if we now go over to design, we can see that our file has changed greatly. So we have our navigation up at the top and it looks really nice. And we have our featured hike and our hiking monthly is nice and large up at the top. And if we go to our live view, we can see that when we roll over these links up at the top that we get a different color so that we can see that roll over. So using cascading style sheet really allow us to take our designs to the next level. Now the other thing that's really cool about working with HTML and CSS together is the fact that with that external style sheet, if we make a change to that style sheet, we can globally make changes within our document. So if we go over here to our files and we double click on the featured hike, we can see that there is text just like we have in our index now. And it's kind of a lighter gray and we want to make it just a little bit darker so that it's easier to see. So if we go back to our design view and we click down here in the properties panel and we click on the CSS. So we can see here we have our targeted rule and so it's saying that this is going to the rule container dot left underscore article dot P is defined. If we go over here and we change this, we're just going to make this a little bit darker and we click off. We can see how that change was made right on this page here, but also if we go over to our featured hike, that change was made there. And if we were to open up any of the other files over in our files panel that has this paragraph in the left article, those would be updated as well. So the beautiful thing about working with HTML and CSS together is that number one, we can make really great design layout with the CSS attached to the HTML. But also if we use external styles, we can make global changes in our document very easily. So in this lesson, you learned about using HTML and CSS files together in Adobe Dreamweaver.
