209: CSS: Cascading Style Sheets Tutorial. Part 2.

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 usua