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.

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? Listen to the full episode 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.

No comments yet.

Leave a Reply