Preview
Video Player
00:00
00:00
Adding Content Using CSS
3:45The 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?
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