Cascading Style Sheets let you manage how your HTML looks so you can keep your HTML focused on the content.
To get the most benefit from cascading style sheets, you need to start with the HTML. Make sure that you’ve done four things:
- Create meaningful HTML with all the proper tags. If you’re writing an article, then use an article tag. Listen to episode 198 about semantic meaning for more information.
- Don’t worry about styling your HTML directly. If you display it in a browser now, it’ll look boring and plain. That’s actually good because it’ll let you do all the styling in the CSS files. By the way, if you’ve ever visited a website and the content was all jumbled up with a plain background and simple black text, then what likely happened is that the CSS files failed to load. Maybe the web server was too busy at that moment. Usually, refreshing the page will help unless there’s a bigger problem.
- Identify important single elements in your page. If you have a single search button and maybe a single login form, then make sure they have unique identity attributes.
- Identify the common groups of elements with class attributes. These don’t have to be unique and elements can have more than one class. The class attribute itself can’t be repeated inside an element. But it can have multiple values inside the value quotation marks. Each class name should be separated with a space. This means that you can’t include spaces in your class names or you’ll end up declaring separate classes for each word.
Listen to the previous episode for more information about CSS especially if you want to better understand the difference between content and presentation. Continue listening to this episode to learn more about how CSS applies styling to specific parts of your HTML using rules that consist of selectors and descriptors. You can also read the full transcript below.
Transcript
To get the most benefit from cascading style sheets, you need to start with the HTML. Make sure that you’ve done four things.
• First, create meaningful HTML with all the proper tags. If you’re writing an article, then use an article tag. Listen to episode 198 about semantic meaning for more information.
• Second, don’t worry about styling your HTML directly. If you display it in a browser now, it’ll look boring and plain. That’s actually good because it’ll let you do all the styling in the CSS files. By the way, if you’ve ever visited a website and the content was all jumbled up with a plain background and simple black text, then what likely happened is that the CSS files failed to load. Maybe the web server was too busy at that moment. Usually, refreshing the page will help unless there’s a bigger problem.
• Third, identify important single elements in your page. I’ll explain elements in just a moment. If you have a single search button and maybe a single login form, then make sure they have unique identity attributes.
• And fourth, identify the common groups of elements with class attributes. These don’t have to be unique and elements can have more than one class. The class attribute itself can’t be repeated inside an element. But it can have multiple values inside the value quotation marks. Each class name should be separated with a space. This means that you can’t include spaces in your class names or you’ll end up declaring separate classes for each word.
Listen to the previous episode for more information about CSS especially if you want to better understand the difference between content and presentation.
Alright, elements. I’ve left this topic out for long enough. I might sometimes say tag when I mean element. The two concepts are similar. Episode 196 describes how markup works and introduces tags. I’ll summarize just a bit here so you can understand the differences between a tag and an element. Tags usually come in pairs.
• There’s an opening tag with the tag name and attributes. The attributes each have a name followed by an equal sign and then a value in quotation marks. This whole thing is enclosed inside angle brackets.
• Then there’s some content which could be other nested opening and closing tags with their own content.
• And finally, there’s a closing tag with a tag name that matches the opening tag. The closing tag has no attributes and is also enclosed in angle brackets. You also place a forward slash right after the opening angle bracket so the browser know this is an end tag.
• For tags that are single, with no end tag, then you place a forward slash right before the closing angle bracket. This tells the browser to not expect a matching end tag.
Some tutorials will introduce elements right from the beginning. But until you understand trees, I don’t think you’ll get the full understanding of what’s going on. An element is the combination of the opening tag, the content, and the closing tag. The whole set from opening to closing and everything in between is an element.
Because the content can have opening and closing tags, that means that the content can also have elements. So you have elements containing elements. This is a tree. And you can follow a path of tag names into a tree. So if you have a path of body article, that means the body element contains at least one article element. That doesn’t mean the article has no further elements. It just means that the path only identifies the tags in the path. There could also be other elements that match the same path. If the body has two or more articles, then the same path identifies all of them.
You can also have a path that doesn’t match any elements. That’s okay and just means the path will not match anything. Longer paths are more specific.
One more thing about paths is that they don’t have to start at the top of the tree. The earlier example I gave of body article starts at a body element. There’s only one body element so this is almost like starting at the top html element. But you can also have a path like div div. This will match any div element in your html document that has a parent div element.
The reason I’m explaining paths is because when you want to apply styling to your document, you have to be able to target that style. In other words, you have to be able to say which parts of the document should get that style.
When you create a CSS file, you write rules. Each CSS file can have as many rules as you want. And each rule consists of two parts, a group of one or more selectors and a group of one or more declarations. Each selector acts a bit like a path in a tree but it’s a lot more flexible. This is the part that determines where the rule will apply. If a rule has more than one selector, you separate them with a comma. I’ll come back to the selectors in a moment.
The descriptors go inside opening and closing curly braces. It’s common for a rule to have many descriptors and they need to be separated with a semicolon. In practice, it’s recommended to place each descriptor on its own line and end each one with a semicolon. This makes it easy to read the CSS.
The job of each descriptor is to specify a particular style to apply and the value. So each descriptor includes a property name and a value. You separate the property name and the value with a colon. For example, a descriptor that says color : green will set the text color to green. When a rule applies, then all the descriptors inside the curly braces will apply.
Okay, back to the selectors. You know about tree paths already. So how is a selector different? Let’s say we have a path body paragraph. Now when I say paragraph, I’m really talking about the p tag. A path of body paragraph will match any paragraph that’s a direct child of the body element.
The same thing as a CSS selector will match all paragraphs anywhere in the body element. They don’t have to be a direct child of the body. But this is where selectors can be more flexible. If you really do want to match just paragraphs directly under the body, then you write your selector as body > paragraph. It sort of looks like body is pointing to the paragraph.
A selector is not limited to parent child relationships like a path either. Let’s say you have a selector that reads div + paragraph. This will match any paragraph that immediately follows a div element as a sibling. That means both the div and paragraph have the same parent and the paragraph is the next child element right after the div element.
As if all that wasn’t enough, here’s where a CSS selector really starts to show its ability. You can include ids, classes, attributes, and even something called pseudo-classes.
If you want to select a particular id, you write the selector with a hash sign followed by the id value. So #mainarticle would match any element with an id attribute set to mainarticle.
To match a class name, use a dot followed by the class name.
And you can combine these with tag names. So the selector div.shoes would match any div element in your document that has a class attribute called shoes.
To match any attribute name or value and not just the id or class attributes, you put the attribute information inside square brackets.
And finally, pseudo-classes give you a way to match elements based on information outside of the document. Let’s say that a user has previously visited a particular link. The browser will know about this through its history. But this information is not included in the HTML document. If you write a selector that says a:visited, then it’ll match only those links that the user has already visited. There’s lots of pseudo-classes you can use.
This episode barely scratches the full power of CSS. I recommend that you refer to CSS documentation to learn about everything you can do. It should also help you to better understand where all the colons, semicolons, angle brackets, etc. all need to go.
I’ll end with one last thing about CSS. What happens if two or more rules match the same element? This is where the cascading aspect of CSS enters again. I described one aspect of cascading in the previous episode. You can have multiple CSS files and it’s likely that rules will conflict and overlap with each other. This is even possible within a single CSS file.
The first thing to understand is that some styles will be inherited down the tree. So if you set the color to green on the body, then this will apply to all the text in all the other elements inside the body. If you set the background of the body to some image, then it might look like it applies to all the child elements but that’s really just their own transparent background that allows the body background to show through.
What if you have the body text set to green and then another rule sets the article text to black? The article would normally inherit the green text from the body but because another rule specifically sets the same style to black for articles, then it wins. In general, the more specific a selector is, the better its chances of winning any conflicts.