CSS Images


Web pages can be much made more stylish using images in them.CSS images explaination can provide a basic information on how to do that.

Adding images in CSS

nature nature

Expaination:

<!DOCTYPE html>
<html>
<head>
<title>
CSS IMAGES
</title>
</head>
<body>
<div class="images">
<img
src="http://weknowyour
dreams.com/images
/nature/nature-02.jpg" alt="nature" style="width:200px;height:
200px;margin:6px">
<img
src="http://hamderser.dk
/blog/images/clairvoyant
/clairvoyant-nature-nature6.jpg" alt="nature" style="width:200px;
height:200px">
</div>
</body>
</html>

Making images responsive using CSS

<!DOCTYPE html>
<html>
<head>
<style>
div.images{
margin: 6px;
border: 1px solid green;
float: left;
width: 200px;
}
div.imgages:hover {
border: 1px solid red;
}
</style>
<title>
CSS IMAGES
</title>
</head>
<body>
<div class="images">
<img
src="http://weknowyour
dreams.com/images
/nature/nature-02.jpg" alt="nature" style="width:200px;height:
200px;margin:6px">
<img
src="http://hamderser.dk
/blog/images/clairvoyant
/clairvoyant-nature-nature6.jpg" alt="nature" style="width:200px;
height:200px">
</div>
</body>
</html>
Here when user points mouse over image a border of 1px and solid red colour appears over screen.