There are many CSS properties you can use on images. This example changes the size, adds a border to the image, and rounds the corners. The video shows a few additional properties as well.
img{
width:500px;
border-width:5px;
border-style:solid;
border-color:black;
border-radius:20px;
}
Note: Using the img element as your selector will change EVERY image on your page. You may or may not be looking to do that. If you only wanted to change one image or apply a style to some images you should use a class.
To set a background (using any element or class as a selector), use the background-image property. Note the path to the image file name. Remember, references are relevant so be sure to add the correct path. If your CSS file is in a subfolder you will need the ../ to go out of the CSS folder and then into the images folder.
body{
background-image:url('../images/whatever.jpg');
}
Here are some other properties you may need/want to use with backrgound images:
/*Use this to change the size of the background image (height, width)
To have the background image fill the space try using cover as the value */
background-size:200px 400px;
background-size:cover;
/*By default, background images repeat. Use this to stop it. Or repeat-x or repeat-y*/
background-repeat:no-repeat;
/*Moves the background image (x-axis, y-axis) */
background-position:0px -200px;
It's generally a good idea to change the default look of your text links — change the color, make it bold, or even remove the underline. You can do this last one with the text-decoration CSS property.
a{
color:darkred;
text-decoration:none;
}
If you wanted a link to look more button-like you could add a border, padding, and background color:
a{
color:darkred;
text-decoration:none;
border: 1px solid darkred;
padding:4px;
background-color:pink;
}
Note: Using the anchor element as your selector, as this example shows, will change EVERY link on your page. You may or may not be looking to do that. If you only want to change one link or apply a style to some of your links you should use a class.
CSS gives you the ability to modify the appearance of the different states of some elements. For example, if you wanted to change a link only when the cursor is placed on it, you could modify the hover state of the link.
a:hover{
color:red;
text-decoration:underline;
}
The a:hover is the “pseudo-element”. This example changes the font color to red and adds an underline when the cursor is over it.