Exploring CSS April 9, 2014

Note: I’m posting this in retrospect of yesterday’s class.

Agenda

We explored more in-depth some of the CSS properties that we started to look at in the last class, and expand on them.

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 made 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.

Further Reading

• Mozilla Developer Network documentation on CSS
• Shay Howe on Typography and Backgrounds & Gradients
• Chris Coyier’s list of CSS properties on CSS-Tricks