Mastering CSS Properties: A Comprehensive Guide to Display, Positioning, and Styling

An Introduction to Common CSS Properties for Styling Web Pages

CSS is a powerful tool for web designers to style and layout web pages. There are many CSS properties available, each with their own unique purpose. In this article, we’ll explore some of the most commonly used CSS properties and explain what they do.

1. Display
   The display property specifies the type of box that an element generates. This can affect the layout of the page and how elements interact with one another. Common values for display include block, inline, inline-block, and none.
2. Justify-Content
   The justify-content property aligns items along the main axis of a flex container. This property is used with the display: flex property. It has a range of values such as flex-start, flex-end, center, space-between, space-around, and space-evenly.
3. Align-Items
   The align-items property aligns items along the cross-axis of a flex container. This property is also used with the display: flex property. It has a range of values such as flex-start, flex-end, center, baseline, and stretch.
4. Padding
   The padding property specifies the space between an element's content and its border. It has four values that can be set separately for each side of the element: padding-top, padding-right, padding-bottom, and padding-left.
5. Font-Size
   The font-size property sets the size of the text within an element. It can be set in various units, such as px, em, rem, %, etc.
6. Font-Weight
   The font-weight property sets the weight (or thickness) of the text within an element. Common values for font-weight include normal, bold, and lighter.
7. Color
   The color property sets the color of the text within an element. It can be set using a wide range of values, including color names, hexadecimal codes, RGB or RGBA values, and HSL or HSLA values.
8. Background-Color
   The background-color property sets the background color of an element. It can also be set using a wide range of values, such as color names, hexadecimal codes, RGB or RGBA values, and HSL or HSLA values.
9. Border
   The border property sets the width, style, and color of an element's border. It has three sub-properties: border-width, border-style, and border-color.
10. Border-Radius
    The border-radius property sets the roundedness of an element's corners. It can be set in pixels or as a percentage of the element's width or height.
11. Cursor
    The cursor property sets the type of cursor that appears when the user hovers over an element. Common values include pointer, default, text, and grab.

These are just a few of the most commonly used CSS properties. By mastering these properties, you can create beautiful and functional web pages.