Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
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.
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.