There are a few HTML elements that offer styling properties to their content. For example, you’ve learned the
<h1></h1> tag adds a bold font weight and larger font size. These are styling properties. Before HTML 5, the
<font> element existed which allowed greater customization of text. However, as users demanded greater styling capabilities, it became increasingly difficult to keep styles consistent across all pages in a website. For example, if website titles were large, bold, orange, underlined, and sans-serif, then the following code would have to be placed for every title on the site:
<font face=“Arial” size=“24” color=“orange”>
<i>Web Page Title</i>
As you can probably guess,
<b> = bold,
<u> = underline, and
<i> = italic. The
<font> tag is deprecated in HTML 5 so please erase it from your memory now! Because these tags had to be repeated everywhere, it was easy for websites to suffer from inconsistency and typos. For example, let’s say you used the above style for all 150 pages on your website. Then, your boss told you he didn’t like orange. As a result, you’d have to change your code in 150 different places. Cascading Style Sheets (CSS) are the answer.
CSS is another coding standard separate, yet congruent, with HTML. It allows you to specify a style one time—either in the HTML page or in a separate file—and then reference that style in each HTML tag where you want to use it. That way, if you change the style, you change it in one place. Then it cascades (ahhh, hence the name!) automatically into every HTML tag that uses it. Let’s try it out.
Follow along with the video below (which continues from the videos in the last chapter to learn about CSS. One thing not covered in these videos is how to comment in CSS. To comment in CSS is different than in HTML. In CSS, just use //Your Comment Goes Here.