Skip to main content
Practice

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.


box-shadow​

Adds a shadow effect to HTML elements.

Example:

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

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

First 5px​

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

Second 5px​

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

10px​

  • 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.

gray​

  • 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.


border-radius​

Rounds the corners of an element.

Example:

CSS
div {
  border-radius: 10px;
}

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


outline​

Draws a line around the element to highlight it.

Example:

CSS
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.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.