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.
Welcome back! Now in this movie I want to check your solutions to our resolving conflicts lab with my finished files. Now again, remember in CSS there are often multiple valid solutions, so don't assume that if your solutions don't match mine that they are incorrect. In those instances compare why you made the decisions to structure the selector the way that you did with my own rationale and decide which one you prefer. So to go over these files, I'm looking in the 03_07 finished_files folder. I have the galleries.htm opened up, and I have the main.css open from the _CSS file.
Now I just want to preview this in my browser so I can kind of see what our finish files looks like. Okay so our styling here is correct now. We've got the proper styling here. We've got the proper styling in our headlines. The dates are showing up the way we want them to. Over here in the paragraphs in the sidebar, they're sized the way that we want them to. So everything is looking pretty good. All right, so I'm going to go back into my code and I'm going to talk about the solutions that I came up with. So I'm going to go to the main.css, and I'm going to start with our first task, which was applying global default styling.
I'm going to go down to line 72, and I can see that I took all of those properties that we needed and I placed them inside of just a generic everyday body element tag selector. It's a smart choice, because applying this styling to the body element means that it's inherited by everybody on the page that can inherit it. It's also a basic rule, so it's easy for interior rules to override it if they need to. It's also towards the top of my code, the top of my styles, so it's applied first and then any of the other selectors below it that need to override it can also do that through the cascade.
So there's a lot of thought that went into where it is located and then the selector that we are actually using there. The second task we were given was to deal with the conflicting styles down around line 244. We had the articles section styles conflicting with the page-specific styles. Now I'm going to scroll down and show you what I did there. Okay, so around 244, in this case around 253 or so, are my article styles. And before, you may have remembered that we had the #content ID selector as part of these as well.
Well, that is way too specific. Remember IDs are 100, so each of these had specificities of 102, 103--very, very high. So it was very difficult for these page-specific styles that come after it to overwrite them. So there are a couple of different ways that you could have solved this. One is that you could have made these selectors here more specific, but since they already use ID selectors, adding another layer of ID selectors to them and making them even more specific than this was probably not the right choice.
In this case, the right choice was to go in and reduce the specificity of these selectors, allowing them to now be overwritten by these more specific selectors. Now if I scroll down a little bit more, here is a rule that I wrote to target just the heading 2s inside the galleries page. Now there are also a couple of different ways that you could have solved this. Number one, you could've gone over to the galleries.htm and you could've written an embedded style for that page. Some of you may have done that. That was not wrong solution. That works just fine. It would have worked okay.
It would've overwritten any type of rule here that would have targeted the galleries h2 as well. But I'm of the mind if I don't have to use the embedded style, I don't want to; I want to avoid that. So using the same type of rationale that these other selectors are using, I combined the h2 selector with the galleries ID--notice that I use the descendent selector with the space between them-- and that way I'm only targeting the h2 that's inside of that galleries region, which is only going to occur on the galleries page, and you can see that right there, article ID galleries. Perfect.
Now the last thing that we needed to do was to target the paragraphs in the sidebar, and I wanted to limit the styling to the paragraphs that were in the contest region. So if I scroll down to about line 567, so where did I place this? I placed this rule inside the aside styles regions. That's really where it belongs and I just took it almost all the way down, you know, towards the bottom of those rules. Now the selector that I wrote is a p element selector that's used in a descendent selector with the .contest.
If you looked over the structure of these, you'll notice that each of these sections has a class of contest applied to it. Yes, there are other ways to do this. I could've done aside, space, p; that would work just fine. There are other selectors that would worked as well. But I like using the class selector here because it really refines the fact that this should only be applied when it's on those contest sections. So it was specific enough; it is in the right place, in terms of organization within the style sheet; and it targets exactly the element that I'm looking for. Excellent! Now there are a lot of different solutions for how you could've done that, so if you did it a little bit differently than I did, don't feel that it's wrong.
Again, just compare your logic with mine and see which one you like best. Now honestly, the absolute best way to reduce the amount of conflicts in your styles is through planning and organization. By knowing how your site is going to structured and developing a strategy for organizing styles based on that structure, you can eliminate many of the conflicts before they even happen.
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.