Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I want to take a moment and discuss how CSS works with HTML structure, in hopes that it'll help you write more efficient CSS. I'm going to be referencing a lot of the selectors that we discussed in the previous movie, so if you haven't watched the Basic selectors movie yet, go back, watch it, and then come back to this one. Now remember that to style elements in your documents, you'll need to write selectors that target those elements. It should go without saying that if you don't have efficient logical HTML code, it's considerably more difficult to write efficient CSS.
CSS works with the structure of your HTML document, allowing the browser to parse the HTML code, find the right element, and style it accordingly. Having a well structured consistent HTML and being familiar with that structure makes it a lot easier to write the CSS for it. With that in mind, I want to give you a few best practices that you can follow when authoring HTML and talk about how this can impact to your CSS. First, don't use classes and ID attributes arbitrarily. And I'll take this example.
Here the author has used classes and IDs to define styling for each of the individual elements. As you can imagine, there are corresponding selectors in the CSS that define the element styling. Now, as far as functionality goes, this would work just fine, but it terms of proper HTML structure, this have some serious problems. You know, HTML should help define your content and give it meaning. Take this class, redText. You know, by itself it means absolute nothing.
In fact, this is one of the biggest mistakes that I see new web designers make. They rely too heavily on classes and IDs, and they end up with a considerable amount of unnecessary markup that's hard to maintain or update. Classes and IDs should be descriptive, and they should be used to add additional meaning to your markup. Now, take a look at an updated version of our example. Here, several of the classes and IDs have been replaced with descriptive values, and in other places, they've been removed altogether.
In fact, this structure can be styled with fewer CSS rules than before. The descriptive ID and class names also allow us to get a much clearer picture of exactly what we're styling in our document as well. Now you might also want to make sure that your HTML is structured consistently across your site. New authors often structure the same content in different ways on different pages. This makes it considerably more difficult to write global styles for the entire site. Now take this pull quote, for example. On one page it's structured within a div tag; on another page it's structured in a blockquote; and on this page, it's just represented in a normal paragraph.
To style this consistently across the site, you need several different rules that are essentially doing exactly the same thing. By establishing a guideline for how content should be structured and then making sure that you're consistent and following those guidelines, you can make the process of writing styles much easier for yourself. You know, the best piece of advice I can give you is to write your HTML so that you're giving clean, efficient structure to your content. As best you can, try to structure the code so that you're adding meaning to the content without even thinking about the styling.
Now this is sometimes difficult for new web designers and a little bit counterintuitive, as many visual designers code their pages with styling in mind. However, remember, the purpose of HTML is to provide a structure for your content that helps convey meaning. If you're able to do this for your content, you'll find that you end up with leaner, more descriptive code that is a lot easier to style. It also means that you'll find yourself having to modify your code for styling purposes much less frequently, if ever at all.
Understanding how selectors work and how they relate to your HTML document structure is a crucial part of writing CSS. If you focus on those concepts early in the process of learning CSS, you'll find that you write cleaner, more maintainable styles, and avoid a lot of the pitfalls that trip up many novice web designers.
Get unlimited access to all courses for just $25/month.Become a member
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.