Skip to content

Day 4

Jump to bottom
Matt Enlow edited this page May 19, 2014 · 10 revisions

Itinerary

0900

Project! Setting the text on your Multipage website

Keep using the files you set the colors on previously. Now, add some new rules.

the h1

Give your h1 "double spacing" with a line-height of 200%. Give it a font-family of your choice, with a fallback. Apply a text-shadow, play around to find something you like. I recommend a color of #CCC.

h2s

Try aligning your h2s in the center, and giving them the same font as your h1

Paragraphs

Give your paragraphs an indentation of 3em or so. Try giving them a font size that's just under the normal, or just over if you prefer. ie, a .9 or 1.1 em

Lists

Make your ul / ol / dl, whichever, have a font-weight of bold. We're going to use inheritance here to let the list-items pick that up from their parent.

0930

Complex selectors
  • , the comma selector, "AND"
  • the class attribute and .
  • the id attribute and #
  • naming things
  • descendant selector:
  • span

10:30 (Don't forget to take a break)

Mini-Project!

Give a "featured" class to some (but not all) of your list items. Then write a selector that "calls-out" those items, perhaps by turning them red-ish (#C70000).

Check out your handiwork.

Next up, choose a special phrase in your text. Maybe it's your name or some other combination of words that are significant. Wrap that phrase in a span, give it a class, and write a selector on that class that makes the font bold and large.

The "Cascade"

or, CSS's rules of precedence

Browser defaults < External < embedded < inline < attributes

11:30

Github

Introduction to Github and git.

1300

More CSS
  • Border
    • width
    • style
    • color
    • TRBL
  • Padding
    • TRBL
    • 1, 2, 3, 4 arguments
Mini-Project!

Headings

  • Working with your MPWS, put padding on the h1 (15px looks pretty nice)
  • Give your h2s a 2px, dashed bottom border with a color of your choice

Footer

  • Put a top border on your footer. Make it a solid, "thin" border with a lighter gray color like #aeaed4
  • Give the footer a bit of padding on the top, around 10px should be good.
  • Try lightening up your footer's text if it's copyright, by changing its color from the default #000 to #333.

1400

More Html5
  • figure
  • figcaption
Mini-project
  1. Grab an image off of [unsplash.com].
  2. Create a new html file and inside of there place a figure, img (to your unsplash photo) and a caption (figcaption)
  3. Get your image under control - put a css width on it.
  4. Put padding and border on the figure as well
  5. Choose a nice font to go with your image, and center the caption.

1430

Fancy Properties
  • border-radius
  • box-shadow
  • opacity
Background images?!?!
  • background-image
  • background-repeat
  • background-position
  • background-attachment
  • background-image
  • background-clip
  • background-origin
  • background-size

Clone this wiki locally