Lessons

Lesson Info

Styling the Main Section

Now we're going to continue on to the define section. This is going to be the section down here where we added aside elements in our HTML and we want to create some columns. We want to take the areas here, the what is a spice and what is an herb and put these into a column so that they show up side by side. Back in the olden days we used to do this with float properties before CSS3. Now that browsers support a new sort of display type called flex, it's not really that new, it's new for browser support. The past year and a half we've been able to use flex properties to do some columns so I wanted to add that into today's course so that you can see where the future of layout's going with web layout. So let's quickly take a look back at our HTML file so I'll open this back up, we're gonna scroll down a little bit, it's gonna understand and remember our structure here so we have our section with the class of define and we have two aside elements so again the ideas we are going to take thes...

e two aside elements here and stack these next to each other. But what we're gonna be doing is targeting the class of content and setting up a flex definition for this which means that the browser will automatically give equal space to the h2 and the asides so we are going to make the h2 not take one of the column spaces and make the two asides bring that up so instead of talking about it, let's come in here and do it. So I'll go back to my project file, let's go back into our screen, .css file. Let's scroll down and after our header, we're gonna start our definition section so we put a class of define on our section element. So I can type section.define, put in our brackets and the first property we're gonna set here is a margin top property, we want to make sure that the define section can be a little closer to the header so again if we're imagining the define section has this border box around it and it's spacing away from the header here which shows the image here and our counter top, I basically want to get rid of some of that negative space above there so we're gonna set a margin top to negative 45 pixels. So now we're actually seeing an overlap. That defined area is overlapping the header now by about 45 pixels and we can make further adjustments to this later. Next line let's set a padding-bottom, we're gonna set this to 30 pixels. This will make sure that the content underneath won't get that close to our defined section. And so now let's target that content container inside of define. So we'll type section.define space .content so now we're going to target the div with a class of content that's inside of the define area. We're gonna set a display type on this of flex so again this gives us the ability to flex out all those pieces and so right away you can see what starts to happen. What the browser does is it takes the elements and equally distributes all of these items inside of that flex piece so this is incredibly powerful and this is where most web design is going between flex and an emerging technology called CSS Grid. Grid's not quite ready for primetime but flex certainly is. This will work in all browsers except IE 11. This will work a little bit in IE 11, some properties might not work but IE has been discontinued so we will just continue on from there. So this is how we're gonna start doing this stuff. Okay so we have that h2 and the two asides and they're being treated equally because they are children of the define section inside of that content so we're gonna equal distribution between all three of these elements. So let's continue on so let's target the asides inside of this area so I'll come up here and just copy this rule, let's paste it down here so after .content, add a space, type in aside so now this is a really specific rule targeting the asides, inside the content, inside the define class. We're gonna come in here and set a property of flex-grow, we're gonna set flex-grow to one. These are three of the different flex properties. We have grow, shrink and basis. Next property is going to be flex-shrink. We're gonna set flex-shrink to one and then finally we're gonna set flex-basis. This is basically where we're setting the sizing and how this are should be treated. We're gonna set to this 50%. Once I do that you'll notice that the two asides are taking up equal weight or equal sort of space in the area but we want to have these elements wrap, we want to set this up so that our h2 element up here can take the full width even though it's inside of a flex property, but the other two items we want to be underneath and spaced out at 50% each. So we're going to go back to the content section where we have display flex and we're gonna come in here and we're gonna set a flex-wrap property and a lot of this flex stuff is just stuff you'll have to play with. There's a lot of things that you can do with some of these properties. So we'll set flex-wrap, we're gonna set this to wrap and a semicolon and then let's come here and set text-align to center so we can align all of the text in the center so right away now that we've set wrapping capabilities on that flex property, we're basically saying since two of the items are taking up 50% of the space they can fit on one line. The h2 which doesn't have a property assigned to it will now take up the full width of that area so again much more efficient than things like float properties and all of the flex items will actually be the same height which is very cool so if we had background colors in there, we could also resolve the different heights that we wouldn't get by floating div elements around. Okay so now back inside of our aside that we're targeting let's come in here and add a few more properties. First we're gonna add a background property. We're gonna bring our icons into our flex elements here, into our asides for spice and herbs with background images. We're gonna point to those SVGs. So let's come in here first and set a background. We're gonna set no-repeat as the repeating property. We're gonna set the position x to center and the position y we're going to set this to top so I'll just come down here and choose center and top. Got a question? Kind of. Well in line 101, it says text-align: ce. Should we center? That's all. What I don't see what you're talking about, it says center right here. (laughs) Yes it should say text-align center. Okay so we've set our background for each of these individual asides. Next let's set background size. Now we're not seeing anything because we haven't brought the graphics in yet but we're setting up the stage for when we bring those background, those icon graphics in there so background-size, we're gonna set this to 75 pixels for the width and a space and 75 pixels for the height. Next we're gonna come in here and set box-sizing because we're gonna add padding next and we don't want the padding to make these wider than 50% because if they're wider than 50% they're gonna stack on top of each other. So box-sizing, we're gonna set this to border-box and then for the padding, we're gonna come in here and set this to 80 pixels. So padding: space 80 pixels; So now we see we get the 80 pixels showing up on both sides of each one of these items and we get room around the flexed items but the overall boxes are still taking up 50%. And if this looks a little wide, of course we can come in here and change this, maybe I'll just make this 60 for the moment. Next let's come down here and let's target the h inside of define so we can center this. So we'll target the h2 inside of section.define. So we'll set text-align to center. Next we're going to come down and set our flex properties as well so we'll say flex-grow, we're gonna set this to one because again all the items inside that main parent are going to get its flex properties so even though we're getting the wrapping that we want I want to be explicit about what I want the h2 to do. We're also going to come in here and set flex-shrink, we're gonna set this to one and then we're gonna set our flex-basis and we're gonna set that to auto which basically means go back to the way you would automatically behave which h2s have a display type of block which means it will be the full width of its parent container so we're really cascading all of these pieces together based on the default behavior of these objects and then the subsequent property overrides we're creating inside of our CSS here. And so let's do two more things. Let's come in here and let's set the margin property of that h2, set this to zero on the top and right, 10 pixels on the bottom and zero on the left. Okay. So now in our HTML, we have these two aside elements here and earlier when we had two different section elements, we put a class on there so that we could pick out the names specifically and target these but again I'd like to keep my HTMLs clean as possible and I don't want to put classes on everything inside of my HTML file so what we're gonna do is use CSS to pick out these children by name and we can do something called enth-of-type which means I can say I want the first aside or I want the second aside and that will give me the ability to target specific elements without again having to put classes and extra names on everything. And we're gonna use this so that we can change a little bit of the padding and we can put the icons in each one of those items. So let's come in here and start with our first section so I'm actually gonna come up here and copy this selector so we're gonna target the aside then a colon then I'm gonna type enth-of-type and put it in some parentheses then a space and then put in my curly brackets. Inside of enth-of-type, I'm gonna put a number one. So I'm gonna target the first child that's an aside inside of that group. I'm gonna come in here and set a padding-right property, we're gonna set this to 30 pixels. That's only going to affect the first one, not the second one. Let's come in here and set background-image, we're gonna set this to url, put in our parentheses and a semicolon. Inside of url, we're gonna do images/icon_spice.svg so that's going to target the graphic that we've created in our other course on sketch when we drew out our different icons and saved these out as SVG so the first item is now being targeted with this element in place. Next let's come down and choose background-position and we're gonna do something a little bit fancy here. We want to center this icon here but the way that CSS and HTML center items or position items is always based on the upper left hand corner so what we want to do is set a background-position to center but if we did that, it would center it on the left so the icon will actually be centered but then the art would be over towards the right hand side and so we can actually do a calculation in CSS to calculate the position of these. So for background-position we're going to say background-position is calc, C-A-L-C, put in our parentheses then semicolon. Then we're going to come in here and we're going to say for the left position, we're going to do 50% and then we're going to subtract 15 pixels 'cause the icon is 30 pixels so we're basically going to subtract 15 pixels from the left hand side and that will keep it over in the center and this whole value is the x position then a space and then we'll put zero for the y position. So then we center that, we'll get something that's a little bit more in the center. Having a slight adjustment issue but we will continue on. So with all of these in place, let's select this entire rule, let's copy this, let's come down and let's paste this. One more time let's change enth-of-type to enth-of-type two. That will put the spice graphic here. You know what it was 'cause I changed my sizing here. Let's bring this back to 80. Nope. Nevermind, don't fix on the fly, keep going. Let's come down here and set the enth-of-type to background-image from icon spice to icon herb. SVG and now we'll see this graphic showing up here on the side as well. I'm supposed to do a few more properties. I think I forgot a couple here. Let's go back up to the aside. For the padding we have 40 on the right and the left so let's come in here and just so we can sort of push this content down a little bit, let's set this to about 90 pixels on the top and we'll do 40 on the right and left, zero on the bottom and then we'll do 40 again down here. So by taking these properties here, adding in some of our padding and we won't worry about the off-centering for the moment. We're basically adding that padding across the top here because that entire image is this tall. That padding creates that space of that image. The background graphic being brought in through CSS shows up inside of that negative space so now we're using a combination of the background graphic, the padding on the main image and that negative space to display the graphic that's showing up inside of our area here. And so let's come down here and let's just subtract the 15 pixels, see if that helps. That does and we will continue on. So at this point we have covered quite a bit of CSS properties all the way down to doing things by creating columns with flex properties. We have redefined display types of elements, we have positioned elements, we have set absolute properties for our positioning on images and set up all of our overlays so since we have covered so many properties, at this point we want to jump over into a couple of snippets and just start styling the rest of the content with these same properties that we've been working with. So let's go back to our exercise files, let's open up our snippets folder and let's open up snippets one which is our snippets that we've already written in CSS that cover the choices section, the define section and the footer section. So let's come in here and just copy all of the choices content. If we take a look at this we can see that we're setting some padding properties, we're setting a background-image to our spices.png, we're setting this background-color to a gold color, we're targeting the content here with a specific rule for content. We're setting the width to 50% and as we just looked through, we are doing the same thing that we were doing with the other two sections, making specific changes to the h2 here and the specific background-color change to the button. So with those copied, let's go back to our CSS, let's scroll down a little bit and just paste this and now we'll see pretty quickly, we have this section done here as well so everything that's happening here is everything that we've done already. The background-image of the spice graphics is being brought into the background, we have our content container here has a semi transparent color of white. We're using the exact same h so we get exactly the same style. We're using exactly the same button with the only change being we're changing the background-color to green. So again with a couple of CSS properties, we can get a very dramatic change from the way the define section looks to the choices section with just a little bit of CSS changes. So let's go back to our snippets. We're still in file one, let's scroll down, I have a whole bunch of properties for the main section, let's come down here and copy this. Let's paste this. Let's go back to our snippets, we have some properties for the footer, we'll come in here and copy the footer, come back over here and paste. We'll hit save in the browser and we'll have much more of our content sort of set up for us. Now one thing that we'll change real quick here is we want to take this figure that has our world map image and our fake caption and we want to make this a little bit smaller and float it so we can have content go over to the right. Now I didn't want to use float properties for the columns because again that would require a little bit more CSS and the flex properties really give us the ability to create columns quickly. However in some cases we might just want to have some content not be quite as wide, group it together with the caption and just float it to the side so we can have text wrap around it and that's really more something that the float property was built for. So let's come back to our main section so before the footer rule. It doesn't matter where you put it but I like to keep all of my rules together here. Let's come in here and type main space figure. Put in our brackets, we'll split this open. For the width, we're gonna set this to 45%. Next line we're going to set a float property, we're gonna float this to the right. That's going to allow content to move over to the right hand side of this. Let's come in here and set a margin property. For the top margin we're gonna set negative 12 pixels. That's going to move it up a little bit so it'll be a little bit more in line with some of the copy. We'll set zero on the right, 35 pixels on the bottom and 30 pixels on the left. Now that image is taking up that full width so let's quickly come down. Oh I misspelled main, that's why. Change man to main, main space figure and with these properties in place, you'll now see that the figure container's now been conformed to 45% of the width which means if I come in here and make this bigger, everything inside of that container gets a lot larger. And then one more rule we're gonna set down here is going to be a max-width . Because that's an SVG graphic and because we're setting this to 45 and somebody might look at this on a 21 or 24 inch screen, I wanna set a maximum width of the entire figure itself so I never want this to get wider than 600 pixels. Because when it gets wider than 600 pixels, it's just taking up too much room, it doesn't need to get that large so now it will lock at 600, you'll notice here. But we'll continue to scale down as we get even lower. Scroll down a little bit, we have our footer properties in place as well. Let's just go back to our file one, let's just do a quick check. So we've done something similar with the footer contents, we have our individual elements in place setting up display and flex types for each one of these. For our content I realized earlier we didn't actually go grab the footer content so if we come down to the footer in the content file, basically all I did here was use two paragraphs, one for all of the anchor links for the navigation and one for our copyright and here's another entity we can use for the copyright symbol, &copy. So let's come in here, we'll copy that, switch back to our HTML file, I don't know why that keeps coming up, I apologize. Let's come back to our HTML file, let's scroll down to the bottom of the footer, let's add that content in. Tab this in, our rules are in place, just scroll down and now we get our column treatment down here as well.