Lessons

Lesson Info

Styling the Header and Define Sections

Okay, so we've been looking at this giant graphic here for a while, and looking at the h one and our subheading and our list right here. So now what we're gonna to do is let's start styling some of the content inside of here, and let's, in addition to just doing things like fonts, let's start locking onto the box model that we talked about already. And let's just give some of these things some dimensions. So the first thing we'll do is let's target the buttons. And so what I want to do quickly here is let's take a quick look at oops, I made a quick ad hoc slide. So what I wanted to talk about here. And we had this question in our intro, intro to HTML class, is what is the different display types? So the box model sort of goes hand in hand with this idea of a display type. And this is gonna become really important again when we start working with the menu system because we're going to change the behavior of how things are displayed. So, we've talked about the fact that there's a box mod...

el and everything shows up in a box. When we are looking at these individual elements that box model is translated into a display type. So, the three main display types that you'll be working with with layout is a display type of block. So if something has a block display it basically means that that element will go the full width that it's allowed. The full width of its parent. So if this is the main element, it goes to the full width of the body element. If it's an image inside of a figure, it'll go to the full width of the figure. But basically a block element, shown here in blue, just means it will just go the full width. Nothing can wrap around it or be on the sides. It's just that full width. Images have a display type of something called an inline block. Which means they have a width and a height that can be locked onto. So they will also push things vertically in addition to whatever width they need for their content. The third type is something called an inline display type. Inline display types really only have a width. And an example of this are your anchor links. If you had an anchor link that actually wrapped around on a line, you could hover over and click on the link, at the beginning of the item, or where it wrapped on the other side. So inline styles are sort of mailable. They can wrap around different line lengths. And we can't assign things like a height property to inline. So inline is just like, it's just, chillin' along with the rest of the content. It's not giving any dimensions. Inline blocks will have some dimensions but will still float around. And block properties will just take that full entire width. So what we're gonna do, back in our design here, is we're going to target all of those anchor links. This one down here for example. See full list. And we're gonna change the display type so this will behave like an image instead of behaving like an inline element here. Now we put a class on all of our anchor links of btn. So we'll type a dot btn. Let's put in a space. Put in our brackets. And the first property's gonna be display. We're gonna set the display to inline block. Next line let's add some padding. Now if I added some padding in here and I didn't set that to an inline block our top and bottom padding wouldn't take any effect. It has to be a block property, or an inline block property, for the padding to take effect. So that's why we had to do that. So let's set this to seven pixels. in the padding. So that's seven pixels on the top. 24 pixels on the right. And if the left and bottom properties are the same as left, or top and, I'm sorry, if the left and, I'm sorry, bottom and left properties are the same as the top and right properties, then we can actually use another shorthand style which is to just define two properties. So over here, if we say padding seven pixels and 24. Basically seven is applied to top and bottom. 24 is applied to right and left. So it's still going in the order of a clock, but we don't have to put all properties. But this would be the same thing as doing seven, 24, seven, 24. So next, let's come in here and let's set a background color. So for the background color, we're gonna set this to our orange color. So for now let's just make this, we'll just make this green for now. We'll change it in a few minutes. So set this to a for red. Oh, that's the orange we want. So we want to set a for red. And then zero zero for green and blue. That's gonna give us that reddish color. And with that background placed, we can now see what the padding did for us. By setting seven on the top and bottom the box that goes around that anchor tag now is a little bit taller. Seven pixels from the top and bottom of the text. And then giving us 24 pixels on the right and the left. So that's giving us those dimensions that we can start to work with. Next let's come in here and set font size. We're gonna set this to, a little bit smaller than the base. So we'll set this to point nine ms. We're gonna set text transform. We're gonna set these to uppercase. This is a really nice feature in CSS. So we can keep the HTML in upper and lower case, which would be more grammatically correct, or maybe match the editorial styling of our company. But we can change the way this displays in CSS by simply saying, this is now upper case. Let's come in here and set letter spacing next. We're gonna set this to point five pixels. We can actually use sub-pixels here. That's gonna space out the letters just a little bit. Let's come in here and set our color to pound sign and three fs for white. And then finally let's come in here and set word spacing. And we're gonna set word spacing to just one pixel. So some of these changes might be really subtle. But as designers you, you probably are doing this a lot in your other projects. Just going in and just changing some of the type. So this just makes that type just a little bit easier to see in these areas here. Now notice we're getting this cascade effect as well. So if I come in here and hover over this we're still getting our underlines showing up because it is an anchor link. But we've just gone ahead and made some additional changes based on anchor links that have the button class. And now if we scroll down, we'll see this showing up in all of our places. Map your spices. See full list under so many choices. And see full list here as well. Now, let's target those content elements and let's make sure that that content never gets wider than the 1200 pixels that we wanna make sure that our content stays within so it's much easier to read on the screen. So back in our HTML, we had a div element that we put inside of all of our main elements, with a class of content. So now we're going to target that in our CSS. So we're gonna type dot content. Put in our brackets. Let's split this open. The first thing we're gonna do is we're gonna center this content. Now centering content, centering elements like this, we can center content inside of an element with text aligned. But to center the container, the element that's holding all of the other elements, we need to use margin properties. And what we can set for the margin properties is a value of auto for the right and the left. When we do that, what we're telling the browser is, we wanna take whatever available space is left in the browser, and evenly divide it between the left and right sides of the screen. The browser will then take that available space, divide it, and then force that element to be in the middle. So we're not really centering the object itself. We're kind of telling the browser, just use equal space on the sides of this. So to see this, we're going to type zero for the top. Auto for the right. The bottom will be zero. And the left will be auto. So we can just use these two properties. So that's gonna center that content. We'll see that in a moment. Next we're gonna come in here and use a property called maximum width. All of our content is inside of these content containers throughout our document. So max width is basically going to control the parent, which contains all of our content. And we're gonna come in here and say max width. And we're gonna set this to 980 pixels. So 1200 is pretty readable. But we wanna lock this at about 980. And now the other thing we wanna do, and this goes back to the box model, is that when we assign padding to our content padding will affect the size of the container that it's in. So this link for example, this see full list, we added 24 pixels of padding on the right, and 24 pixels of padding on the left. Seven on the top and seven on the bottom. This image, or this text right here, this anchor link, that has display type of inline, now is 48 pixels wider on the sides, and 14 pixels taller than the original size. Because we put padding in here, it made the entire thing grow. Which is cool here because this gives us the ability to have a much bigger button. But we don't always want that to be the case. Especially for our content inside. So what we're gonna do is use a property called box sizing. And we're gonna set box sizing to border box in our CSS. So it might look a little bit strange but what this is basically saying is, the size of that box, from the box model, we want it to be controlled by the border of the box itself. Which basically is saying, we know the size of this object, the browser knows how big it is. Regardless of what padding is inside don't make it bigger because of padding. We want this to just remain its main piece. This is something that you'll have to play with when you're doing your web designs to get the hang of it. Most of the time you're gonna turn this on for anything that you don't wanna have, sort of, messed around with, with your padding. We're gonna use some of this in our menu system as well, as we get into that. So, box sizing this border box is going to give us a much more predictable behavior for those pieces. So now with that in place, let's go back to the browser and let's take a look at what we have so far. 'Cause my preview window's not gonna be big enough to show us what's going on. So, let's go back out to the my first web page. Let's open up the HTML. I'll scroll down here a little bit. So now we can see our content is maxing out, in this case, at 980 pixels. As I make this wider, the type won't get any wider. All the content inside actually won't get any wider. If I bring this down smaller, we'll see that the content will adjust and change. If I go into my responsive design preview mode, we can bring this all the way down to ridiculously small. And we can see everything changing. But once we get above that 980, that content is going to lock into place. This is also where the margin settings here are blocking, or, I'm sorry, where the margin settings are taking effect, and the browser is basically saying, I have this much extra space on both sides, and then will evenly divide this. So we have an auto-margin happening on the outside of these content areas. That's what's giving us that centering effect when we open and close our content here. So again, that might take a little getting used to as well. But the centering of the main elements themselves are controlled through setting an auto property on the margins right and left. Let's now come in here and let's start styling part of the heading area. So now in the heading. Let's come in here and type header. Put in a space. Let's get our brackets. For the heading area, we're going to bring in that countertop background. And we're gonna put it into the background of that entire header element. So let's start with a background property. We'll use shorthand style here. The first property is going to be for color. So we're gonna set this to a pound sign. And we'll just put in three zeros for black. As soon as we do that we can see this showing up right away. And we can see the nice transparency here in this image that we brought in. We're actually gonna take a look at how to do this in After Effects in our course coming up. Actually, using After Effects for print and web design. Let's go onto the next item here. So background size. Background size is going to allow us to control the sides of the image that we're bringing in. So we're gonna set the background size to auto, and 82 percent. So auto is the width. And we're gonna set the height to 82 percent. And we'll see the effect of that in a moment. Let's go back to background after color. I forgot to add in the image and the other properties. So after color, let's hit a space. We're gonna type url, put in our parenthesis. Inside of the url, we're going to link to the images folder. Forward slash. And then type in countertop dot JPEG. Once that's in place we'll see that countertop showing up in the background. We're gonna set this to repeat on the x axis. The countertop graphic actually has the same pixels on the right and the left. So this will repeat infinitely on the horizontal axis. And then for the background position x and y, we're going to set background x to center. And then space. And then we're going to set the y position to zero. So by centering this, this means that the countertop image will always center in the browser. So if we resize this we'll get a little bit of a parallax effect here as the countertop image is always, sort of, resized in that background area. Next we're gonna set the height. We're gonna set the height of the entire header element to 450 pixels. We're gonna set an overflow property. We're gonna set this to hidden. And we're gonna do that because we're going to position this main image here and we don't want the image to go outside of the heading area that's available to us. So that this image can't block or cover up any other content here. So it basically turns that header area into a mask when we say overflow equals hidden. And then finally let's set a position property of relative. What this does, is this means that anything inside the header element that has a position value of absolute will position in relation to the header element itself. Otherwise, anything absolutely positioned in the page will position to the body element. This way we can have elements that are positioned but will always follow what's happening in the header. We're going to take this image of the cutting board and position it to the upper right hand corner of the screen. That way it'll always position in relation to the header element, and move along with the content as we get to smaller screens. So now we'll type header space image. We'll put in our brackets. We're gonna come in here and set the height. We're gonna set this to 100 percent. We're gonna set a position value. So we're positioning that header element. We're gonna position this absolute. So now we're gonna position this inside of that element. And let's come in and set our top property. So that's going to be the, where that image is being positioned. So by setting the top property, we're gonna set the top part of that image of where that's actually gonna be positioned. And we're gonna set that to zero pixels. So position's to the top. And then we're gonna set a right property of zero pixels. So now if I scroll up, we can see the image is now positioning right up to the upper right hand corner here. And let's come in here, and I should remove this black color 'cause I do want that to show as white. We'll do one more real quick. Let's come in here and let's target the content inside of the header. So header space dot content. By adding in two properties here this allows us to create a rule with something called more specificity. What we're doing here is we're targeting the content class if it's inside of an element named header. So this allows us to make additional changes to that content element only if it's inside of the header. So making this change here will not affect that same content container that we have in the nav, in the two sections, and in the footer. We're only gonna make a couple of changes to this particular element here. So we're gonna come in here and set a padding top property. We wanna add some space across the top. We're gonna set this to 95 pixels. We're gonna set a padding right property. We're gonna set this to 35 percent. We wanna make sure that none of the content can get within 35 percent of the right hand side. And this is how we're going to actually set the content to not overlap the cutting board. And we're gonna set a position relative here so that anything we position inside of this content area will be showing up on top of the cutting board. So this position relative here, on the content, means that this content area is now showing up on top of that background image, I'm sorry not the background image, the cutting board image. So now if we kind of image this, we have this countertop in the background of the header. We have the cutting board that's being absolutely positioned above that. And then we have our content for the header being positioned above that. And with position values on all of these we're now getting this really nice stacked and layered effect. So we have to make sure that our HTML and CSS is in coordination. The HTML goes in a specific order. The properties in our CSS define each one of the different property values. And that 35 percent means that as I open and close this you'll notice that the, the type never will get within 35 percent of this width. And since that's a relative measurement it's always gonna change. 35 percent's always different depending on the full width of the browser here. So this is really showing us the beginnings of that content. So let's quickly do our h one, our paragraph, and the button. I'm gonna use a specific rule for all of these as well. So header h one. Let's put in our brackets. For the color, we're gonna set this to that green color. So that's gonna be a pound sign, for the h one. We'll do a one for red. C three for green. And three nine for blue. Next we'll set a header space paragraph. We're gonna target the paragraph element which is our subheading inside of there. We're gonna set this to a font size of one point four ms. So that'll give us a 40 percent larger font size for the paragraph at the top. Let's hit a return. Let's do our line height. We're gonna set this to one point three ms. So basically giving us about 30 percent of letting. And for the color we're gonna set this to white. So a pound sign, and three fs. That's gonna give us that white color there. Reload my preview here. So now we can see all of these taking effect. Now the button color, we're using that orange as sort of the default color. But let's come in here and change this specifically for the header. So we'll type header space a dot btn. Come in here and set our background color. Use a pound sign. E zero for red. Nine zero for green. And zero one for blue. And then we can change, I assumed my text editor was going to help me out there. Let's see, so we wanted to do background dash color. There we go. And set our gold color there. So again, these really specific rules in the header, header space dot content, header space h one, header space p, header space a dot btn, means that all of these rules only target elements inside of this area. So now we can have our gold button at the top. We can have our white type. We can have our heading with a specific style and color. But we're not affecting any of the other artwork as we're going through the rest of the content.