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.
A very common question I get asked in my web classes is, why use CSS positioning? And I think it's a very legitimate question, so I want to address that now before we get started in this workshop. So, why use CSS positioning? Well, there's a variety of reasons. I call these the official reasons, and then we'll move into actually why I personally use it. So, the official reasons for using CSS, is that it is the web standard as defined by the W3C, who sets standards for the web.
What it does, is allow content to be separated from the look of the page. So, the content is HTML, and it's what HTML is supposed to do, provide that content. But how that content looks should be controlled by the CSS side of things. And the look of the page includes not just positioning, but also formatting of content. So I'm including the formatting and positioning, which are the two pieces that CSS controls. HTML controls the content side.
Another reason for using CSS for positioning, is it allows styles to be changed independent of the content. I can move a particular piece of content on the page without having to go into the actual content itself. In other words, I can take a paragraph of text, move it to another location, and I'm not digging around in that paragraph of text in order to do it. And we do have one last reason for using CSS for positioning, and this one, I think, is a fairly big one. Your page load time will be faster using CSS than the older methods that used to be used with HTML, such as table structure or frames, in terms of controlling layout.
Page load time being faster is better for everybody. Users of the web, as well as creators of those web pages that are used. HTML was created for text and hyperlinks. It was not really created for positioning content, so that is why the page load time is faster using CSS. The HTML side you have to start getting into the content area. And it does take the browser a little bit longer to understand what you want to do than if you're using CSS. So, how does CSS positioning help you, as the web page creator? And this, as far as I'm concerned, is the big piece. In other words, why do you really, really want to learn it? And I think once you see these benefits, it'll help you deal with the learning curve, with regards to working in CSS positioning.
So first of all, it enables you to easily perform global site-wide changes. If I want all of the header tags on every page in my website changed because we change our branding colors, no problem. CSS lets me do that very quickly, and that to me, is a huge benefit. Content is easier to maintain, simply because you have that ability to make those global site-wide changes.
It offers consistency across pages, which is better for your users, as well. So what's a style on one page, or the layout of a page on one page, remains consistent across your pages. So it makes it easier for users to use your website. In addition, it offers properties specifically for positioning. Those are CSS properties, and they are specific to positioning. So, even if you have used CSS for formatting in the past, the properties for positioning can be a bit confusing initially, and that's what this course is all about.
CSS positioning, once you do learn it, it is much easier than other alternatives. If you've ever worked in table layout with HTML, it is crazy the things that would happen when you go to modify content. So once you've gotten familiar with CSS positioning, you'll wonder how you ever did it before. And I'm serious about that one, I do wonder how I ever did it before. And one of the big reasons for using CSS positioning for you personally, is you have control of your content using CSS.
When you're working in HTML, you do not have that level of control. So everything is much easier, because you can control it. You can understand what's going to go on. So those are both the official reasons for using and learning CSS positioning, as well as the unofficial reasons, regarding how CSS positioning can help you personally as you're creating your pages, and also help your users as they are working in your website.
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.