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.
This course was designed to assist you in learning about CSS positioning, and also how to create a web page based on a graphic design, and match the two up using CSS properties. The properties of floats and clears, and when to use them to create column structure within your web page was covered, and this final design ended up as a three column layout.
Complete with the header and also, a footer at the bottom, which is comprised of a background image. The menu itself was created with a rollover effect, which is very easy to do, using CSS properties. You also learn the concept of div tag and dividing up your page content, assigning div tags with names to them, and then, hooking into those names for each area of the webpage in order to create style rules.
Our style rules were sitting on the same page as our web page to make it easy for you to go through this course and understanding what I'm modifying. Those rules are all contained within a style tag at the top of your page. And the final version of this webpage is called final.html. This was created in an HTML 5 doc type. So, HTML 5 tags can be added to this website, moving forward without an issue, and without having to recode the doc type, specifically in order to use those tags.
So that is our Scuba Blu webpage. It's been tested in four different browsers. Those browsers used, were Chrome, Internet Explorer, Safari, and Firefox. The CSS properties that were used on this webpage are all CSS2 properties, so you could see they were very cross-browser. I did not have too many issues with regards to one browser displaying it different from another.
I'm honored to be able to walk you through the process of working with CSS positioning, and wish you the best of luck in positioning within your own designs.
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.