208: CSS: Cascading Style Sheets Tutorial. Part 1.

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&#