Commonly Used CSS Properties

In addition to the color, background-color, and font-size CSS properties introduced earlier, there are hundreds of CSS properties in use.

Let's check out some of the commonly used key CSS properties.

Adds a shadow effect to HTML elements.

Example:

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

The above CSS code applies a shadow effect to the <div> element using the box-shadow property.

• Meaning: The horizontal offset of the shadow.
• Explanation: This value moves the shadow 5 pixels to the right of the element.

• Meaning: The vertical offset of the shadow.
• Explanation: This value moves the shadow 5 pixels to the bottom of the element.

• Meaning: The blur radius of the shadow.
• Explanation: This value determines how blurred the shadow's edges are. With a blur radius of 10 pixels, the shadow's edges become smoothly blurred.

• Meaning: The color of the shadow is set to gray.

As a result, the div element gets a gray shadow offset 5px to the right and 5px to the bottom.

Rounds the corners of an element.

Example:

Copy
div {
  border-radius: 10px;
}

All corners of the div element are rounded with a radius of 10px.

Draws a line around the element to highlight it.

Example:

Copy
div {
  outline: 2px solid red;
}

Draws a 2px solid red line around the div element.

Although both outline and border are CSS properties used to draw lines around an element, they have some differences.

• border: Draws the line tightly against the element's boundary. This can increase the overall size of the element. That is, the thickness of the border is included in the total size of the element.

• outline: Draws the line outside the element's boundary. This does not change the total size of the element. The outline does not affect the size or positioning of the element.

Follow the asterisk-marked parts of the code and input them accordingly.