Subtitles of the Movie

In this movie, let's continue talking about making CSS, Cascading Style Sheets. Now, what we've done is created a couple of styles here and worked with them. Let's look at some more options. Let's talk about the Body Text. Right there is a Body Text element and we can go over here, we can right click on it and we can modify that style. We could switch it to a completely different color if we want to. We can change the font style. Let's click OK and then we've got a little bit different body text. So we have a lot of options. Now, what I'm going to do is go down here to a regular paragraph style. I'm going to type in some text. It gives me basic body text and then I'll put a Bold on it. See that Bold right here? And there's the ending Bold. Those are simply inline. They're right there next to the text. Now, if I apply some more to it, notice now because I've applied more, now it's become a style. And if we scroll down a little bit, you'll notice we've got our style right here. Remember, the dot styles are class-based. It's in this page and Expression Web made it for me as an Embedded Style. So that way it's got it in the heading tags so it'll be there for me to reuse if I want to within this page. Now, my other option that we haven't looked at, we can right click these styles. We've looked at deleting, we've looked at modifying, but we can copy that style. So if you have a style created and you just want it to be a little bit different, like I could visited links. I want the same look but maybe I want it to just be a different color. Click OK. So then when somebody has visited this link, it'll flip to the other color. Now, if we want to attach a style sheet, don't forget that you can do it there. If you want to make a brand-new style, you can just click right there. We don't have to use anything over here, remember, if we don't want to use anything over here. Remember, if we don't want to, we can just hit the Down Arrow and select what type of style we want to create. Now, just as a quick review, remember all the class-based styles, they have the dot in front of them. You'd use that for something like if you put a logo on a page and you want to place it somewhere specific, you'd make sure that you have that logo because it is an image. You may have an image container, but you want the logo to be a little bit differently placed. Your ID-based styles have the pound sign on it. Notice this one's got the page content all in one container. And then of course you'll have basic tag styles like the H1 tag style. And one other thing I wanted to talk to you about with CSS is positioning. Now, CSS can position content. You can change the way text looks and have its location or position changed on a page by using CSS. HTML has no concept of placement, so people use a lot of tables and things like that, but CSS is a different way to make that happen. What you can use is Absolute Positioning. This is based on your X and Y coordinates. The upper-left pixel up here is 00. We saw that on our rulers. Now, as you increase things horizontally, the X coordinates increase. Y coordinates, as you move vertically down the page, those are going to increase. Absolute Positioning simply allows us to place items based upon the pixel as a measurement tool. So no matter what screen somebody has, not matter what its size, what its resolution, the item is always going to be in the same pixel spot. If I put an item 15 pixels from the left edge, say I put a logo up there at the left 15 pixels from the left, it's always going to be that same spot on every person's monitor, whether they got a 15-inch, a 17-inch, whatever resolution they've got, we're going to have that same look. So let's try this. Let's have a blank document here and let's insert an image. OK. We've go that right here. Now we'll select the image and we're going to hit the little Quick Tag Editor up here at the top and go to Positioning and we're going to use the Absolute Positioning. There's a few other options there, but I want to show you this one for sure. Absolute Positioning and we've got it where we want it here and let's preview it. So we've got it absolutely positioned right there. Now what we can do, I wanted to show you, is look at the HTML code. You'll see how we have a Z Index, we've got from the left, ten, from the top, 15. So let's do from the left, let's move it 20 and from the top let's move it 20. I'm going to save that and I'm going to preview it and you'll notice, see how it's moved? So you can absolutely position that very simply and easily to make it be in the same spot every time on any monitor, any resolution. Now, take a minute, insert an image or play with your styles, but definitely insert an image and use this Quick Tag Selector to try some of the positioning elements. Absolute Positioning is a place to start and then you can work with Static Position, Fixed and Relative.