Shorthand Rules

As you have probably picked up by now, I love my Sublime editor. It does lots of great things for me, but sometimes it offers suggestions that I didn't really mean to use. One common example is that I often unintentionally switch between using background and background-color. Does this make a difference?

For the most part no. The background property can take a number of different values. Think about the border example we did in the Box Model lecture. This code

border: 1px solid black;

is shorthand for

border-width: 1px;
border-color: black;
border-style: solid;

So when I switch back-and-forth between background and background-color I am doing the same sort of thing...using the shorthand. What other things can go in the background property? Here is an example:

background: #00ff00 url("imgs/ocean.jpg") no-repeat fixed center;

This rule sets:

  • background-color
  • background-image
  • background-repeat
  • background-position