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.
In this movie, we're going to format our right column content. So what you're looking at on the right here, is the original design. And on the left, you're looking at the coding for the page. Now I have a header div up at the top, with an image inside of it. That is this area of the page. The next code I have on the page, is the menu coding. Along with the words, I have the hyperlink setup, even though not all of these hyperlinks have page names at this point.
That is my menu area, so it's contained within a div called menu. The next piece I have, is the left column of content. So, I have the menu. Technically, this is my left column, so I've named it left, and here is the content within that area. It contains all of these different pieces of text within the correct HTML tags. In my right column over here, I have three images set up.
And those images are right here, within my right div. And underneath those images, I have the upcoming events area, and the text within that specific area for that. So my divs are all set up. I have four divs at this point. Those divs just need to be positioned. But before I do that, I want to make sure that this text over here for upcoming events has been formatted correctly. I'll put away my design view, and I'm going to take this out into the browser. Let's look at the formatting for that content right now. My formatting, or my left column formatting, is using Georgia font, but notice my right column is using Times, or the default font and the default sizing. This text is a little bit bigger than the text in my left column. So what I want to do, is format this text within CSS before I get concerned about the positioning piece.
It would also be a good idea to be able to see where this div is located. Right now, I have a right div, but I can't visually see it on the page. So it's a little more difficult to deal with. It also is extending out across the page. You can see my images are lining up horizontally, and that might not be what I want. So what I'm going to do right now, is format the text and put a border around this div with the width, so I can see this column of content when I go to position it. So that's the plan.
How do I format this text? Well, I'll move up into the styles, because I format it using CSS. Now, I have the formatting pretty well set up for my left column. Within my right column, let's take a look at the tags. I have a header two and a p tag. So what I want to do, is add the formatting for those two tags, along with the formatting for the div itself, called right.
Now what I can do, is use what I did on the left-hand side, copy it, and paste it down below here. So now, I have two copies of my left CSS rules. That isn't what I wanted, so I'm going to change these to right. I'll change my left to right here, and I need to do that for all of these. So I'll just copy this and I'm just using Ctrl or Cmd+C to do that and Ctrl or Cmd+V to paste the right in, instead. This is my left formatting, and this is my right formatting. I've just added a width of 300 pixels for my right box. I also added that black border.
I have a header one listed here, header two, and a p tag. Now I want my right column to not be a Serif font. This going to become a Sans Serif font. So I'm going to have different text formatting for my left and right columns. Instead of Georgia font, I'm going to use Verdana in the right column. So I can simply copy these and paste these in, so everything within the right column is Verdana, instead.
Now we'll take a look at those tags in just a minute. Let me copy these in. So I have Verdana in my right column, and Georgia in my left. Within these rules, I have three different formats for the right column. So, let me explain this. What this does, is say within the right id area, I have a header one tag. If there's a header one, we're going to assign these properties.
So you can read this as being, if it's the right id and it has a header two tag, then we want it to have these properties. So what it does, is specify a tag within a particular region of the page, which comes in very handy. Now, if we go down and look at our HTML, I don't have a header one in this region, I just have a header two. I don't really need this rule right now, so I could delete it and I think I'm going to do that.
This rule was copied in when we copied the left rules and I don't need it. So I just need a header two and a p tag. Because that's what's inside our right column. And do Local Preview test with Firefox, and here we are. There is my right div. It has the Verdana font assigned to it, along with the font sizing, the same as our left column.
And you can see, because I gave this a width of 300 pixels, it pulled the images together. So these two images are automatically placed below the larger image, because there isn't room along the side. So what I did, was added formatting for this right column, and I added the other CSS rules that I need in order to bring this column together and see what I'm doing when I get to the positioning piece. So my right div is all set to be positioned.
I tend to take care of the HTML piece first, adding all the HTML tags for the content. Then I move into formatting those tags using CSS rules. And then the last step is the positioning piece. So what I have right now, for all of my divs, is the HTML content has been added for all of them, and the formatting piece for all of them has been, more or less, fine-tuned. Once I finish positioning, I tend to go back to the formatting if I need to.
But this is all set up and ready to add the positioning piece.
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.