Scribd
Upload
11 views13 pages

Display Flex Positioning - Notes Lyst4717

Flat

Uploaded by

gopalmuri1919
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views13 pages

Display Flex Positioning - Notes Lyst4717

Flat

Uploaded by

gopalmuri1919
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Front End Technologies CSS

- Day 14

Agenda
▪ CSS Box Model Continued

Padding in CSS: The CSS padding properties are used to generate space
around an element's content. Let’s understand this with an example.

Example:

Index.html:

Full Stack Web Development HTML TapAcademy


Output:

Box Model:

Here, if you observe the output padding is applied around the region of content
i.e padding-top is 25px, padding-right is 10px, padding-bottom is 15px and
padding-left is 10px. Instead of writing padding-top, padding-right, padding-
bottom and padding-left you can simply write it as padding and mention all four
dimensions as shown below.

index.html:

Full Stack Web Development HTML TapAcademy


Output:

Box model:

If you specify only one dimension which will be padding-top then remaining three
will also have same padding value. if you specify 2 dimensions which will
padding-top and padding-right then, dimensions specified to padding-top will be
copied to padding-bottom and dimensions specified to padding-right will be
copied to padding-left as shown below.

index.html

Full Stack Web Development HTML TapAcademy


Output:

Box Model:

As you can clearly see in the boc model dimensions specified for padding-top
gets reflected to padding-bottom and dimensions specified for padding-right gets
reflected to padding-left.

Example: padding property has 3values.

index.html

Output:

Full Stack Web Development HTML TapAcademy


Box Model:

In this example, dimensions for padding-left is not specified so dimensions given


to padding-right will be copied to padding-left.

Example: To design the table shown below.

Full Stack Web Development HTML TapAcademy


index.html

Full Stack Web Development HTML TapAcademy


Output:

Box Model:

In this example, by using border properties we have added border to the table and
padding is applied to each data present in the table. If you observe the last column
present inside the table it is not center aligned, to make it center aligned padding-
left value should be increased as shown below.

Full Stack Web Development HTML TapAcademy


index.html:

Full Stack Web Development HTML TapAcademy


Output:

Border in css: The border properties allow you to specify how the border of
the box representing an element should look. There are three properties of a
border you can change −
• The border-color specifies the color of a border.
• The border-style specifies whether a border should be solid, dashed line,
double line, or one of the other possible values.
• The border-width specifies the width of a border.
Let us now understand border with an example.
index.html:

Full Stack Web Development HTML TapAcademy


Output:

Box Model:

In this example, padding and border is applied for the given content is shown
above. Here, padding is 5px, border-width is 3px, border-style is solid and border-
color is red. Instead of specifying border-width, border-style and border-color you
can make use of shorthand property. When using shorthand property the order
should be border-width, border-style and border-color as shown below.

index.html

Full Stack Web Development HTML TapAcademy


Output:

Different border-style in css:

• dotted - Defines a dotted border


• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-
color value
• ridge - Defines a 3D ridged border. The effect depends on the border-
color value
• inset - Defines a 3D inset border. The effect depends on the border-color
value
• outset - Defines a 3D outset border. The effect depends on the border-
color value
• none - Defines no border
• hidden - Defines a hidden border

In the above example all side of the border have same styling, but certainly you
can give different border-style for all the sides as shown below.

index.html

Full Stack Web Development HTML TapAcademy


Output:

Till now you have seen rectangular border, now we will see how to put
rounded-border.

Example:

Index.html

Output:

Full Stack Web Development HTML TapAcademy


Instead of writing border-top-right-radius, border-top-left-radius, border-
bottom-right-radius and border-bottom-left-radius you can use shorthand
border-radius as shown below.

index.html:

Output:

Full Stack Web Development HTML TapAcademy

You might also like