Basic HTML and CSS (inline, internal or external)
To learn how to use some advanced
The Border-radius style allows you to add a rounded border to the element.
Ex: border-radius: 20px 2px 0px 10px;
RGBA colors are an extension of RGB colors values but with an alpha channel which allows you to set an opacity on an object.
Ex: background-color:rgba(237, 187, 53, .2) ;
The box-shadow property attaches one or more shadows to an element.
Ex: box-shadow: 6px 6px 4px rgb(253, 132, 50);
The text-shadow property adds shadow to text.
Ex: text-shadow: 6px 6px 4px rgb(253, 132, 50);
This is an example of border-radius.
An Image sprite is a collection of images put into a single image. However they do take some time to line-up.
Ex: width: 285px; height: 341px; background: url(../img/sprites/sprites.jpg) 0 0;
Depending on the browser your css may not work so make sure you include the prefixes to make sure that your site will properly show on every browser
Internet Explorer: -ms-
Google Chrome and Safari: -webkit-
Firefox: -moz-
Opera: -o-
Bellow you will see three images of the iconic video game character Mega-Man.
These however are not all separate Images they belong to a sprite sheet and are one single image.
For your example do the following.
First on the second sprite change the background: url(lib/img/sprites/spritesmini.jpg) 0 0; to get it to shift to the image directly bellow it by changing the two 0 0 after the background.
Second on the third sprite change the background: url(lib/img/sprites/spritesmini.jpg) 0 0; to get it to shift to the image directly to the right it by changing the two 0 0 after the background.
Finally on the final sprite change the background: url(lib/img/sprites/spritesmini.jpg) 0 0; to get it to shift to the image directly right it by changing the two 0 0 after the background.