Now, I effectively created an image left in the line that the way I want it, but as I looked at this now with the designer’s eye, I think it would actually look better if this image were aligned right and the text wrapped around to the left. So I have a couple of options here, I could create an image right-style within this page and apply it to this image or I could remember that I already created an image right-style on another page in this site and maybe it is time to start thinking about external style sheets.
When you are working with CSS, you have two main options for how you work with styles. Internal styles, meaning they are created within the HTML of the document where they are applied, and external styles, which can be saved in a separate document and applied to multiple pages. If you are still scratching your head a little bit about what external style sheets really are, I think this next segment will help bring it all home for you. So I am going to save this page before I go too much further, just using CTRL S and I am going to go over and open another page I have already created.
So this is my dear.HTML page with my image left. Now, I am going to open my seals page because on this page I have already created an image right. I have also created a style from my headline by redefining the H1 tag that is another kind of style you can create that we will see on the next lesson. So external style sheets, well, let me capture the styles I have created on this page and the styles I have created on the other page and because I am creating a third document that will hold all of these styles, I will be able to apply the same styles to both pages without having to repeat them. Here is how you create an external style sheet. If you have already started to add cells to two different pages and want to bring them together in one place.
First, I am going t create a new CSS document, file, new, CSS, this is a blank.CSS page and I am going to save it into my main website folder, we will just click on current site to get up to the top level and I have already created a CSS folder here where I can store my styles. So I am going to give this one a new name. I am creating a new style sheet for this site and this style sheet is the one that I will use on the internal pages of my web site. Many designers will create different styles for different sections at their site. So they can make global changes across all of the internal pages or across all of the top level pages because the same style sheet is applied to all of the pages at that sublevel of the site. Now, that I have this document, I can attach it to my seals page, so I am going to attach that blank style sheet in my CSS folder internal styles, OK, and it is now going to appear in my manage styles folder. So watch this, it is a pretty cool trick in Expression Web because it is really easy to start creating a site, have some styles inside the page and then want to move them to your external style sheet. And all you have to do in Expression Web is attach that style sheet, whether it is blank or it already has other styles, it does not matter. But if you want to move the styles from the current page to the external style sheet, all you have to do is click and drag that style on to the external style sheet and boom, it moves from the page to the external style sheet.
Let me show you what is happening on the code to help you better see what is going on. So now, in this external style sheet, from my internal pages, I have an image right style saved in the external style sheet and if I come back to my seals page and I use split view, I can come up to the top where my styles are and notice there is no image right style here and if I now move to H1 style and move it into the external style sheet, it will also disappear from the top of this page.
Transcription by:
Scribe4you Transcription Services