< Return to Video

CSS font styles

  • 0:01 - 0:03
    Let's see what else we can change
    about the font.
  • 0:03 - 0:06
    What if we want
    this first paragraph to be bold?
  • 0:07 - 0:09
    We could wrap the whole paragraph
    in a `` tag.
  • 0:10 - 0:12
    But that would be kind of an abuse
    of a `` tag.
  • 0:13 - 0:14
    We're not really trying to say
  • 0:14 - 0:16
    that the whole first paragraph
    is a highlight.
  • 0:16 - 0:19
    We just think it might look better bolded.
  • 0:19 - 0:22
    So instead, we should use
    a CSS property: `font-weight`.
  • 0:22 - 0:28
    Let's go up to the relevant CSS rule,
    and say, `font-weight: bold`.
  • 0:28 - 0:29
    Ta-da! It's bold.
  • 0:30 - 0:35
    Now, what if we want to make
    all of these lyrics italicized-- slanted?
  • 0:35 - 0:38
    Once again, we could wrap them all
    in an `` tag,
  • 0:38 - 0:42
    because the browser always defaults
    to giving `` italicized style.
  • 0:43 - 0:44
    But we shouldn't do that,
  • 0:44 - 0:47
    because that's kind of an abuse
    of the `` tag.
  • 0:47 - 0:49
    We're not trying to emphasize
    the whole song.
  • 0:49 - 0:52
    We just think
    it might look better italicized.
  • 0:52 - 0:56
    So instead, we should use
    a CSS property: `font-style`.
  • 0:56 - 1:00
    Let's go up to our relevant rule,
    `song-lyrics`,
  • 1:00 - 1:03
    and say,
    `font-style: italic`.
  • 1:04 - 1:06
    Okay, great.
  • 1:06 - 1:09
    Notice that we have a bunch
    of font-related properties
  • 1:09 - 1:10
    in one rule for our lyrics.
  • 1:11 - 1:14
    We've got `font-family`, `font-size`,
    and `font-style`.
  • 1:14 - 1:19
    If we want, we can actually bundle them up
    into a single property: `font`
  • 1:19 - 1:24
    by just writing:
    `font: italic 13px fantasy;`.
  • 1:25 - 1:29
    Okay, and we can delete
    the three properties that we used to have
  • 1:29 - 1:31
    and everything looks the same.
  • 1:31 - 1:36
    This is called a "shorthand property",
    since as you can see, it's a lot shorter.
  • 1:36 - 1:38
    But me, I don't like it.
  • 1:38 - 1:41
    Because I always forget what order
    to write the properties in,
  • 1:41 - 1:44
    and it's just easier
    if I write them out one at a time.
  • 1:44 - 1:47
    So I'm going to bring back
    what I had before.
  • 1:48 - 1:52
    It's up to you-- if you're a
    "shorthander" or a "longhander".
  • 1:52 - 1:55
    The important thing
    is to stay stylish.
Title:
CSS font styles
Description:

more » « less
Video Language:
English
Duration:
01:56
Josh Kline edited English subtitles for CSS font styles

English subtitles

Revisions