Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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
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