CSS and CSS3 Properties Guide

Cascading Style Sheets (CSS) is the backbone of web design, enabling developers to style and layout their HTML content. With the evolution of CSS3, developers now have access to enhanced features for animations, responsive designs, and advanced styling. In this guide, we’ll cover every property in CSS and CSS3, complete with explanations, examples, and possible values for each. By the end, you’ll also find a consolidated table of all CSS properties and their values for quick reference.

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation of HTML elements. It allows you to apply styles such as colors, layouts, spacing, and more. CSS3, the latest version, introduced new properties like animations, transitions, and grid layouts to meet modern design needs.

Structure of a CSS Rule

A CSS rule consists of:

Selector: Identifies the HTML element(s) to style.
Declaration: Specifies the style to apply. It contains a property and a value.

Example:

selector {
    property: value;
}

For example:

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

CSS Properties and Examples

Let’s explore CSS and CSS3 properties grouped by category:

1. Text and Font Properties

Text and font properties in CSS are essential for controlling the presentation of textual content on a webpage. Let’s explore these properties in greater detail with real-world practical examples to demonstrate how they work and the effects they produce.

1) `color` Property

The color property changes the color of the text.

Possible Values:

Color names: Predefined names like red, blue, green.
HEX values: Color defined using hexadecimal codes like #FF5733.
RGB values: Specify red, green, and blue components, e.g., rgb(255, 87, 51).
HSL values: Specify hue, saturation, and lightness, e.g., hsl(9, 100%, 60%).

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 {
            color: red; /* Using color name */
        }
        p.hex {
            color: #3498db; /* Using HEX */
        }
        p.rgb {
            color: rgb(46, 204, 113); /* Using RGB */
        }
        p.hsl {
            color: hsl(210, 100%, 50%); /* Using HSL */
        }
    </style>
</head>
<body>
    <h1>This is a red heading</h1>
    <p class="hex">This is a paragraph with HEX color.</p>
    <p class="rgb">This is a paragraph with RGB color.</p>
    <p class="hsl">This is a paragraph with HSL color.</p>
</body>
</html>

2) `font-family` Property

The font-family property specifies the font used for the text. It can include a primary font and a fallback font.

Possible Values:

Font names like "Arial", "Georgia".
Generic font families like sans-serif, serif, monospace.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.serif {
            font-family: "Times New Roman", serif; /* Serif font with fallback */
        }
        p.sans-serif {
            font-family: Arial, sans-serif; /* Sans-serif font with fallback */
        }
        p.monospace {
            font-family: "Courier New", monospace; /* Monospace font with fallback */
        }
    </style>
</head>
<body>
    <p class="serif">This is text in a serif font.</p>
    <p class="sans-serif">This is text in a sans-serif font.</p>
    <p class="monospace">This is text in a monospace font.</p>
</body>
</html>

3) `font-size` Property

The font-size property determines the size of the text.

Possible Values:

Absolute values: px (pixels), e.g., 16px.
Relative values: em, rem, percentages.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.px {
            font-size: 16px; /* Fixed size in pixels */
        }
        p.em {
            font-size: 1.5em; /* Relative to the parent element */
        }
        p.rem {
            font-size: 2rem; /* Relative to the root element */
        }
        p.percent {
            font-size: 120%; /* Relative to the parent element's size */
        }
    </style>
</head>
<body>
    <p class="px">This text has a size of 16px.</p>
    <p class="em">This text is 1.5 times the size of its parent.</p>
    <p class="rem">This text is 2 times the size of the root element.</p>
    <p class="percent">This text is 120% of the parent's size.</p>
</body>
</html>

4) `font-style` Property

The font-style property specifies the style of the text (e.g., normal, italic, or oblique).

Possible Values:

normal: Default style.
italic: Italicized text.
oblique: A slanted version of the font.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.normal {
            font-style: normal; /* Default text style */
        }
        p.italic {
            font-style: italic; /* Italicized text */
        }
        p.oblique {
            font-style: oblique; /* Slanted text */
        }
    </style>
</head>
<body>
    <p class="normal">This text is normal.</p>
    <p class="italic">This text is italic.</p>
    <p class="oblique">This text is oblique.</p>
</body>
</html>

5) `text-align` Property

The text-align property aligns text horizontally.

Possible Values:

left: Aligns text to the left.
right: Aligns text to the right.
center: Centers the text.
justify: Stretches text to align both left and right edges.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.left {
            text-align: left; /* Aligns to the left */
        }
        p.right {
            text-align: right; /* Aligns to the right */
        }
        p.center {
            text-align: center; /* Centers the text */
        }
        p.justify {
            text-align: justify; /* Justifies the text */
        }
    </style>
</head>
<body>
    <p class="left">This text is aligned to the left.</p>
    <p class="right">This text is aligned to the right.</p>
    <p class="center">This text is centered.</p>
    <p class="justify">This text is justified. It will stretch the text so that it aligns both left and right margins.</p>
</body>
</html>

6) `line-height` Property

The line-height property sets the vertical space between lines of text.

Possible Values:

Fixed values (e.g., 20px).
Relative values (e.g., 1.5, 2).

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.fixed {
            line-height: 20px; /* Fixed space between lines */
        }
        p.relative {
            line-height: 1.8; /* Relative multiplier for spacing */
        }
    </style>
</head>
<body>
    <p class="fixed">This paragraph has a fixed line height of 20px. The spacing between lines is the same irrespective of the font size.</p>
    <p class="relative">This paragraph has a relative line height of 1.8. The space between lines increases proportionally with the font size.</p>
</body>
</html>

2. Background Properties in CSS

Background properties in CSS are essential for customizing the appearance of an element's background, such as adding colors, images, or patterns. These properties allow you to create visually appealing and dynamic designs. Below, we’ll explain the most important background properties in-depth, including real-world, practical examples.

1. `background-color` Property

The background-color property is used to set the background color of an element.

Possible Values:

Named colors: Predefined color names like red, blue, lightgray.
HEX values: Colors defined in hexadecimal, e.g., #FFFFFF for white.
RGB values: Colors using red, green, and blue components, e.g., rgb(255, 255, 255).
HSL values: Colors using hue, saturation, and lightness, e.g., hsl(0, 0%, 100%).

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            background-color: lightgray; /* Using a named color */
        }
        .section1 {
            background-color: #3498db; /* Using HEX */
        }
        .section2 {
            background-color: rgb(46, 204, 113); /* Using RGB */
        }
        .section3 {
            background-color: hsl(210, 100%, 50%); /* Using HSL */
        }
    </style>
</head>
<body>
    <h1>Background Color Examples</h1>
    <div class="section1">This div has a HEX background color.</div>
    <div class="section2">This div has an RGB background color.</div>
    <div class="section3">This div has an HSL background color.</div>
</body>
</html>

2. `background-image` Property

The background-image property is used to set an image as the background of an element.

Possible Values:

url(): The path to the image file.
none: No background image (default).

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            width: 100%;
            height: 300px;
            background-image: url('https://via.placeholder.com/800x300'); /* Adding a background image */
            background-color: lightgray; /* Fallback color */
        }
        .no-image {
            background-image: none; /* No background image */
        }
    </style>
</head>
<body>
    <h1>Background Image Example</h1>
    <div class="container">This div has a background image.</div>
    <div class="no-image">This div has no background image.</div>
</body>
</html>

3. `background-size` Property

The background-size property adjusts the size of the background image.

Possible Values:

auto: Default size of the image.
cover: Scales the image to cover the entire element, maintaining aspect ratio.
contain: Scales the image to fit within the element, maintaining aspect ratio.
Specific dimensions: Width and height specified in units (px, %, etc.).

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .original {
            width: 100%;
            height: 300px;
            background-image: url('https://via.placeholder.com/800x300');
            background-size: auto; /* Default size */
        }
        .cover {
            background-size: cover; /* Cover the entire div */
        }
        .contain {
            background-size: contain; /* Fit inside the div */
        }
        .custom {
            background-size: 150px 100px; /* Custom dimensions */
        }
    </style>
</head>
<body>
    <h1>Background Size Examples</h1>
    <div class="original">Original Image Size (auto)</div>
    <div class="cover">Image Scaled to Cover (cover)</div>
    <div class="contain">Image Scaled to Fit (contain)</div>
    <div class="custom">Image with Custom Size (150px by 100px)</div>
</body>
</html>

4. `background-position` Property

The background-position property sets the starting position of the background image.

Possible Values:

Keywords: top, bottom, left, right, center.
Coordinates: Specify using pixel or percentage values, e.g., 50px 100px or 20% 80%.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .top-left {
            background-image: url('https://via.placeholder.com/800x300');
            background-position: top left; /* Aligns to the top-left corner */
        }
        .center {
            background-position: center; /* Aligns to the center */
        }
        .custom {
            background-position: 50px 100px; /* Custom position: 50px from left, 100px from top */
        }
    </style>
</head>
<body>
    <h1>Background Position Examples</h1>
    <div class="top-left">Image Positioned Top-Left</div>
    <div class="center">Image Positioned Center</div>
    <div class="custom">Image Positioned at 50px, 100px</div>
</body>
</html>

Combining Background Properties

All background-related properties can be combined using the shorthand property background.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .shorthand {
            background: url('https://via.placeholder.com/800x300') no-repeat center/cover;
            /* Background image, no repeat, center position, cover size */
        }
    </style>
</head>
<body>
    <h1>Combined Background Properties</h1>
    <div class="shorthand">This div uses combined background properties.</div>
</body>
</html>

3. Box Model Properties

Control spacing, borders, and dimensions.

Properties

margin: Sets the outer spacing around an element.
- Possible Values: Length units, percentages, auto.

    div {
        margin: 20px;
    }

padding: Sets the inner spacing within an element.
- Possible Values: Length units, percentages.

    div {
        padding: 10px;
    }

border: Defines the border around an element.
- Possible Values: Width, style, and color.

    div {
        border: 2px solid black;
    }

width and height: Set the dimensions of an element.
- Possible Values: Length units, percentages, auto.

    img {
        width: 100px;
        height: 100px;
    }

4. CSS3-Specific Properties

Modern features that enhance interactivity and animations.

Properties

transition: Adds smooth animations for property changes.
- Possible Values: Property name, duration, easing function.

    button {
        transition: background-color 0.3s ease;
    }

transform: Applies transformations like rotate, scale, and skew.
- Possible Values: rotate(), scale(), translate().

    div {
        transform: rotate(45deg);
    }

box-shadow: Adds a shadow to an element.
- Possible Values: Horizontal offset, vertical offset, blur radius, spread radius, color.

    div {
        box-shadow: 2px 2px 5px gray;
    }

grid: Implements grid-based layouts.

  .container {
      display: grid;
      grid-template-columns: 1fr 2fr;
  }

CSS and CSS3 Properties Reference Table

Category	Property	Possible Values
Text	`color`	Color values (name, HEX, RGB, HSL)
	`font-family`	Font names
	`font-size`	Length units, percentages
	`text-align`	`left`, `right`, `center`, `justify`
Background	`background-color`	Color values
	`background-image`	URL, `none`
	`background-size`	`auto`, `cover`, `contain`, dimensions
Box Model	`margin`	Length units, percentages, `auto`
	`padding`	Length units, percentages
	`border`	Width, style, color
	`width`/`height`	Length units, percentages, `auto`
CSS3 Advanced	`transition`	Property, duration, easing function
	`transform`	`rotate()`, `scale()`, `translate()`
	`box-shadow`	Offsets, blur, spread, color
	`grid`	Grid-template properties

Conclusion

CSS and CSS3 provide a rich set of properties to style and enhance web pages. Beginners and professionals alike benefit from understanding these properties and their applications. Use this guide as a reference for mastering CSS and CSS3, from basic text formatting to advanced animations and layouts.

Comprehensive Guide to CSS and CSS3 Properties with Examples

Table of contents

What is CSS?

Structure of a CSS Rule

CSS Properties and Examples

1. Text and Font Properties

1) color Property

Possible Values:

Example Code:

2) font-family Property

Possible Values:

Example Code:

3) font-size Property

Possible Values:

Example Code:

4) font-style Property

Possible Values:

Example Code:

5) text-align Property

Possible Values:

Example Code:

6) line-height Property

Possible Values:

Example Code:

2. Background Properties in CSS

1. background-color Property

Possible Values:

Example Code:

2. background-image Property

Possible Values:

Example Code:

3. background-size Property

Possible Values:

Example Code:

4. background-position Property

Possible Values:

Example Code:

Combining Background Properties

Example Code:

3. Box Model Properties

Properties

4. CSS3-Specific Properties

Properties

CSS and CSS3 Properties Reference Table

Conclusion

1) `color` Property

2) `font-family` Property

3) `font-size` Property

4) `font-style` Property

5) `text-align` Property

6) `line-height` Property

1. `background-color` Property

2. `background-image` Property

3. `background-size` Property

4. `background-position` Property