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.
What I'm going to do now is address the left div tag, both in the HTML side and also the CSS Properties side. And I'm going to start adding CSS Properties to this left div. Why might I want to do that? Well, if we take a look at the page itself in the browser, if you look at it, you will see very quickly that our page doesn't exactly look the way I want it to.
I have a border added to this menu area just so I can see the outline of the div. So, I think it might be a good idea to begin to do that with the left div as well. It just makes it easier for you to see what's going on, what pieces of the page are located where. So, the first thing I want to do is take this left div, create a style rule for it. And one of the properties I want to assign is a border, the other property I want to assign is a width. Because by default, HTML puts a div tag extending all the way across the page. So, let's go do that.
Now if I scroll up to my Styles here, here is my Header ID, and the CSS Properties attached to that at this point. Here is my menu ID and its three properties right now. What I'm going to do is add pound left for my left ID, and I will go ahead and create an area here where I can start adding properties. Now, you can see from within this section, I have a width for the header and also a width for the menu. So, I will go ahead and add a width here, and let me just guess at 300 pixels. That sounds about right.
Now, this width is not quite lining up here, and that's because, if you notice, this menu is all the way on the left alignment, this one is not. So I'll just manually fix that for now, it's a quick and easy way to handle it. But if I put my cursor all the way to the left and tab, now it goes to the perfect location. Why do I indent here and put these brackets on separate lines? Well, you can begin to see why.
It's just easier to understand the more properties you get for a particular selector, and this is the selector, the item in front of the left curly bracket. The easier it is to understand what goes with what. Now, CSS itself does not care. This could all be on a single line, all of these pieces. But if I come in to modify it later, it makes it very difficult for me to read it. So, that's why I am adding this indentation.
And I'm just hitting the tab key to do that. So over here, I'll go up to our left. I'm assigning a width of 300 pixels, just a rough estimate for now. The other thing I want to do is add a border, like our menu has. So, I'm just going to copy that and I'll paste it down here. Now, when I do that, it will at least allow me to tell where that left ID is located.
So, let me save this and go out to the browser again so at least I can see the outline of my div. Now I could have added a background color to this, that would've worked just fine as well. But I'll just add a border for now. I'll leave that up to you whatever method you wish to add. But for now, I'll just add a border. So, there is my column. Now, you can see my page even though I restricted to width to 300 pixels, it did not move my content up alongside.
And I will address that moving forward. What I prefer to do is, I know I have a menu and I have two columns next to it. So, what I'm going to do is I have the menu created. Here is the first column. And what I'm going to do is add all of the content for the second column. Then I start moving into a little bit more of the positioning piece. A border is technically speaking a part of the CSS Box model.
The CSS Box model includes a border, margin, and padding for every box of content on the page as follows every HTML tag on the page. So, I've technically moved into CSS positioning when I added the border. I also added a width, and this one has padding as well. But I tend to do these gradually. I'll start with width and border so that I can place my content into a narrower piece which is easier to manipulate.
And then I'll add a border so that I can see what I'm doing. Once those get all set up and I get the content added, then I can start adding and fine-tuning what's considered more of the positioning piece. And let me line this up. I like this code to be nicely lined up, and I'll move into that positioning piece. And that's when you can really start manipulating your content. But what I did was simply created a CSS rule for the left div tag, added a width, added a border so I can see where that box is located.
And that box I'm referencing is this div down here, with some paragraphs of content inside of it. So, I manipulated this div tag and added a border. So when I move into positioning this, and it will be much easier to see what I'm doing.
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.