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.
I am now all ready to start to begin to build my web page. And what I've done is opened up the header.html file within the course files. And I also have all of the images necessary to build my design located inside the images folder. So, what we're going to do is start to build the header page. I'm right now using the HTML 5 DOCTYPE within this website that's because HTML 5 is the new standard.
It's available to begin using now, so I'm going to go ahead and do so. That way, later on, I don't have to transition the site, if I decide to start using all of the new HTML5 tags that are available. So, this has a HTML 5 DOCTYPE. And down in the body section, what I need to do is add the header image and create a box for it. So, I will switch over to code view. Now I'm using some of the features built into CoffeeCup, the free HTML editor that I'm using.
That does not mean that you have to. I may use the CoffeeCup features built into the program. But I will always show the code, in case you wish to just type out the code as you go through the course. So, I'm going to click on this code tab within the interface. And it pulls me to the HTML 5 tags, which really don't look much different than the HTML 4 tags, it's just added a few more. So, within this section what I need is I need to add an image. Now my image tag is down here, so I could add that and then pull in my image. But what I'm going to do is go up to the website, open up images and actually take the header image and drag it out onto the page.
And when I do that using CoffeeCup, notice it builds the tag for me. So, all I need to do is add the Alt text. So, I'm going to say ScubaBlue Header. And I'm using these features, simply because you don't have to sit and wait for me to type this all out for you. So I'll take advantage of the editor's options as I can, so we can focus on what this course is all about.
So, there is my header image. I'm going to go ahead and Save that, and preview it in the browser. And I'll go ahead and stick with Firefox for now. I have quite a few options I've customized. And you can see my header image here is all set. Now it's not set up for positioning specifically. So, what I need to do in order to move into helping with the positioning piece, is I'm going to add a div tag. And in CoffeeCup, if I surround the code, so I'm selecting the entire image code and I click the div tag, notice it adds the div tag for me surrounding the content.
Now I did need to double-click to insert it, but when I selected content first and then double-clicked the tag itself, it surrounded whatever I had selected with that tag. So, that's going to save me some time. There is our actual page code, and let's organize this just a little bit better and I will indent the image itself. So, what I have done is put that image inside it's own div tag, which puts it inside a div box.
That's going to assist me when I get to the CSS positioning piece, and organizing and arranging this content and the box surrounding the image. So, I'll go ahead and save this, and let's take a look at it. This time, I'll test it with Internet Explorer, and see what happens. And there's Internet Explorer all set to go. Now, you can't see the div, but that content is available.
If I put this into Firefox, and I can turn on Firebug, which is a Firefox add-on, that I've installed, and I go over to the layout tab, you can see, here is my information. Let me open this up so you can see a little bit better. So, if I click on the image itself, you can see my image is 850 pixels wide. But if I click on the div tag, notice it is not 850 pixels wide. My div tag goes to whatever width the page is. So, when I click on it now that the page is a little wider, you can see it shows it's wider.
So, I'll go back to the body tag, that shows me the actual width of the entire page. Now I'll select the div, what that did was refresh my div width. And you can see my div is now 1191. It's usually best to instead of letting the div extend all the way out, to set the div so that its the exact same size as my image. And I'll do that moving forward. For now, all I wanted to do was set up the HTML for this page, so that I can move into doing things like that such as limiting the width and applying CSS properties.
So, what we just did was added page content and put that page content into a box. And that's how you do it using CoffeeCup or whatever editor it is you choose. And I do have that HTML5 DOC TYPE which I will be sticking with moving forward in the course. This entire web site will be set up with HTML5.
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.