CSS Properties

Beginner ⏱ 7 min read Updated: Jul 2026

CSS properties define how HTML elements should look and behave on a webpage.
CSS properties are used with selectors to apply styling rules.
Each CSS property controls a specific design feature like color, size, spacing, or layout.
CSS properties are written using a property-value pair.
CSS provides hundreds of properties for creating modern website designs.

What are CSS Properties?

CSS properties are the instructions that tell browsers how HTML elements should be displayed. They control different visual aspects of a webpage such as colors, fonts, spacing, borders, dimensions, positioning, and layouts.

A CSS property is always used together with a value. The property defines what style needs to be changed, while the value defines how that style should appear.

For example, the color property changes text color, the font-size property controls text size, and the background-color property changes the background color of an element.

CSS Property Syntax

CSS properties are written inside a CSS rule using the following syntax:

selector { property: value; }

HTML Element CSS Rule

Example


p {
    color: blue;
    font-size: 18px;
    background-color: lightgray;
}

Result

This paragraph uses CSS properties.

Common CSS Properties

color

The color property changes the text color of an HTML element.

background-color

It defines the background color of an element.

font-size

It controls the size of text displayed on the webpage.

font-family

It specifies the font style used for text.

margin

It creates space outside an element.

padding

It creates space inside an element between content and border.

CSS Text Properties

Text properties are used to control the appearance and alignment of text content on webpages.

text-align: Aligns text left, right, center, or justify.
text-decoration: Adds underline or other text decorations.
text-transform: Changes text into uppercase or lowercase.
line-height: Controls spacing between text lines.

CSS Background Properties

Background properties are used to add colors and images behind HTML elements.

background-color: Sets background color.
background-image: Adds an image as background.
background-repeat: Controls image repetition.
background-size: Defines background image size.

CSS Box Model Properties

The CSS box model describes how every HTML element is structured with content, padding, border, and margin.

📦

Box Model: CSS box model properties include width, height, padding, border, and margin. They help developers control the size and spacing of webpage elements.

CSS Layout Properties

Layout properties control the position and arrangement of elements on a webpage.

display: Defines how an element behaves.
position: Controls element positioning.
float: Moves elements left or right.
flex: Creates flexible layouts.
grid: Creates grid-based layouts.

CSS Border Properties

Border properties are used to add and customize borders around HTML elements.

border: Creates a border around an element.
border-radius: Creates rounded corners.
border-color: Changes border color.
border-width: Controls border thickness.

Why are CSS Properties Important?

They help create attractive website designs.
They control the appearance of HTML elements.
They make webpages responsive and user-friendly.
They allow developers to customize every part of a webpage.
They improve website structure and readability.

Best Practices for Using CSS Properties

Use meaningful and organized CSS code.
Avoid unnecessary duplicate properties.
Use external CSS for large projects.
Choose appropriate units like %, rem, and px.
Keep CSS code simple and reusable.

Conclusion

CSS properties are the foundation of website styling. They allow developers to control colors, fonts, spacing, layouts, and other visual elements of webpages.

By understanding commonly used CSS properties, developers can create professional, responsive, and visually appealing websites. CSS properties work together with selectors and values to transform simple HTML documents into complete web designs.

← Previous CSS Horizontal Alignment Next → CSS Background