DEV Community

Cover image for 20 CSS Properties With Example Every Developer Should Now
Shivam Solanki
Shivam Solanki

Posted on

20 CSS Properties With Example Every Developer Should Now

background-color: sets the background color of an element, for example: background-color: yellow;

color: sets the text color of an element, for example: color: blue;

width: sets the width of an element, for example: width: 500px;

height: sets the height of an element, for example: height: 200px;

font-size: sets the font size of text, for example: font-size: 16px;

font-family: sets the font family of text, for example: font-family: Arial, sans-serif;

text-align: sets the alignment of text, for example: text-align: center;

border: sets the border of an element, for example: border: 1px solid black;

border-radius: sets the rounded corners of an element, for example: border-radius: 10px;

padding: sets the space within an element, for example: padding: 10px;

margin: sets the space outside an element, for example: margin: 20px;

display: sets the display type of an element, for example: display: flex;

flex-direction: sets the direction of the items in a flex container, for example: flex-direction: row;

justify-content: sets the horizontal alignment of items in a flex container, for example: justify-content: center;

align-items: sets the vertical alignment of items in a flex container, for example: align-items: center;

position: sets the position of an element, for example: position: absolute;

top: sets the position from the top of an element, for example: top: 20px;

left: sets the position from the left of an element, for example: left: 30px;

z-index: sets the stack order of an element, for example: z-index: 1;

opacity: sets the transparency of an element, for example: opacity: 0.5;

These are just a few of the many CSS properties available, and each property has a range of values that can be used to customize the appearance and behavior of elements on a web page.

Top comments (0)