Return to Video

More CSS text properties

  • 0:01 - 0:04
    Listen, folks.
    The CSS properties are never-ending.
  • 0:04 - 0:06
    Let me show you a few more.
  • 0:06 - 0:09
    What if I want to change
  • 0:09 - 0:12
    the spacing between the lines
    in my song lyrics?
  • 0:12 - 0:16
    I could use the `line-height` property,
  • 0:16 - 0:19
    and specify something like 15px.
  • 0:19 - 0:25
    Or maybe better would be 1.5em,
    that makes the line height
  • 0:25 - 0:28
    150 percent of whatever the text size was.
  • 0:28 - 0:32
    What if I want my song lyrics to be
    center-aligned?
  • 0:32 - 0:36
    I could use the `text-align` property,
    and specifiy `center`.
  • 0:37 - 0:39
    I could also change it
    to `right`, or `justified`,
  • 0:39 - 0:42
    though I think that would look a bit odd.
  • 0:42 - 0:45
    What if I want to underline
    my main paragraph?
  • 0:46 - 0:49
    I could use the
    `text-decoration` property
  • 0:49 - 0:52
    and specify `underline`.
  • 0:53 - 0:57
    What if I want to remove the underline
    from my links,
  • 0:57 - 0:58
    like that link to Wikipedia?
  • 0:59 - 1:01
    Well, the browser has
    a default set of styles
  • 1:01 - 1:03
    that it applies to everything.
  • 1:03 - 1:05
    Like `text-decoration: underline`
    for links.
  • 1:05 - 1:09
    But we can use CSS to override
    the browser's default styles,
  • 1:09 - 1:11
    and say `text-decoration: none`.
  • 1:12 - 1:19
    Just add this rule here:
    a { text-decoration: none; }
  • 1:20 - 1:23
    And you see now
    it's no longer underlined.
  • 1:23 - 1:25
    But we should be careful when we do that,
  • 1:25 - 1:28
    because the defaults
    are usually picked for a reason.
  • 1:28 - 1:31
    If links aren't underlined,
    how will people know that they're links?
  • 1:31 - 1:35
    What if they never click them because
    they think they're just normal text?
  • 1:35 - 1:39
    If we do remove that underline,
    we should be making sure
  • 1:39 - 1:42
    that the links look
    significantly different in some other way.
  • 1:42 - 1:44
    Otherwise, we'll make users sad.
  • 1:44 - 1:46
    And sad users make me sad.
  • 1:46 - 1:48
    They should make you sad, too.
  • 1:49 - 1:52
    I could tell you
    about text properties all day.
  • 1:52 - 1:54
    But I won't, because
    we have so much more to cover.
  • 1:54 - 1:56
    There are hundreds of CSS properties.
  • 1:56 - 1:58
    And browsers are adding more
    every year.
  • 1:58 - 2:01
    I probably won't ever tell you
    about all of them.
  • 2:01 - 2:03
    But hopefully I can tell you enough
    to get you excited.
  • 2:03 - 2:06
    And then if you're wondering
    if there's a CSS property for some style
  • 2:06 - 2:08
    and it's not in our documentation here,
  • 2:08 - 2:11
    you can just visit
    your local search engine and find out.
  • 2:11 - 2:13
    For example, if you're wondering
  • 2:13 - 2:15
    if there's a way
    to add a drop-shadow to your text,
  • 2:15 - 2:18
    just search "CSS text shadow"
    on the Internet,
  • 2:18 - 2:19
    and you'll see lots of results.
  • 2:20 - 2:22
    Generally, being able
    to search the Internet
  • 2:22 - 2:23
    for answers to your questions
  • 2:23 - 2:25
    is a really important skill
    for a web developer.
  • 2:25 - 2:28
    Because so many people
    have had the same questions as you,
  • 2:28 - 2:32
    and 99.9 percent of the time,
    the answer is out there.
  • 2:32 - 2:35
    You just have to get good at finding it.
Title:
More CSS text properties
Description:

more » « less
Video Language:
English
Duration:
02:35

English subtitles

Revisions