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.
For the remainder of this chapter, I want to focus on selectors. Now as I mentioned before, selectors allow us to target elements on the page, and we have a lot of selectors available to us through CSS. We are going to explore the majority of these selectors individually in just a moment, but for this movie, I want to start with perhaps the most basic selector, and that is the element selector. Now the element selector allows you to target content on the page based on the element that contains it. It's an extremely powerful selector, but as we're going to see, it's also a very broad one.
So I have the element-selector.htm file open, and I can find this in the Chapter 2/02_02 folder in our exercise files. This is an HTML5 document, so one of the things that I have here is I have a conditional comment: if less than IE 9, and I point out to Remy Sharp's html5shiv, which is hosted by Google code. The only thing this really does is it helps older versions of Internet Explorer display those particular HTML5 elements. So that's really why it's there. You will see it consistently throughout the site. It has nothing to do with our CSS, and I don't really need it unless I was going to test this in an earlier versions of Internet Explorer.
Now after that, I have got a section of embedded styles where we are going to write the majority of our code. All of our exercise files will be done, the majority of the time locally, sometimes we use external styles, but it's really just about writing the styles more than it is where they are located at this point. And I notice that I have a couple of styles already in the style sheet. Essentially, I am taking some of the HTML5 elements, making sure they are displayed properly, and then I am also formatting one of the elements on the page, the aside, so that it appears at a certain width, has a border around it, and has a little bit of padding inside of it, just to sort of set that area apart.
So that's really all those styles are doing. And then the styles what we are going to add are right under this comment that says /*add styles here*/. Here the page structure itself is really simple. We have a heading 1, followed by a couple of paragraphs, then a heading 2, another paragraph, and then here is our aside. And if you haven't worked with HTML5 yet, an aside is very much like a sidebar. It's just sort of related content on the page. We have the heading 2 inside that with a paragraph inside of it. It's a very simple structure. Okay, so let's go ahead and start writing some styles. I am going to right up to this area that says "add styles here," and the first element selector I am going to write is body. So when you write an element selector, the easiest way to do this is just look at the tag that you want to target.
So here there is my body tag. And I just write that selector the exact same way without the brackets around it. And that is really all an element selector is. So I am going to open up my curly braces and inside that I am going to declare font-family: Arial. So again, notice the colon and the semicolon after the colon between the property and the value and the semicolon after the value. And then one more, font-size, and I am going to make that 90%. So I'm telling it to be a little bit smaller than the default font size for the browser or device.
Next, I am going to go through and create a couple more element selectors. So after body, I'm going to hit Return. Again, make sure that you're outside of those curly brace when you do this; you don't want to be still inside of that. I am going to type in h1, and I am just going to go ahead and do font-family: Georgia--so we are changing that up a little bit--and I am going to do font-size, 1.8em, and font-weight, normal. So those are the h1s. Now if I wanted to target my h2s, again, very simple to do, just h2, without the angle brackets around it.
And for this one we will do something similar: font-family: Georgia. font-size will be a little different. That will be 1.4 ems, and font- weight is going to be normal. Feel free to play around with some of these settings. If you want to test of some these properties and what they are capable of, go ahead and type in different values and see what happen formatting-wise. Finally, all the paragraphs, I am going to target them using a P element selector, so just switch P for the paragraph tag, and font-size there is going to be 1em, color is going to be brown.
And I am going to go ahead and save that, and I am going to preview that in one of my browsers. When I do that I can see my headings are in Georgia. The rest of my page is in Arial. All of my paragraphs are brown, and my headings are slightly different size, depending upon which heading I am looking at. This illustrates a couple of points about element selectors. Number one, they are very easy to use. Number two, they does have some limitations. Now take this page. What if we wanted the paragraph down here inside of the aside to have a center text alignment or be different color or size? Well, there is no way to do that by just using element selectors.
Element selectors are extremely global in nature, meaning they are going to accord every single instance of that element on the page. So they are best used for applying styles that need to be consistent across all pages, or for applying sort of initial baseline formatting that can then be overwritten as needed with more specific selectors.
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.