Frequently Used CSS Properties

In addition to CSS properties like color, background-color, and font-size introduced earlier, there are hundreds of CSS properties used in web development.

Let's explore some commonly used major CSS properties.

Adds a shadow effect to HTML elements.

Example:

Copy
div {
  box-shadow: 5px 5px 10px gray;
}

This CSS uses the box-shadow property to apply a shadow effect to a <div> element.

The meanings of each value are as follows:

The horizontal offset of the shadow.

This value moves the shadow 5 pixels to the right of the element.

The vertical offset of the shadow.

This value moves the shadow 5 pixels below the element.

The blur radius of the shadow, determining how blurred the shadow edges will be.

A blur radius of 10 pixels softens the edges of the shadow.

Sets the shadow color to gray.

Consequently, the box-shadow: 5px 5px 10px gray; CSS code creates a gray shadow that is offset 5px to the right and bottom.

Rounds the corners of an element.

Copy
div {
  border-radius: 10px;
}

The code rounds all corners of the div element with a curvature of 10px.

Draws a line around an element to highlight it.

Copy
div {
  outline: 2px solid red;
}

The code draws a red line with a 2px thickness around the div element.

Both outline and border apply a line around the element's boundary, but there are some differences.

• border: The line is drawn right at the element's boundary. This can increase the total size of the element because the border thickness is included in the total size of the element.

• outline: The line is drawn outside the element's boundary. This doesn't change the total size of the element. The outline property doesn't affect the size or layout of the element.

Follow the emphasized sections in the code to input them correctly.