In this section we will see how to handle some css properties. To manage element’s size on the webpage we use the height and width properties. for example:

img {

height : 100px;

width: 150px;

}

style.css

Elements on the webpage are already settle according to a specific size. To modify it we need to set height or width property.

img1 {

width: 250px;
background - color: brown;

}

img2 {
  
height: 125 px
background - color: yellow;
}

Borders

Elements on a webpage can have borders around them. To set borde to an html elements we use border property. To make a border appear, we set the value to solid. We can set the width of a border by adding a number in pixels right after solid. Let see how it work

.title {
border: solid 2px;
}

h1 {
border: solid 2px;
}

To set boxer’s color we add the color value at the end.

img {
border: solid 2px green;
}

h3 {
border: solid 4px red;
}

Border-radius

This property is use to round the corners of an element. We use px to or % to set how curve the element’s corner will look.

p { 
border-radius: 10px
background - color: light-blue;
border: solid;
}

Borders-radius works on all elements, even images . It’s an easy way to make images looks great on webpage.

To make an image a circle, we set border-radius to half of the image’s width. It only work when the image size as a square.

img {

height: 100px;
width: 100px;
border-radius: 50px;
border: solid 5px red;

}