So rather than have my style stored inside the same page internal style sheets, I now have them moved to this external style sheet and because they are in the external style sheet, I can save them now, come back over to my dear.HTM page and when I attached this style sheet to this page, those styles will be made available to me here as well as there. So let us try it. Let us attach a style sheet, browse, find our new internal page style because we are going to apply this to all our internal pages. Open, OK, and now you see again, it has been added to the bottom of my managed styles dialog. So I have got an image left and an image right. Would not it be handy to have both of those in the same external file, so I could use them on all of my pages? Well, that is an easy fix, click, drag, boom, now I have got both of those in this external style sheet. While I am at it, let me move those links styles.
I am going to leave that word style behind for now, because it is a little bit of it normally when you copy text from word. We will get in to how to get around with that in the future lesson. So now let me go back to my internal pages style sheet. Look at that all my styles are here and if I do not like the order maybe I want my image style side by side, I can just click and drag them here and then they moved in the code. Let me save my changes and apply those styles to the other page. So now, returning to my dear HTM page, now where was I? Oh yes, I wanted to align this image to the right instead of the left and rather than create a new image right style, I went and got it out of the other page by creating that external style sheet. So now, I can use that image right style. I just select my image, choose apply styles, and click image right.
Now, if it does not quite do what you want with the text. Just try dragging a little bit, sometimes there is a little refresh problem, it really should wrap around just like that. So let me save that and let me go back and look at my seals page. Now the only thing I am really missing on that page is a headline styled with the H1 tag just like this. So let me save my seals page just to keep everything clean, come back to dear and insert my cursor. Now, you can copy and paste texts as we have but of course, you can just type it in directly any time.
Now, when I moved that down, my image stayed up here. Not quite what I intended. So let us click and drag and make sure that image stays with the paragraph we wanted aligned to. All we need to do now is to format this headline with an H1 tag. Now, you maybe wondering why the H1 tag is not listed in the apply styles dialog. If we switchover to managed styles, it is right here in our external style sheet, H1, font family Arial, font size 16, but you are not going to find it and apply styles because it is not a class style, it is a redefined HTML tag and we already have all those HTML tags available to us in the interface. All I have to do is select that headline, come up to where my H1 tags are and apply the H1 tag and you will see because that style sheet is already attached to this page, the styling of the redefined H1 tag is what is applied to my headline.
Now, I am going to add a subhead underneath this and format it with the H2 tag, so I can show you how easy it is to redefine an HTML tag with CSS. I have already copied this text, so I am just going to paste it into place. So this is my subhead and I want to format it with an H2. But when I choose H2, watch what happens, subheads are usually smaller than the heads, it is not bigger. That is because I have redefined the H1 tag to be a smaller size than its default display. So now let us create anew style to redefine the H2 tag. New style and at the top of the new style dialog, if you have never pulled down this little arrow, notice now that you get this list of HTML tags and all you have to do is select one like the H 2tag to redefine it.
First, I will make it Arial, then I will make it very small but I will use a number, not a specified size. And I will make it Italic, so it stands out even more from the headline, OK. Notice that that formatting change immediately applies because the style is already applied to the subhead and notice that the H2 tag automatically got created in my current page, that is not where I wanted it, I wanted it in my external style sheet. Again, easy to fix, let us go to manage styles, click, drag over, and it will drop into place. And if you want to group your styles together you can just click and drag.
In the next lesson, I will show you how to create those styles in the external style sheet to begin with, so you do not have to drag them in place afterwards. I will also show you how to create contextual styles, so that you can define H1 and H2 tags that displayed differently depending on what part of the page there in and I will even show you how to adjust the spacing between elements and between lines of text, so you can get the control, I know you want over every element on your page right down to the pixel.
