DEV Community

Cover image for The CSS Series - Part 4: Properties
Nathan B Hankes for Vets Who Code

Posted on

6 1

The CSS Series - Part 4: Properties

Introduction

This tutorial provides the definition of the CSS property and provides various examples and resources to find out more.

Prerequisites

A basic understanding of HTML

Understanding CSS Properties

CSS properties define a design or functionality aspect that will apply to the HTML element defined by a CSS selector. Every CSS property has a list of predefined CSS property values that apply to it. In the following CSS syntax, the selector is used to define an HTML element to which the { property: property value } pair, or declaration, applies.

selector {
  property: property value;
}
Enter fullscreen mode Exit fullscreen mode

In the below example, we have placed div in the selector position, meaning the { property: property value } pairs, or declarations, that follow apply to all div elements within the linked HTML file. The CSS property here is "background," and its property value of "red" will change the background to the color red.

div {
 background: red
}
Enter fullscreen mode Exit fullscreen mode

In the above example, we've assigned a background color of red to all div elements within the linked HTML file.

Harnessing the Power of CSS Properties

CSS properties can change almost every design aspect you can imagine. You are only limited by your knowledge of what's possible, so it is important to familiarize yourself with the CSS properties available for your use.

Some of the ways CSS properties allow you to change the HTML design:

  • Coloration
  • Shape and size
  • Font manipulation
  • Orientation (left, centered, right, custom)
  • Movement
  • Spacing between HTML elements
  • Opacity
  • And countless other ways.

Exploring CSS Properties

The following link leads to a list of CSS properties with brief descriptions. It's important to familiarize yourself with this list so you know what's available to you.

Conclusion

You just learned about CSS Properties and gained some familiarity with the ways in which they can change HTML elements. Continue to the next tutorial to learn about the CSS Box Model.

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay