Scribd
Upload
236 views

CSS in Depth

The document discusses CSS border, box model and a project. It describes the different properties that can be used to style borders and explains the box model which represents elements using edges for content, padding, border and margin.

Uploaded by

Simhadri Madhuri
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
236 views

CSS in Depth

The document discusses CSS border, box model and a project. It describes the different properties that can be used to style borders and explains the box model which represents elements using edges for content, padding, border and margin.

Uploaded by

Simhadri Madhuri
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

CSS IN DEPTH

Agenda

1 CSS Border

2 CSS Box Model

3 CSS Project

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS Border

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS Border

● Helps in setting up the border for HTML elements


● There are 4 properties that can help in setting up of border:
○ Width - sets the width of the border
○ Style - sets the style of border; Eg: solid, dashed etc.
○ Color - sets the color of the border
○ Radius - determines the roundness of the border

● You can set the border for specifically top, right, bottom and left
● We can also club top and bottom together and same goes for left and right
○ Eg: border-width: 2px 5px; sets top and bottom 2px; left and right 5px
● Border can also be set in a single line
○ Eg: border : 2px solid blue;

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS Box Model

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS Box Model

● Every element in CSS can be represented using BOX model


● It helps developer to develop and manipulate the elements
● It consist of 4 edges
○ Content edge - It comprises of the actual content
○ Padding edge - It lies in between content and border edge
○ Border edge - Padding is followed by the border edge
○ Margin edge - It is outside border and controls margin of the element
● Example:
#styled{
border: 2px solid blue;
margin: 5px;
padding: 20px;
content: 50px; }

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
PROJECT

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Thank You

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited

You might also like