Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Enhancing Design with CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Adding Content Using CSS

3:45 with Anwar Montasir

The title of this video, Adding content using CSS, might sound a bit odd at first. After all, aren’t developers supposed to keep the content layer, presentation layer, and behavior layer of a web page separate? And isn’t HTML strictly for content, and CSS strictly for presentation? Why would we ever use CSS to add content?

Vocabulary

symbol entities: codes for creating special characters not found on your keyboard

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    The title of this video, "Adding Content Using CSS", might sound a bit odd at first. 0:00
    After all, aren't developers supposed to keep the content layer, 0:07
    presentation layer and behavior layer of a webpage separate? 0:13
    And isn't HTML strictly for content and CSS strictly for presentation? 0:17
    Why would we ever use CSS to add content? 0:24
    And you're exactly right, except that the rules 0:29
    are a little different when you're creating something purely decorative. 0:32
    One example you might have encountered already is the alt attribute, 0:37
    which describes images to users of screen readers, or 0:42
    devices that read web content out loud to users with disabilities related to vision. 0:46
    If your image is purely decorative screen readers don't really need to 0:52
    know about it. 0:57
    So that's an edge case where it's acceptable to 0:58
    leave the alt description blank. 1:02
    Similarly, what if I wanted to create a down arrow under my 1:05
    heading that reads Lake Tahoe, California. 1:09
    There's no real benefit to letting screen readers know about the arrow. 1:13
    It's just a decorative touch to move the viewers attention 1:17
    downward after they've seen the header. 1:22
    We can insert content using CSS, either before or after an element 1:25
    by using two CSS pseudo-elements conveniently called before and after. 1:31
    Let's use the after pseudo-element to insert content after our h1. 1:39
    That looks pretty funny, 1:59
    especially because the new text is on the same line as our heading. 2:01
    Changing the display value to block should place the text on a separate line. 2:06
    Now here's something interesting, I'm going to exit device mode for 2:18
    just a moment. 2:23
    So I can select this text with my mouse, or at least try to. 2:24
    You'll notice I can select the original heading, but 2:30
    not my new text inserted with CSS. 2:34
    The new text isn't really part of the webpage content, 2:43
    it's just a visual flourish. 2:47
    That's why screen readers will ignore it. 2:49
    Of course, hello world was just a placeholder. 2:53
    Using a link I've provided in the teachers notes, we can explore a huge 2:57
    variety of arrow shapes that can be created using symbol entities, 3:02
    which are codes for creating special characters not found on your keyboard. 3:07
    To insert one of these special characters, 3:12
    we need to choose the CSS entity, which is the last value listed. 3:16
    CSS entities start with a backslash and contain four characters. 3:21
    I'll try copying the first down arrow I see and 3:26
    replacing our placeholder text with it. 3:29
    Cool, right? The arrow inherits the same text shadow applied to our h1, 3:36
    which is a nice effect. 3:41

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up