3 – Properties & Values

🔹 What are the properties?

• Properties are the “commands” we use in CSS to change the appearance of elements.

  Table of Contents

  Toggle

• Each property has a value that determines its appearance.

• example:

• here:

  • color = property.

  • red = value.

🔹 Code composition with properties and values

📌 Example:

• h1 → The element to be affected.

• color: blue; → The color property and its value are blue.

• font-size: 30px; → Font size property with a value of 30 pixels.

• text-align: center; → The alignment property and its value are centered.

Common Properties with Values

🖌️ 1- Text Properties

• color → Text color.

  • Example: color: red; or color: #ff0000;.

• font-size → Font size.

  • Example: font-size: 20px;.

• font-family → Font type.

  • Example: font-family: Arial, sans-serif;.

• font-weight → line thickness.

  • Example: font-weight: bold; or font-weight: 400;.

• text-align → Text alignment.

  • Example: text-align: center; or left or right.

• text-decoration → Underline or underline the text.

  • Example: text-decoration: underline;.

• line-height → the distance between lines.

  • Example: line-height: 1.5;.

🎨 2- Background Properties

• background-color → Background color.

  • Example: background-color: yellow;.

• background-image → Image as background.

  • Example: background-image: url('bg.jpg');.

• background-repeat → Repeat image.

  • Example: background-repeat: no-repeat;.

• background-size → Image size.

  • Example: background-size: cover;.

📦 3- Box Model Properties

• width → Width of the item.

• height → Height of the element.

• margin → outer space around the element.

• padding → Inner space between text and element borders.

• border → element border.

  • Example: border: 2px solid black;.

• border-radius → rounded corners.

  • Example: border-radius: 10px;.

✨ 4- Effects properties

• box-shadow → shadow for the box.

  • Example: box-shadow: 0px 4px 8px gray;.

• opacity → transparency of the element.

  • Example: opacity: 0.5; (semi-transparent).

✅ Important notes:

1. Every property must be followed by a value.

2. If you type an invalid value, the browser will ignore the line.

3. We can write more than one property for the same element inside { }.

4. Values can be:

   • Numbers + units (px, em, %, vh, vw).

   • Keywords (red, bold, center).

   • Color codes (#000000, rgb(0,0,0)).

📌 An applied example that combines different properties

[codebox] div {
width: 300px;
height: 150px;
background-color: lightblue;
color: darkblue;
font-size: 20px;
text-align: center;
border: 2px solid blue;
border-radius: 15px;
padding: 10px;
margin: 20px;
}
[/codebox]

A box 300px wide and 150px high.

• Its background is light blue, and its texts are dark blue.

• Texts are centered and 20px in size.

• It has blue borders with rounded corners.

• padding inner 10px, margin outer 20px.