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.
Now that I have my project set up within CoffeeCup, the free HTML Editor version of CoffeeCup, what I want to do is set up the browsers. I want to be able to access those very quickly and easily within my web pages, so I'm going to set up the browsers. Whatever HTML editor you were using. You will want to make sure to set up the browsers that you plan to preview in as you create your webpages. So within CoffeeCup itself, there is this Glow area here. And if I click on that, there is a local preview.
And you can see, it does allow quite a few different browsers, whatever I want to install on my machine. Things are all grayed out now. And what I need to do is open up a page in order to have access to that. So, if I go over to File > New HTML Page, I can open up a brand new page. You can see this page does have some extra tags on it. So what I'm going to do is create a new page within here, as I just did.
Set this up in a little bit different way, and then preview in the browser. Now, let me set up my additional browsers first. So I'll just leave this one as untitled and unsaved and go up to the tools area. If I move down to Additional Browsers, I'm going to select the first one, and what this does is allow you to select the browser. And I think the easiest way to do that is to go out to my Desktop, and within my Desktop, I have a few of these browsers. So here is Google Chrome, and within this area, I also have Firefox. But let me set up Google Chrome.
All I do is double-click it, and what it does is directly open that particular file within that browser. So, you're looking at Google Chrome. Because this is an untitled document, I don't actually get a file name. I get a temporarily file that CoffeeCup created. Once I work with an actual saved file, it will show the name of the file up in this area. So Google Chrome has been set up, and what I can do is the exact same thing for any other browsers that I wish to. Now, that is how you can setup your browsers.
Now I can click on the Preview area under Local Preview. I can Test it With the Default Browser for this operating system. So if I click on that, it is going to go out to Firefox, because I have that set up as my default browser. So I can always get to Firefox using it as a default browser. I've also now set up Chrome as a separate browser. And I can go ahead and install all of the others in the exact same way. I can just click Additional Browser. Go out to wherever that browser is located and set them up. One last thing.
If you click on this, and look under Local Preview, you can see it does get assigned a shortcut. So I can always go directly from my page into that specific browser using the shortcuts. And every HTML editor you use has its own way to do this same thing. So make sure that you set up all of the default browsers for that specific HTML editor, so you can go back and forth between your pages and the browser easily.
So that is how I set up the browsers within CoffeeCup.
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.