Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS enables you to control the look and layout of a web page much more precisely than you could with HTML alone, but it can be time-consuming to learn. In this workshop, expert developer Candyce Mairs makes styling a quick and easy process, walking you through the process of adding content to a web page and using CSS to position that content. Candyce explains CSS positioning concepts like the CSS box model, floats, and clears and demonstrates how HTML and CSS work together to create the look of your web page. By speaking the same language as the browser, you can learn to work with the browser to place content accurately and easily.
Before going any further in my coding for my web page, what I want to do is start comparing it to my original graphic design. So, my graphic design is on the right-hand side, It's just an image of the design I want to end up with. On the left, is my actual page as it looks now. And you can see there's a big difference between these two. My page design on the right has a light blue and a dark blue attached to the lower content area.
My page on the left does not. So, what I'm going to do is get my page set up so that I can add these two blue colors across all three columns on my webpage. And in order to do that I need to add a DIV for each color. So, I'm going to add two new DIV's to my webpage to accommodate the light blue and the dark blue in my page design. So I'll go back to the coding piece, and I will add those within my page here. So, in order to add a new Div Tag, and I want this DIV to surround all of my content on the page.
So, I'm going to put the DIV Tag directly under the Body Tag. So I'll say DIV, and I'm going to give this one a new ID called Wrapper. And that's a very common name for the Outer Wrapper on a page that surrounds all of the DIV's. So, there's my Opening Tag, now I need another DIV to close this, or another Closing Tag.
So, I'll just Copy and Paste this one that's already down here. Now it gets a bit confusing to know which of these goes with which DIV. So, what I am going to do is indent this, so that everything inside those new DIV tags. So, there is my Opening Wrapper on line 66 and my closing one on line 99. And once I have those selected, I can Tab in and you can see my code is moving in a little bit on the page. And I'll go ahead and make it obvious.
So, there is my Outer Wrapper DIV. Now the other DIV I need to setup is one for my columns. So, what that's going to do is include the header here. What I want to do in order to get that inner lighter blue, is to take my three columns of content here and surround those with a second DIV. So, my header will sit at the top, and these three columns of content, will sit inside another DIV that I can give that light blue color. So, let me add one more DIV here, and I'm going to name this one, Content. So, there is my Opening DIV, I want my menu left and right column, to be inside of it.
So, it's going to go underneath the right column, and just like I did with the Wrapper, I think it's much easier to see what is what, if I indent this code. So, I created a new Wrapper ID, and a new Content ID. And I'll set up those rules up in this area. I like to put those up at the top, because they tend to contain other content.
So, how they are listed in the code is similar in order to how I list them here. So, there's my Outer Wrapper and now I'll do the content. And let me move that over so it lines up. So, I now have the rules set up for my Wrapper and Content. I don't have any properties within them. But the rules are set up to add properties.
Now I know my Outer Wrapper should be 850 pixels wide, because that's how wide my page is. So, what I'm going to do is copy that and put that inside my Wrapper Area. I want to contain my page to 850 pixels wide. So, I've added the Wrapper, ultimately, this will be the darker blue. I've also added my Content DIV, and set up my page, so I can start adding my content properties. So, these two rules can be used to add the different colors I need for my page. So, what I did was added two additional DIV's to the page. I contained other DIV's inside of them, so my Outer Wrapper DIV is holding everything on the page.
My Content DIV is holding my three column structure. So, my coding is all set up to begin to add those different color schemes for my content area on the page.
There are currently no FAQs about Exploring CSS Positioning.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.