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;
}