Matt's Guide to CSS

Adding images to an element's background with css is easy. It starts with your selector (#elementid), which tells the system that you are selecting a specific element by the id you assigned it. The "background-image:" attribute tells the system which attribute you're modifying. The css function "url" tells the system you are about to list a file directory for the image file you wish to display as the element background, with the ('/images/filename.ext') being the actual file directory that leads to your image.

Rotating an element is a fun way to add flare to your webpage and draw attention to an image or section.This is accomplished by using the transform function. After declaring your selector (#elementid), enter the function transform: rotate();. Inside the parenthesis, you enter the degrees you'd like you element rotated, such as (45deg), as exampled to the right.

What if you want your element to change when you hover your mouse over it? The :hover pseudo-class opens up a whole new world of possibilities. Just add :hover to your #elementid, as shown to the right, then declare how long you want the transition to take using the -webkit-transition: attribute (in this case, 400 milliseconds). Then list the attributes and how you want them changed during that transition. This example will change the background color of an element to light gray when the user hovers their mouse over it.

Adding filters to images can really class up your website, especially when applying a grayscale filter. The code to the right starts with your image id selector (#imgid), then declares the css function "filter:". the only step left now is to select what kind of filter you wish to apply, and then an arugment for how strong you want the effect to be. In this example, we change an image to have a total grayscale make over.