Join James Williamson for an in-depth discussion in this video Structuring HTML correctly, part of CSS: Core Concepts.
- View Offline
One of the biggest mistakes I see new web designers make is focusing a lot of effort into learning CSS without focusing on writing clean, semantic, consistent HTML. HTML defines the structure of your page and without a logical consistent structure, writing efficient CSS would be impossible. Before we get too far into how to use selectors to target page content, I want to take a moment to discuss a few best practices when authoring HTML. First, focus on the semantics. Make sure that the tag that you're using is appropriate for the content inside of it and that there isn't another element that expresses the content in a more meaningful way.
For example, if you're coding an author in a book review, use the blockquote element, not the paragraph. By using the correct element, your content will be easier for user agents to understand and easier for you to style. Second, be consistent with how you structure your content throughout your site. Let's say that you have sections of content that promotes specific products that will appear on several pages within your sites. In this example, you can see that the content region is structured in three different ways on each of the pages that it occurs on.
While it may look the same in the browser, and you can certainly style each one of these to look exactly the same, you wouldn't be able to style it as efficiently. Creating standards for how content should be structured and sticking with those standards throughout your site creates content they can be better understood by user agents and can be styled consistently with fewer styles. Finally, simplify your code where you can. Now I'm not about using non-semantic code for styling purposes from time to time, but avoid adding any unnecessary markup to your pages, especially just for styling purposes.
Too often I've seen elements wrapped in multiple div tags just to achieve a desired visual effect that could have been achieved without the added structure. I usually approach coding my sites with just the structure and content in mind. While that might give passing consideration to the visual design of the page, I'm more concerned with properly structuring my code and representing the content than I am with how the content is going to look. Now I've found that this allows me to create lean, standards-compliant pages without extraneous markup. Now at first glance it may seem that this approach limits what you can do visually, but I've found in fact it to be just the opposite.
When you have a lean page structure, it's much easier to write efficient styles that still style the page the way you want to. Now as I mentioned, you might occasionally need to tweak the code for your design, but the more I use this approach, the less tweaking I find that I need to do. Just keep in mind when coding your HTML that there is a direct relationship between the structure of your page and the structure of your CSS. Without clean, consistent HTML, it's very hard to create efficient styles to control your sites' presentation.
- Exploring default styling
- Writing a selector
- Setting properties
- Working with common units of measurement, including ems and pixels
- Structuring HTML correctly
- Understanding the cascade and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Styling container elements
- Working with RGB vs. HSL values
- Styling drop shadows