CSS Properties and Values

CSS

"Learning CSS is like solving a puzzle—except if one piece is out of place, your entire website ends up looking like a closet hit by a tornado!"

 

The Building Blocks of CSS

CSS properties and values are like the ingredients in a recipe—they define how your website looks and behaves. Properties tell CSS what to style, and values tell CSS how to style it.

Let’s dive in and master the art of CSS styling!

What Are CSS Properties and Values?

A CSS rule consists of a property and a value, like this:

selector {
  property: value;
}

Example:

p {
  color: red;
  font-size: 18px;
}

• color is the property (what to change).
• red is the value (how to change it).

It’s like telling your text: "Hey, wear red and be 18px tall!" 

Common CSS Properties You Should Know

Text Styling

color: blue; /* Changes text color */
font-size: 20px; /* Sets text size */
font-weight: bold; /* Makes text bold */
text-align: center; /* Aligns text */

Background Styling

background-color: yellow; /* Sets background color */
background-image: url('image.jpg'); /* Adds a background image */

Box Model (Spacing & Sizing)

width: 200px; /* Sets element width */
height: 100px; /* Sets element height */
margin: 10px; /* Sets space around an element */
padding: 20px; /* Sets space inside an element */

Borders and Shadows

border: 2px solid black; /* Adds a black border */
border-radius: 10px; /* Rounds the corners */
box-shadow: 5px 5px 10px gray; /* Adds a shadow */

3. How to Combine Multiple Properties?

You can apply multiple properties to an element in one rule:

div {
  background-color: lightgray;
  width: 300px;
  height: 150px;
  text-align: center;
}

This creates a 300x150px gray box with centered text inside it! 

CSS Shorthand: Write Less, Do More!

Instead of writing multiple lines, CSS allows shorthand:

Margin & Padding

margin: 10px 20px 30px 40px; /* Top, Right, Bottom, Left */
padding: 10px; /* Same value for all sides */

Border

border: 2px dashed red; /* Width, Style, Color */

Background

background: yellow url('image.jpg') no-repeat center;

Shorthand saves time and keeps your code clean! 

Conclusion

• CSS properties define what to style.
• CSS values define how to style it.
• Shorthand makes CSS faster and cleaner.

Now go forth and style your website with confidence!