Day 9 | CSS Box Properties | part 2

Full Notes, Html, CSS & Bootstrap (Revision): drive.google.c...
Assingment-1(project 1)
Todo list
Easy
In this assignment, let's build a Todo list by applying the concepts we learned till now.
Refer to the below image.
drive.google.c...
Note:
Try to achieve the design as close as possible.
Resources
Use this background image,
URL:
d1tgh8fmlzexmh...
CSS (for font-family)
@import url("fonts.googleap...");
CSS Colors used:
Background color for button:
orange
Text color:
white
CSS Font families used:
Roboto
-------------------------------------------------------------------------------------------------------------------------------------
This video Notes👇
CSS Box Properties
1. Border Width
The CSS border-width property specifies the width of the border for all four sides of an HTML element.
CSS
.button {
border-width: 2px;
}
The CSS Property and value pair border-width: 0px; removes the border of an HTML element.
Warning
Specifying the CSS border-style property for an HTML element is mandatory. Otherwise, the CSS properties like border-color, border-width will not appear in the browser. The HTML button element is an exception as it appears with a border in the browser by default.
2. Border Radius
The CSS border-radius property specifies the roundness of the corners of an HTML element.
CSS
.button {
border-radius: 20px;
}
You can use the below CSS properties to round a specific corner of an HTML element.
Property
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
Quick Tip
Specifying the background color for an HTML element makes the border radius more visible.
3. Border Color
The CSS border-color property specifies the color of the border for all four sides of an HTML element.
CSS
.button {
border-color: orange;
}
Warning
Specifying the CSS border-style property for an HTML element is mandatory. Otherwise, the CSS properties like border-color, border-width will not appear in the browser. The HTML button element is an exception as it appears with a border in the browser by default.
4. Border Style
The CSS border-style property specifies the style of the border for all four sides of an HTML element.
CSS
.button {
border-style: dashed;
}
You can use one of the below values of the CSS border-style property.
Value
dotted
dashed
solid
none (default)
5. Padding
The CSS padding property specifies the space around the content of an HTML element.
CSS
.card {
padding: 10px;
}
Instagram link:- www.instagram....
Linkedin link: www.linkedin.c...

[@chatlavasu5726]

broo keep going i loved ur videos 💌

[@MahendarTutorialsTelugu]

@@chatlavasu5726 thank you for your support brother..