Exploring CSS January 15, 2015

Agenda

Work on Wendy Bite
We’ll explore more in-depth some of the CSS properties that we started to look at in the last class, and expand on them.

Starter Files

For the beginning of class, we’ll continue working on the Wendy Bite project.

Wendy Bite (download) (markup preview) (design preview)

Notes

Many CSS properties can be written using a short-hand, such as font, border, and background.
In general, I advise against using the font shorthand as it can be quite confusing.

Backgrounds in CSS

We’ll make use of various longhand background properties in class, including background-color, background-image, background-repeat, and background-position.

Keep in mind that with background-position in particular, things may not work exactly as our intuitions may guide us.

For examples, try the following background-position settings on an example of your own devising:

background-position: top left;
background-position: center center;
background-position: 20px 50px;
background-position: 25% 25%;
background-position: 100% 100%;
background-position: 50% 50%;

These will all work best if used in conjunction with background-repeat: no-repeat;, so that only one background image is placed.

FEWD 49