How to Create a Style Sheet for a Web Page With Dreamweaver

Video Transcript

"Hi, my name's Dave Casuto and I'm from San Francisco Computer Tutors so welcome to this tutorial. In this tutorial we're going to show you how to create cascading style sheets or CSS, give you a basic intro into CSS in the various elements and the benefits of CSS. So I have this document open here. This is a document we're working on for Story Street and I want to change some of the elements on this page. Alright now, the benefit of creating a style sheet is that once I have, once I change the elements of the style sheet, it changes all the elements that are linked to this style sheet within that particular parameter. So let me just give you an example rather than talk about it. So let's just come in to our page properties to see here that's under our properties panel. If your properties panel's not open right now, click on windows and then choose properties. And then we want to go to our page properties. And this is basically the beginning of where you go to for your first style sheet, o.k. So, looking up here on the left hand side you see category and you see appearance, links, headings, title and tracing image. So basically what we're telling our page right now is, hey, what are going to be the properties for every page that we create from now on. O.k., so that's going to be basically you know, the style of the page. So we see that every time we create a page now it's going to have this particular font. So the default font is set to be Times New Roman. So I want it to be, let's say Verdana. O.k., I'm going to click on that. And let's say all of the ones I want, I want it to have a certain size. O.k., every time we start the page it's going to be a certain size, so let's say it's going to be ten. My text color, from over here, and I can actually, see it turns into an eyedropper and I could basically get my text color to be the same color as the Story Street logo. O.k., or I can choose from any of these. So, I'm going to maybe match the Story Street logo somewhat and I'm going to get maybe this kind of like dark maroon color. Alright, and the background color I'm going to keep the same. I'm going to keep this white color. O.k., but I could choose a different color if I wanted to. Alright, I'm going to get rid of that. And then I've already got a background image in there. O.k., and that's where you see this bamboo down below and that's something I just brought in by clicking browse and I brought that in there. And it also shows no repeat. O.k., then I can also choose what my margins are going to be. So, let's say I want my left margin to be a little bit off of where the left side is. So let's maybe choose twelve. And then form the top let's choose twelve again. And then my right margin, let's just do twelve all around except for the bottom part, alright. But I'm not done yet because we also have other different parts of our style sheet and let's go down to links. Basically it's o.k., it's asking us, now what type of font do we want to have for our links. So, you'll see here that we actually have some links that are already on here like our home, about us services and contacts. Maybe we want that to look a little different. So, let's go a head and change that to let's see, let's just try maybe Courier. Alright, just so you can see the difference there, how that's going to look. Alright, and then for the size, let's keep that at ten. Now we also have our link color, our visited links, our rollover links and our active links. Alright, so when something is actually a link, what color should it be showing before someone actually clicks on it? So, let's actually make that also this dark color there so we can make that stand out a little bit. O.k., the visited link is basically if someone's clicked on it, o.k., what color is it going to look like, what color is it going to appear to be, so the user knows that they've already clicked on it. So, let's maybe make that kind of a, let's do like a dark green there. And then my head tags are o.k. And I'm going to click apply and now maybe that's a little bit more manageable for me. O.k., so you see how I did that? I didn't have to go in to each and every individual one. All my links have a certain style to them now and then all my normal text has a certain style to it now, and the my head tags have a certain style to it now as well. So let's go ahead and preview that in the browser, go ahead and save it and now, see these are all actually visited links from the past so now they actually have a different color to them. But you can't tell that they're links if they're not underlined. But in this case they are because I made it, I set it up so they're never underlined. O.k. when we move the mouse over, we still get the rollover effect. Now I click on it, see that? I get that light, light maroon color. O.k., well I hope you enjoyed that basic intro in to CSS or cascading style sheets, hopefully not as difficult as you might have imagined but definitely hope you can see the benefit. Once again, my name is David Casuto from San Francisco Computer Tutors and you can look me up on yelp.com under San Francisco Computer Tutors and hope to hear from your soon. Thanks."