Subtitles of the Movie

Let's continue learning about CSS. Right here is your margin information; your top and bottom, right and left margins. You can see how many pixels those are. Here is a color. If you don't know what that color is, I simply highlight it and I'll copy it and I'll go into one of my graphics programs. I'll just go up here and paste it and that's the color right there. That's the easiest way. Then you don't have to memorize those codes. Here it is if a link is visited. Does it have any text decoration? There's none there. That would mean you could have something like you could make it blink. That would be a text decoration. If you hover over a link, it means underline it. Let's go take a look at that. If I hover over this link, see how it shows? That's underlined. Scroll down here and it keeps showing you some different information. Here's the page background. It's padding. It's margin on the bottom See how they wrote out the specific margin right here? If it says top, bottom, left or right they're only referring to that. They could also on margins just list two different pixels. It could say margin 25 pixels, 75 pixels. Basically that first 25 pixels means they're talking about the top and the bottom and the 75 pixels are talking about the right and the left. So there are shortcuts for those types of things. Now, anytime you see this pound sign, they're talking about an ID. So the division for the wrapper, anytime you see that pound sign, that's an ID and let me show you what I mean by that. If I go to the administrative side, I opened up the HTML for our template. See how right here it says Div ID wrapper and then it goes on to some other IDs. What that says is refer to the wrapper information on our CSS information. So you see the pound sign, they're just referring to that in the HTML and what it needs to look at. Here's our ID for header left, position relative, header right, all the padding that's going to go with it. Here's an easy one to learn and understand. Logo; its position; left at zero, top at zero, it's going to float left, its width is 298 and its height is 75. This is where if you want to recreate a logo, find out what the width and the height of the current one is. If you make it the same width and height, it makes it really easy to upload and change it. Here is the URL of that. We can look up joomla logo.png in our images folder. Here it's saying don't repeat that, don't put the log one after the other across the page and our left margin it's referring to and top margin. Here's the news flash area, what its specifics are; the tab area. I'm going to keep going down here to some basic ones that you can definitely look at. Here's your footers. You know what a footer is; bottom of the page and there's its color. Let me keep going here. The search area; that's an easy one. We all know what the search box looks like. Here's how wide it is so if for some reason you didn't feel like it was wide enough on your page to really make it stand out, you could change that. It's negative 20 pixels from top, 30 pixels right. Its height is 40 pixels. Maybe you need to make it higher so people can also see that box better to actually use it. That's another option. You could go in here and change that. Let's keep going down. There's a lot of boxes in here. Again, anytime you see that information it's referring to where that graphic is located so you can find that graphic. If you don't like a certain graphic, you find it and then you edit it. We'll do that here later on in our course. Again, a comment; the pill menu. What that's referring to is simply this little pill menu up at the top. It's telling me it's an auto left margin, auto right, no padding. Here is the graphic that it's referring to: menu cap 1.png. I can go to my milkyway folder. I can open up the Images folder and I can find all of our images right there and look for whatever I need. OK? So those were where all your images are. We're in the blue one so you definitely want to make sure that you know how to look through all of those. So I just want to make sure you know we're talking about those images folder. That's where it's at. So take a minute, go down through the rest of your CSS. It's very easy typically to read. Make sure you can understand the comments, make sure you can understand the areas like here's heading1. Read through all that information. It's very simple to read through. Just go through it and then as we work through our course here we're going to start editing.