Introduction to Cascading Style Sheets

Lesson: Understanding CSS Properties

Objective: By the end of this lesson, you’ll understand what CSS properties are and how they are used to style HTML elements.

---

What are CSS Properties?

CSS properties are the parts of a CSS rule that define the style of an element. Each property controls a specific aspect of an element’s appearance, such as its color, size, positioning, and spacing.

CSS Rule Structure

Every CSS rule has three main parts: Selector: Targets the HTML element. Property: The style aspect to be changed. Value: The specific setting for the property.

Here’s an example:

p {
  color: blue;
  font-size: 16px;
}

• Selector: p (targets all <p> elements)
• Properties: color and font-size
• Values: blue and 16px

---

Commonly Used CSS Properties

• Color and Text Properties:

  • color: Changes the text color.
  • font-size: Sets the size of the font.
  • font-family: Specifies the font style (e.g., Arial, Verdana).
  • text-align: Aligns text (e.g., left, center, right).

  h1 {
    color: darkgreen;
    font-size: 24px;
    text-align: center;
  }
  

• Background Properties:

  • background-color: Sets the background color of an element.
  • background-image: Adds an image to the background.

  .banner {
    background-color: lightblue;
    background-image: url('background.jpg');
  }
  

• Spacing Properties:

  • margin: Adds space outside of the element’s border.
  • padding: Adds space inside the element’s border.

  div {
    margin: 20px;
    padding: 10px;
  }
  

• Border Properties:

  • border: Adds a border around the element.
  • border-radius: Rounds the corners of the border.

  img {
    border: 2px solid black;
    border-radius: 5px;
  }
  

• Positioning Properties:

  • position: Defines the element’s position (e.g., relative, absolute, fixed).
  • top, right, bottom, left: Specify the position offset.

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
  }
  

---

Using Multiple Properties

CSS rules can have multiple properties, allowing you to apply several styles to the same element.

button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

This CSS rule:

• Sets the button’s background color to green,
• Text color to white,
• Adds padding, and
• Rounds the button’s corners.

---

There are so many CSS properties. One of the best resources to learn about all of the properties is w3Schools.com CSS Property Reference.

---