Cascading Style Sheets let you manage how your HTML looks so you can keep your HTML focused on the content.
I’ll explain how to use cascading style sheets, or CSS, to handle the presentation while your HTML can then focus on the content.
How does all this work and why do you need CSS to do it? Listen to the full episode or read the full transcript below to learn more. And if you like this episode and want more, you can click the link at the top of the page to become patron and choose your reward level.
Transcript
Have you ever seen an all-in-one tool? A hammer that dispenses nails, uses the handle to measure, and even has a built-in light so you can work in the dark? Okay, I’ve never seen one quite like that before but you know what I’m talking about. Tools like this might be somewhat useful but a well-made hammer that does just one thing will do a better job.
The same thing applies to HTML. The difference is that you get to choose how you use it. Will you use HTML like an unbalanced hammer that does everything and keeps breaking or will you use it for just one thing and let it do that one thing exceptionally well?
I’ll explain how to use cascading style sheets, or CSS, to handle the presentation while your HTML can then focus on the content.
First, what do I mean by content and presentation? Let’s say you have a web page for a blog article. All the text in the article, the images, even the comments make up the content. The author information, title, links to other pages are also content.
Now how that content looks is presentation. Is the title bigger than the article text? Bold? What color? The placement of the content is also part of the presentation. So is it centered? Is an image on the left side of the page or on the right?
Some aspects of the presentation can change too. Do you want an image to get bigger when the user moves the mouse over it? That’s presentation.
How does all this work and why do you need CSS to do it? CSS hasn’t always been available and web pages were able to be presented just fine before. But this gets back to the all-in-one tool. If you mix your presentation in with your content, then whenever you want to change the way your site looks, you’ll have to change all your HTML. If you have hundreds or thousands of HTML pages, this becomes too difficult and time consuming. Not to mention error prone.
But there’s another benefit to how CSS works that’s not possible when using only HTML. Even if you can get your HTML looking exactly the way you want it, you can’t add layers to it so that you can have it look one way and then another by overriding the presentation. This is what the C in CSS means. Cascading styles allow you to start with broad rules about how your HTML should look and change those rules as you get more specific.
You might be able to say that you want all hyperlinks to have a certain look but hyperlinks inside paragraphs should be treated special and look a bit different. You don’t have to throw away everything about how hyperlinks should look. You can change as much as you want whenever the situation calls for it.
This is why I wanted to explain trees and hierarchies before continuing with HTML and CSS. I’ll explain more in part 2 of this episode. Listen to the previous episodes to learn more about trees.
Instead of styling a paragraph directly in the HTML, you can write a rule in CSS that specifies how all paragraphs should look. Then if you want certain paragraphs to look different, think about what’s special about them. Do some paragraphs have special meaning in your page? This special meaning is content and belongs on the HTML file. How that special meaning translates into special presentation belongs in the CSS.
In order to use CSS effectively, you have to start with the HTML and make sure that it identifies HTML tags with meaning. This starts with first choosing the right tags in the first place. Don’t use heading and paragraph tags only throughout your page. Make use of the new HTML 5 semantic meaning tags to express the full meaning of your page.
Then think about anything that has an identity. Just like how a crowd of people usually has a few leaders that you can name. If there’s a single button on your HTML page out of all the other buttons that does something special, then give it an identity. This identity should be unique and an item can only have a single identity. You add an identity by using an attribute called id.
Once you’ve figured out the unique things, the next step is to think about groups. If you have an online shop, then you might want to treat each item for sale in the same way. This becomes a class and you add an attribute called class. The class attribute values are not unique and can be shared across as much of your content as you want. This is content because you’re not deciding how these things will look. You’re grouping them into classes based on a meaning that remains the same no matter how you decide they should look later. Unlike the id tag, the class tag can be used to add multiple class names. Back to the online shop, maybe you want everything for sale to have the class name sellable. But you also want to group the shirts into their own group separate from the shoes. A shirt would then have class names sellable and shirts while a shoe would have the classes sellable and shoes.
Once you have your HTML marked up with the proper tags, identified any unique elements, and tagged similar elements with class, then you can think about how you want them to look. I’ll explain exactly how this is done in part 2. For now, I’ll end with one last explanation.
Let’s say you have an HTML page with no cascading stylesheets yet. You’ll find that the browser already does some presentation for you. The headers will already be bigger than normal text, the hyperlinks will already have underlines, etc. This is because the browser has a default style sheet that it applies for you. You can have others.
The browser will apply the rules in its default style sheet and then look to see if you’ve given your own stylesheet. This is your opportunity to change how your browser displays content.
Then the author of the HTML page gets to specify the styles. And there’s 3 ways this can be done.
• The first is inline right at the place where some HTML element is declared. I see this as more of a style setting than anything to do with CSS. There’s no rule involved. It’s just a way to inject some styling right into the HTML. I normally try to avoid this.
• The second is to declare CSS rules in the head section of your HTML document. This is not as bad as the first method because at least the CSS is in its own section. But it’s still bundled together with the HTML file.
• The third method is to include one or more CSS files. This is also done in the HTML head section but now the CSS rules are completely separate and can be used in multiple documents.
When you put all these CSS files together, you get the layering or cascading that I talked about earlier.