CSS 103 - Colors and Fonts

"It's a type thing. You wouldn't ampersand."
a pigment of your imagination
  1. Types of Colors

    There are a couple of different ways to describe colours in CSS. These include color names, hex and rgba.

    #one
    #two
    #three
    #one
      background-color: red
    #three
      background-color: #FF0000
    #two
      background-color: rgba(255, 0, 0, 1)

    color names

    Color names are a set of default colors that can be used by name alone. View the full list here. We will not usually use these as we often have set colors, however color names can be useful for quick testing.

    #one
    #two
    #three
    #one
      background-color: aqua
    #three
      background-color: blue
    #two
      background-color: orange

    hex color

    Hex is a color descriptor starting with a # followed by 3 or 6 digits. It is split up in to a mix of red, green and blue. The first digit in a 3 digit number is the amount of red. The second the amount of green. The third the amount of blue. If there are 6 digits it is the first, second and third pair of digits respectively. The number is in base 16 so digits can range from 0 to F. The letters can be capitals or lower case.

    #one
    #two
    #three
    #four
    #five
    #one
      background-color: #4c9aff
    #three
      background-color: #36B37E
    #two
      background-color: #FF5630
    #four
      background-color: #998DD9
    #five
      background-color: #FF8B00
    #six
      background-color: #FFBDAD

    rgba color

    RGBA is much like hex expect that its digits run from 0 to 255 and it has an extra "alpha" component to determine the opacity. This value ranges from 0 to 1 (1 being completely opaque, and 0 being invisible).

    #one
    #two
    #three
    #four
    #five
    #one
      background-color: rgba(76, 154, 255, 1)
    #two
      background-color: rgba(54, 179, 126, 1)
    #three
      background-color: rgba(255, 86, 48, 1)
    #four
      background-color: rgba(76, 154, 255, 0.75)
    #five
      background-color: rgba(54, 179, 126, 0.5)
    #six
      background-color: rgba(255, 86, 48, 0.25)

    stylus variables and alpha

    In stylus there is an alpha filter which allows you to set an alpha value to a predefined variable color.

    #one
    #two
    #three
    $wildcard1 = #998DD9
    $wildcard2 = rgb(255, 139, 0)
    $wildcard3 = #FFBDAD
    #one
      background-color: rgba($wildcard1, 1)
    #two
      background-color: rgba($wildcard2, 0.5)
    #three
      background-color: rgba($wildcard3, 0.1)
  2. Applying Colors

    There are a couple of different ways to assign colors to objects. These include `background-color`, `color`, and `border-color`. `background-color` sets the background of an element. `color` sets the font color and the `border-color` if the `border-color` is not explicitly set. `border-color` specifies the border color.

    #one
    #two
    #three
    #four
    #one
      background-color: #101623
      border: 3px solid
    #two
      background-color: #101623
      color: #FF5630
      border: 3px solid
    #three
      background-color: #101623
      color: #FF5630
      border: 3px solid
      border-color: #998DD9
    #four
      background-color: #101623
      color: #4C9AFF
      border: 3px solid #998DD9

    Elephants are polyphyodonts

    A moment is a medieval unit of time equal to 1.5 minutes

    Koalas sleep up to 20 hours a day

    A cricket's ears are on its front legs just below its knees

    Pop Quiz! Why is the font and border in the first element white?
  3. Font families

    Fonts are set through the `font-family` property. There are a couple of standard fonts that can be used. It is wise to define fall back fonts, so that if one font is not available through a particular browser the next font type is used. In a `font-family` declaration the first defined font will be used first unless it is unavailable then the second is used and so on.

    #one
    #two
    #three
    #four
    #one
      font-family: serif
    #two
      font-family: sans-serif
    #three
      font-family: Arial, serif
    #four
      font-family: "Comic Sans MS", sans-serif

    An average worker bee makes only about 1/12 teaspoon of honey in its lifetime.

    It's taken approximately 1,009,491 days to build Rome.

    The foggiest place in the world is the Grand Banks off the island of Newfoundland.

    Ice Cream sundaes were invented when it became illegal to sell ice-cream sodas on a Sunday in Evanston.

    The ADG3 font family set is: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

    #one
    #one
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

    A group of finches is called a charm. A group of foxes is called a skulk or leash. A group of frogs is called an army or colony. A group of geese is called a flock, gaggle or skein.

  4. Font Attributes

    There are a couple of different font attributes that can be set. These include size, weight and style. These are set through the properties `font-size`, `font-style`, and `font-weight`.

    font size

    `font-size` can be set in px, em/rem, pt and %. px and pt are independent of the rest of the page whereas em/rem and % are relative to either the `font-size` of their parent element or the root element. em is the current font size of the parent element, so a font of size 2em would be twice as large as the current font size of the parent element. On the other hand % is the percentage of the current font size of the parent element, 100% being the full size of the font. Some of the variation in sizes can be seen below.

    #one
    #two
    #three
    #four
    #one
      font-size: 12px
    #two
      font-size: 12em
    #three
      font-size: 12pt
    #four
      font-size: 12%

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    font-weight

    `font-weight` represents the thickness of the font. This can be set both numerically in increments of 100 and with "bold/bolder/lighter/normal". Depending on the font some of the weight settings may not have an effect.

    #one
    #two
    #three
    #one
      font-weight: 900
    #two
      font-weight: 600
    #three
      font-weight: lighter

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    font-style

    Lastly `font-style` allows font to be set in italic, oblique or normal. Oblique is generally the font literally shifted on an angle, whereas italic is a specific version of the font created by the designer. If the italic font face has been called for but it does not exist then CSS will use the oblique font face and vice a versa.

    #one
    #two
    #three
    #one
      font-style: italic
    #two
      font-style: normal
    #three
      font-style: oblique

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

  5. Text decorations

    There are three attributes that decorate text - `text-align`, `text-decoration`, and `text-transform`.

    Text-align

    `text-align` can be set to left, right, center and justify.

    #one
    #two
    #three
    #four
    #one
      text-align: left
    #two
      text-align: right
    #three
      text-align: center
    #four
      text-align: justify

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    Text-decoration

    `text-decoration` can be used for line-through, overline and underlining text.

    #one
    #two
    #three
    #four
    #one
      text-decoration: line-through
    #two
      text-decoration: overline
    #three
      text-decoration: underline
    #four
      text-decoration: overline underline

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    Text-transform

    `text-transform` can change the case of text. Lowercase, uppercase, and capitalize are all options.

    #one
    #two
    #three
    #four
    #one
      text-transform: none
    #two
      text-transform: lowercase
    #three
      text-transform: uppercase
    #four
      text-transform: capitalize

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

  6. Font Spacing

    `line-height` and `letter-spacing` are two other attributes that can be set. Letter spacing determines the amount of space between individual characters whereas `line-height` sets the space between lines of text. Line height cannot be set to a negative number. If no units are given it is based off of the `font-size` e.g. 2 becomes a `line-height` twice the size of the font.

    #one
    #two
    #three
    #four
    #one
      letter-spacing: 5px
    #two
      letter-spacing: -1px
    #three
      line-height: 14px
    #four
      line-height: 2

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    The quick brown fox jumped over the lazy dog.

    `line-height` is very useful when trying to center text vertically. To do this set the `line-height` equal to the `height` of the container in which you are trying to center text.

    #one
    #one
      height: 150px
      line-height: 150px
    The quick brown fox jumped over the lazy dog.

Exercises

  1. Make some pretty fonts

    • Create a new blank prototype named "css103-a"
    • Create four paragraphs with the same class in your index.pug
    • Give that class name a font-size and a font-family in your style.styl
    • Set a color either for the text or the background of the paragraph.
    • Answers:

      link(href='style.styl' rel='stylesheet')
      p.message I like cats
      p.message I like dogs
      p.message I like birds
      p.message I like carrots
      .message
        font-size: 30px
        font-family: Arial, sans-serif
        background-color: red
  2. Make some more pretty fonts

    • Create a new blank prototype named "css103-b"
    • Create an h4 title, a div with the class `subtitle`, and a p tag. Fill each with some dummy text.
    • Give the title an underline, a bigger font and a font-family
    • Set the subtitle to be in italics and make the font grey. You can also set the font-family and size.
    • Center the text inside of the p tag. Set the font-family and a background-color.
    • Answers:

      link(href='style.styl' rel='stylesheet')
      h4 My first blog post
      .subtitle Musings of a prototyper
      p
        | I once wrote a poem.
        br
        | It was the opposite of solemn.
        br
        | It was full of glee and happiness.
        br
        | But I was overcome by sloppiness,
        br
        | And dropped it off a roof.
        br
        | It disappeared with a poof.
      h4
        font-size: 30px
        font-family: sans-serif
        text-decoration: underline
      
      .subtitle
        font-family: serif
        font-style: italic
        font-size: 20px
        color: grey
      
      p
        font-family: Arial, sans-serif
        background-color: whitesmoke
        text-align: center
  3. Make more pretty fonts... please

    • Create a new blank prototype named "css103-c"
    • Create a div with a `hashtag` class, setting the height to 30px
    • Set the display type to inline-block, and give the tag a background-color
    • Give the hashtag some left and right padding
    • Set the font-size to 14px and give the font some thickness. Also set a sans-serif font family.
    • Vertically align the text so it appears in the middle of the hashtag.
    • Answer:

      .hashtag #selfie
      .hashtag
        height: 30px
        background-color: orange
        font-size: 14px
        display: inline-block
        padding: 0 5px
        font-weight: 600
        color: white
        font-family: sans-serif
        line-height: 30px
      
  4. Recreate the text in this sketch file.

    Create a new blank prototype named "css103-d". Use the attributes set in the sketch file to recreate it in pug and stylus. Right-click "Copy CSS attributes" is useful here. Only recreate the text on the confluence page itself, not the sidebar and context icons. Do try to center it in a page as it appears. Use the ADG3 font-family. The tag can be done as a bonus point, but otherwise just style it as normal text.

    Sketch won't give you all of the appropriate values, but it will help with many of them. Make sure you carefully compare the two to catch everything!


    Answers:

    link(href='style.styl' rel='stylesheet')
    .page
      .header
        .title Marketing Plan
        .sub Created by Emma Paris 13 minutes ago
      .content
        p I believe most marketers today spend 90% of their efforts on outbound marketing and 10% on inbound marketing, and I advocate that those ratios flip.
        p.highlight When I talked with  today about how they generate leads and fill the top of their sales funnel, she suggest most do trade.
        p Today, marketers can do their own research online and can find a variety of educational resources through search engines, social media, and other online channels.
        .subtitle Outbound marketing
        p
          | The best analogy I can come up with is that traditional marketers looking to garner interest from new potential customers are like lions hunting in the jungle for elephants.
          | The elephants used to be in the jungle in the '80s and '90s when they learned their trade, but they don't seem to be there anymore.
    body
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
      color: #172B4D
    
    .page
      width: 600px
      margin: auto
      margin-top: 25px
    
    .header
      margin-top: 25px
      margin-bottom: 32px
      .title
        font-size: 24px
        letter-spacing: -0.7px
        line-height: 28px
        font-weight: normal
        margin-bottom: 12px
    
      .sub
        color: #5E6C84
        font-size: 12px
        line-height: 16px
    
    p
      font-size: 14px
      line-height: 24px
      letter-spacing: -0.13px
      margin-bottom: 20px
    
    .highlight
      color: #F6A623
    
    .tag
      display: inline-block
      background-color: #EBEDF0
      border-radius: 20px
      color: #0052CC
      line-height: 18px
      padding: 0 5px
    
    .subtitle
      font-size: 20px
      line-height: 24px
      margin-bottom: 20px
      margin-top: 34px