25 Basic CSS Properties Every Beginner Should Know (with Examples)

by

Once you have learned HTML, the next step in web development is mastering CSS. CSS (Cascading Style Sheets) controls how your web pages look, including colors, spacing, layout, and fonts.

🎨 What is CSS?

CSS stands for Cascading Style Sheets. It works hand-in-hand with HTML to define how elements appear on the page, like font size, background color, margins, and more.

Here is the basic syntax:

selector {
  property: value;
}

📋 25 Basic CSS Properties You Should Know

color – Text color
color: #333;

background-color – Background color
background-color: #f0f0f0;

font-size – Size of the text
font-size: 18px;

font-family – Font style
font-family: Arial, sans-serif;

font-weight – Boldness of the text
font-weight: bold;

text-align – Align text
text-align: center;

margin – Outer spacing around elements
margin: 20px;

padding – Inner spacing around elements
padding: 10px;

border – Border around elements
border: 1px solid #ccc;

width – Width of an element
width: 300px;

height – Height of an element
height: 200px;

display – Box layout (block, inline, flex)
display: flex;

flex – Flex layout control
flex: 1;

justify-content – Align flex items with equal space between them
justify-content: space-between;

align-items – Vertical alignment
align-items: center;

position – Static, relative, absolute, fixed
position: absolute;

top / right / bottom / left – Offset for positioned elements

overflow – Control content overflow
overflow: auto;

z-index – Stack order
z-index: 10;

opacity – Transparency level
opacity: 0.5;

cursor – Mouse cursor style
cursor: pointer;

box-shadow – Add shadow around elements
box-shadow: 0 4px 6px rgba(0,0,0,0.1);

text-decoration – Underline, none, etc.
text-decoration: none;

transition – Smooth animation
transition: all 0.3s ease;

hover – Style on mouse hover (pseudo-class)
a:hover { color: red; }

Example: Styling a Button

button {
  background-color: #007BFF;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #0056b3;
}

How to Practice CSS

Use these free tools to test your CSS code live and observe how each property give the output:

Final Thoughts

These 25 CSS properties will give you a solid foundation in front-end design. As you become more comfortable, you will start combining them creatively to build responsive and beautiful web pages.

💬 Got questions or want more beginner tutorials? Drop a comment below or explore more on this blog.

Sharing Is Caring...

Leave a Comment