Chapter 3: CSS Properties and Values | WebLearner Pro

Chapter 3: CSS Properties and Values

CSS properties and values are the foundation of styling in CSS. Each property defines a specific aspect of the element's appearance, and the value specifies the setting for that property. In this chapter, you will learn about some common CSS properties and how to use them effectively.

3.1 Structure of a CSS Declaration

Each CSS declaration consists of a property and a value, separated by a colon :. Multiple declarations are enclosed within curly braces { } and separated by semicolons ;.


/* CSS Declaration Example */
selector {
    property: value;
}

3.2 Common CSS Properties

Here are some commonly used CSS properties:

3.2.1 Text Properties

Text-related properties allow you to style text elements like headings, paragraphs, and links.

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

/* Text Properties Example */
h1 {
    color: #3498db;
    font-size: 36px;
    text-align: center;
}
p {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
}

3.2.2 Background Properties

Background-related properties control the appearance of an element's background.

  • background-color: Sets the background color.
  • background-image: Sets a background image.
  • background-repeat: Specifies whether the background image repeats.
  • background-size: Defines the size of the background image.

/* Background Properties Example */
body {
    background-color: #f0f0f0;
}
div {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

3.2.3 Box Model Properties

The box model properties define the layout and spacing of elements:

  • width and height: Set the dimensions of the element.
  • margin: Adds space outside the element.
  • padding: Adds space inside the element, between content and border.
  • border: Defines the border around the element.

/* Box Model Properties Example */
div {
    width: 300px;
    height: 200px;
    margin: 20px auto;
    padding: 10px;
    border: 2px solid #333;
}

3.2.4 Display and Visibility

These properties control how an element is displayed:

  • display: Specifies the display behavior (e.g., block, inline, flex).
  • visibility: Toggles visibility (e.g., visible, hidden).

/* Display and Visibility Example */
span {
    display: inline-block;
    visibility: hidden;
}

3.3 CSS Value Types

CSS values define the settings for properties. Common value types include:

  • Color Values: red, #ff0000, rgb(255, 0, 0).
  • Length Values: px, em, %, etc.
  • Keyword Values: none, inherit, auto, etc.

3.4 Summary

In this chapter, you learned about CSS properties and values, including text properties, background properties, box model properties, and more. Understanding these will help you control the style and layout of your web pages. In the next chapter, we will explore the CSS Box Model in detail.