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 plan to do for this course is use the XHTML DOCTYPE for Chapter 2. But once I move into actually building my pages, for scuba blue throughout the rest of the course, I'll be switching this back to an HTML5 DOCTYPE. Since that is the up and coming HTML version, I will go ahead and set up this brand new website using HTML5. That way, moving forward, if we want to apply HTML5, the pages are all set up to do so.
Also, I'm setting these preferences within CoffeeCup, any HTML editor allows you to change or modify these specific features. So, despite the fact that I'm using CoffeeCup myself within your editor, there will be a way to accommodate these same preferences. What I want to do now is familiarize you just a little bit with CoffeeCup in order to set up new pages so that they are xhtml pages.
And so, this is tweaking a few of the CoffeeCup editors preferences, specifically so that when I create a new page I have the correct code on the page. First of all, in the preview and browser area, I don't want to click Quick Live Preview because that is assuming you've uploaded the page to their s drive. So, I'm going to use local preview. And I know this is grayed out a little bit right not, but notice I have test with Chrome, Internet Explorer, Safari, and Firefox. So, I want to show you how to set those up as well. Now, all of this is done in the tools Preferences area within CoffeeCup. But let me show you why I want to do this.
If I go to File > New HTML Page, what I get by default within this application is an HTML5 page. So, this coding on the page is a little bit different in terms of the DOCTYPE than what I want is my default document. I'm going to be using XHTML Transitional instead. The only reason for that is I'm not using HTML5 tags, and we're kind of in that XHTML, HTML transition. But I want you to know, you can adjust CoffeeCup for whatever you want. So if I go out to the tools > Preferences area, within the Preferences area, I can set my initial DOCTYPE.
So, you can see it's HTML5 right now. What I can do is switch it over to XHTML Transitional, which is where pages are, or most pages on the web right now. Feel free to stick with HTML5 if you prefer, I just want to show you how you can adjust the DOCTYPE. The other thing I'm going to do is move into the browser testing area. And what this does is list all of those additional browsers, so this is how you can give that browser a name.
So my first one is Chrome that I set up, so I can name it right here. I can also set up all of my browsers right here, instead of using this globe. So I set the first one up for Chrome, the second one I have for Internet Explorer, the third one is Safari, and the fourth one is Firefox. It shows the icon, but I do like to have the name. I can see it a little bit quicker that way. So, let me click OK. And if I go up to the globe under Local Preview, you can see it displays the icon for the browser but it also now says the name.
I'm going to skip using the default browser so that I can go straight to these, and you know exactly which browser it is I'm going to. Now, if I go to choose a new page, File > New HTML Page, notice it has the XHTML Transitional DOCTYPE instead of the HTML5 DOCTYPE. So, just be aware you can adjust the DOCTYPE for whatever you want to use. I'm going to be using XHTML Transitional. Now, this page also gives you some default meta tags within the document. And you can just maintain those there, or go ahead and delete them. So that is how you can set up the correct DOCTYPE for the document you want. And also, how you can adjust the preview in browser area so you can add the names and add as many browsers as you have on your system and wish to test for. So, that is adjusting a few of the preferences within the CoffeeCup HTML Editor.
If you need to do this within your editor, you'll have to do it based on that specific editor's preferences. Just make sure that you customize your editing interface so that building your pages are quick and easy. And you can get to the exact browsers you want whenever you need to.
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.