CSS Styling

  • Introduction to Cascading Styling Sheets

    HTML Basic Elements

    This chapter continues with the tutorial started in the previous chapter. Use the code you developed in the previous chapter to continue following along here.

    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”>
        <b>
            <u>
                <i>Web Page Title</i>
            </u>
        </b>
    </font>
    
    

    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.

  • On-Page Anchors/Links

    One other common and useful feature is the ability to create links on a page to other portions of the same page. This is particularly useful when the page has to contain a large amount of information because it helps the user to navigate quickly to the data that they need. Follow along with the video below to learn how to create on-page anchors/links:

  • Extra Resources

    Do you want some more practice on HTML? Do you want to slow things down a bit from that video above? If so, consider completing the www.codecademy.com modules. First, navigate to the website, create an account or login via facebook/twitter/etc., then go to This website , or search for "make a website" on google. Complete Unit 2: A Closer Look at CSS.