So, there are number of things on this page that still are not formatted quite the way we want them. And if we attach that external style sheet that we already created, it should take care of that for us. Now, if you got a collection of styles like this and you want to save them to their own external style sheet, you can right click here and export and now, what you are doing is creating a new CSS file and you can name it anything you want as long you do not use spaces or special characters. So, let us call this my new styles and you can save that anywhere you want in your site.
I created a CSS folder so that I would have a place to keep all of my styles in one place. So, it is just an organizational preference but I do appreciate keeping like items in the same location. If I save this now, you will see in the CSS folder down here, I now have a new set of styles called my new styles and I can apply all of these styles to any other page of my site.
Similarly, I already have a style sheet that I created for this lesson. I am going to attached that to this page. So, if I right click, I can attach a style or if I use this little icon down here, I can attach a style. When you attach a style, you kind to do the opposite of what you just did in exporting a style. So, just browse to find the style that you want, I am going to use my completed styles option, click okay. Again, my little cooking show because you know the cake is ready to come out of the oven now.
If I check link, I am going to link to that style sheet. You have the option to import it but the best supported option on the web today is the link option. Dreamweaver makes that the default and I concur. So, let us click okay and notice that now, out completed style CSS list drops into the CSS menu. All of the styles that I have already created are now available to this page. All of the styles that you can apply will be in the style area of the CSS panel or they will directly affect any HTML tags that I have restyled. So notice that my H1 tags automatically changed to the formatting we applied earlier for H1 tags.
Similarly, if you come down to the bottom of the page, my link tags now are formatted according to the link options I set. Notice however that these headings did not change. And that is because these are class styles. So, for the formatting to apply to these options, I need to select the headline, come down to styles and remember we called the sidebar head, my upper case letters, my bold, everything applied automatically. Scroll back down, we need to format this one. You do not actually have to highlight this. Remember, if you just click anywhere in here, you are selecting this text and you just want to make sure the P tag is showing up here and if you want to really make sure you are selecting the right thing, click that P tag and you will know that you are applying the style to exactly what you want to apply it to.
By the way, if you ever lose the P tag on an option like this, this is the paragraph tag but it is a lot more than just paragraph spacing. It is a container that CSS is applying that style to. We will talk a lot more about containers in the advance lesson. But if you are ever trying to apply a style to something like a headline and it is not working quite the way you expect, it maybe because one of the headlines had a P tag around it and one of them did not. You can add a P tag by right clicking paragraph format and choosing paragraph. If it is already there, you can just apply the style like sidebar head and it will look exactly the same as long as you are applying it to a P tag each time. So you see P sidebar head tells me that if applied that to a selection of text that already had a P tag around it.
Transcription by:
Scribe4you Transcription Services