Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
Before we move on to our lab for this chapter, I want to take a brief moment and talk about a few techniques that you can use to help reduce styling conflicts when planning your styles. Now as I mentioned earlier, understanding the cascade, inheritance, and specificity are crucial to avoiding conflicts. They can also be put to good use in creating styles that are easy to maintain and reduce the amount of code necessary for your styles. First, avoid using local styles whenever possible. While it's true that embedded styles give you an easy way to override the global side-wide styling found in external style sheets, you're also going to add on a layer of unnecessary complexity to your sites.
When updating or modifying your styles, you have to remember each and every page that has embedded local styles. Once the size of your site starts to grow, this can become a very tedious task if you have a lot of embedded styles. It's also very easy to miss embedded styles, especially if you work in a team environment or are editing someone else's site. I'm not saying I don't use them; just to make sure that you carefully consider how the local styles fit into your overall site strategy. Second, avoid using inline styles altogether.
There's simply no compelling reason to use them, unless you're targeting a user agent like an email client that doesn't support other styling methods. They're almost impossible to detect, they can cause styling conflicts that make you want to pull your hair out, and they are a maintenance nightmare. Next before you begin writing styles, develop a strategy for rule specificity before you begin to write your styles. Now what I mean by that is that you don't want to mix in selectors that make heavy use of IDs in one section with selectors that use no IDs or just classes later on.
This creates an imbalance in selectors that can be difficult to overcome. Unlike some designers, I have no qualms about using ID selectors in my styles. I use them all the time. However, they're so specific that I have to really think about how I'm going to use them before I begin to write my styles. Overusing them can create a style sheet that becomes difficult to add styling to later on as the existing rules are so specific. A good rule of thumb is this: if you begin to find that you're consistently writing descendent selectors that use more than two selectors combined together, you've got a problem with your styles.
At that point, maybe take a step back and think about how you can reduce the specificity of your rules and still achieve the styling that you're looking for. Also, take advantage of inheritance. If you carefully consider the page structure and your styling goals before writing your styles, you should be able to identify formatting requirements that are consistent across pages and elements. These styles can be written as global styles on parent elements and inherited by their children. For you as an author, it means that there are fewer styles for you to write and editing those styles requires you to only make changes to a single rule, not multiple rules.
Now more than anything else, try to think about how your styles will relate to each other. The biggest mistake I see new designers make when writing CSS is to go through a page and style each element individually without thinking about how those elements relate to each other. This approach leads to bloated style sheets, conflicting styles, and unorganized styles that are just difficult to maintain and update. By thinking of your site and your styles as a whole before authoring them, you'll have a better idea of how those styles should be organized and how you can write them more efficiently.
There are currently no FAQs about CSS: Core Concepts.
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.