Image style
In this article we are going to learn about image style, width, height, border and radius in css, how to customize or style the image in html.
We learnt about css in general, text shadow in css, letter spacing in css, word spacing in css, text transform in css, text decoration in css, background image in css, background image repeat in css and background position in css so, we will be focusing on image styling.
Image style
Image styling is a way of giving images some good features to look nice for good view in html using just css properties.
Width
We can use width property to specify the width of the image.
Let us add two images in html page with a width property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.img-width-css-example {
width: 20%;
}
<style/>
</head>
<body>
<img class="img-width-css-example" src="images/icon.png" alt="scienceinlesotho icon">
<img width="20%" src="images/icon.png" alt="scienceinlesotho icon">
</body>
</html>
So, we should have the following results.
Height
We can use height property to specify the height of the image.
Let us add two images in html page with height property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.img-height-css-example {
height: 15%;
}
<style/>
</head>
<body>
<img class="img-height-css-example" src="images/icon.png" alt="scienceinlesotho icon">
<img height="15%" src="images/icon.png" alt="scienceinlesotho icon">
</body>
</html>
So, we should have the following results.
Border
We can use border property to specify the border of the image.
Let us add the image in html page with border property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.img-border-example {
border: 1px solid red;
}
<style/>
</head>
<body>
<img class="img-border-example" src="images/icon.png" alt="scienceinlesotho icon">
</body>
</html>
So, we should have the following results.
Radius
We can use border radius property to specify the border radius of the image.
Let us add the image in html page with border radius property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.img-border-radius-example {
border: 1px solid red;
border-radius: 50%;
}
<style/>
</head>
<body>
<img class="img-border-radius-example" src="images/icon.png" alt="scienceinlesotho icon">
</body>
</html>
So, we should have the following results.