Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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 now want to talk about customizing the HTML tags that I have on the page so that we can use CSS to associate with these HTML tags. Let's take a look at the content on the page at this point. And what I have is the header.html file open. I have added A single div tag to the page. And within that div I've added a header image.
Now I do have a completed file, that has this added. Now I know it's too much code on the page. So if you wish to start with the exact file that I have, and your header does not have my code you can work with position dash HTML. So how do I customize this HTML code so I can tie in with CSS when it comes to positioning? Well we should probably first of all give this a title, so I'm going to set it up as the Scuba Blue Travel company. Let's just give it that title for now.
I can always elaborate later. So I have an official title. Not good to have a page without a title. Within this page, I have a header image and that header image is located inside a div tag. But if I went to start positioning after adding more content, I might have some difficulty. Because if I put multiple div tags on the page, how does the browser know which div tag I'm talking about? We need to add one more piece to the HTML side of things, before we can go into the CSS side, and that is we need to give this GIF a name. The div creates the box, but we must give the box a name. And the way we do that is by adding an ID attribute to this div tag, or this specific box.
So the ID I'm going to give this box is header. Now that I've added an ID to this div, I can talk about it by naming the ID itself, instead of trying to deal with which div tag on the page I'm talking about, when I want to add some CSS properties. So adding the ID, gives this box a name. This ID is technically a part of the HTML tag, so it does not necessarily apply to CSS in any way.
So let's say I decided I didn't want to add CSS to this particular header box right now. Well I can certainly add the ID, so that later if I decide to work with it its already been named. So whether you add CSS properties or not its usually a good idea to give your divs a name as you build the div tag itself. So that you can hook into that using CSS later. So that's exactly what I've done. I've just completed the HTML portion for this specific header area, it's now available to CSS if we wish to add some additional properties or customize this box in any way.
So that is how you complete the HTML piece for this particular box of content.
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.