Tutorials on CSS 103 – Web Development

Hey!! Friends, we are back again with a new article of tutorials on CSS. Here we will start from where we finished in the previous article.

If you missed the previous article, then check once CSS Tutorial 102.

Basic part of the tutorial:

All HTML elements can be seen as boxes. What the box model does is to allow us to define space between elements and to add a border around elements. The box model consists of margins, padding, borders and the actual content of the box.

This image shows very well how the box model works. So, the content is where text and images appear. Padding is like a transparent area around the content, but inside of the box.

The border of the box goes around the padding and the content.

It may be transparent or not. And finally, the margin is the space between boxes.

Now, padding, margin, and border are properties in CSS and can be specified for the entire box or individual sides. Top, bottom, left, or right.

The box model also allows us to set the height and width of an element.

CSS Margin

 Margins for Individual Sides

We can easily specify the different margins for the various sides of an element such as top, right, bottom, and left side using the CSS single margin property.

h1 {
 margin-bottom: 20px;
 } 
p { 
margin-left: 10px; margin-right: 30px; 
}

The margin Shorthand Property

The CSS margin property does a shorthand property to avoid setting the margin of each side separately; they are margin-top, margin-right, margin-bottom and margin-left.

h1 {
 margin: 0 10px; 
} 
p { 
margin: 25px 50px 75px 100px; 
}

CSS Padding

The CSS padding property allows us to specify how much space should appear between the content of an element and its border.

The mentioned CSS features can be used to manage lists. You can also set another value for the padding on each side of the box using the subsequent properties−

• Padding-bottom specifies the bottom padding like an element.
• Padding-top specifies the top padding from an element.
• Padding-left defines the left padding from an element.
• Padding-right specifies that the right padding of an element.
• Padding works as shorthand for the preceding properties.

Padding – Individual Sides

CSS has properties for defining the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding sections can have the following values:

• Length – defines padding in px, pt, cm, etc.

  % –

  specifies padding in % of the width of the containing componentinherit – the specifies that the padding should be received from the parent part

Note: Negative values are not allowed.

For example:

div {
  padding-top: 60px;
  padding-right: 40px;
  padding-bottom: 60px;
  padding-left: 90px;
}

Padding – Shorthand Property

It is likely to specify all the padding properties in one property.

The padding section is a shorthand property for the following individual padding features:

• padding-top
• padding-right
• padding-bottom
• padding-left

So, here is how it works:

If the padding property has four values:

• padding: 35px 60px 85px 110px;
  • top padding is 35px
  • right padding is 60px
  • bottom padding is 85px
  • left padding is 110px

div {
  padding: 35px 60px 85px 110px;
}

Padding and Element Width

The CSS width of the property defines the width of the element’s content area. The content area is the inside the padding, border, and margin of an element

div {
  width: 200px;
  padding: 15px;
}

CSS Border

The border properties allow us to define how the border of the box drawing an element should look. There remain three properties of a border you can improve −

• Border-color defines the color of a border.
• Border-style specifies whether a border should be stable, dashed line, double line, and one of the other likely values.
• The border-width defines the width of a border.

The border-color Property

The border-color property specifies the color of a box’s border. Also a shorthand feature for setting the color of all the four sides of an element’s border. For example:

p {
 border-style: solid; 
border-color: #ff0000; 
}

The border-style Property

The border-style property is sets of the style of a box’s border such a solid, dotted, etc. This is a shorthand feature for establishing the line style for all four sides of the element’s border.

The CSS border-style property may take one of the given following values: none, hidden, dashed, dotted, double, inset, groove, ridge, and solid.

p { 
border-style: dotted; 
}

The border-width Property

The CSS border-width property defines the width of the border area. It is a shorthand property for setting the thickness of all the four sides of an element’s border at the same time.

For example:

p { 
border-width: medium 20px thick 25px; 
}

• none: Means no border.
• hidden: Means hidden border.
• dotted: Refers to a dotted border.
• dashed: Refers to a dashed border.
• solid: Means a solid border.
• double: Defines two borders. The width of the two borders is the same as the border-width value.
• groove: Defines a 3D grooved border. The effect depends on the border-color value.
• ridge: Refers to 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.

This post is all about the box model in tutorials on CSS. Now, we are moving to the Advanced part of these tutorials on CSS.

Thank You 🙂