Design Definition of CSS Property

What are CSS properties, and how to you use them?

A website's visual style and layout are dictated by CSS or Cascading Style Sheets. These are documents that shape a webpage's HTML markup, providing web browsers with instructions on how to display the pages that result from that markup. CSS handles a page's layout, as well as color, background images, typography, and so much more.

If you look at a CSS file, you will see that, like any markup or coding language, these files have a specific syntax to them. Each style sheet is made up of a number of CSS rules. These rules, when taken in full, are what styles the site.

The Parts of a CSS Rule

A CSS rule is made up of two distinct parts — the selector and the declaration. The selector determines what is being styled on a page, and the declaration is how it should be styled. For example:

p {
color: #000;
}

This is a CSS rule. The selector part is the p, which is an element selector for "paragraphs." It would, therefore, select ALL paragraphs in a site and provide them with this style (unless there are paragraphs that are targeted by more specific styles elsewhere in your CSS document). 

The part of the rule that says, "color: #000;" is what is known as the declaration. That declaration is made up of two pieces — the property and the value

The property is the color piece of this declaration. It dictates which aspect of the selector will be changed visually. 

The value is what the chosen CSS property will be changed to. In our example, we are using the hex value of #000, which is CSS shorthand for "black."

So using this CSS rule, our page would have paragraphs displayed in a font-color of black.

CSS Property Basics

When you write CSS properties, you cannot simply make them up as you see fit. For instance, "color" is an actual CSS property, so you can use it. This property is what determines the text color of an element. If you tried to use "text-color" or "font-color" as CSS properties, these would fail because they are not actual parts of the CSS language.

Another example is the property "background-image." This property sets an image that can be used for a background, like this:

.logo {
background-image: url("/images/company-logo.png");
}

If you tried to use "background-picture" or "background-graphic" as a property, they would fail because, once again, these are not actual CSS properties.

Some CSS Properties

There are a number of CSS properties that you can use to style a site. Some examples are:

  • Border (including border-style, border-color, and border-width)
  • Padding (including padding-top, padding-right, padding-bottom, and padding-left)
  • Margins (including margin-top, margin-right, margin-bottom, and margin-left)
  • Font-family
  • Font-size
  • Background-color
  • Width
  • Height

These CSS properties are great ones to use as examples, because they are all very straightforward and, even if you do not know CSS, you can probably guess what they do based on their names. 

There are other CSS properties that you will encounter as well which may not be as obvious how they work based on their names:

  • Float
  • Clear
  • Overflow
  • Text-transform
  • Z-index

As you get deeper into web design, you will encounter (and use) all these properties and more!

Properties Need Values

Every time you use a property, you must give it a value — and certain properties can only accept certain values.

In our first example of the "color" property, we need to use a color value. This could be a hex value, RGBA value, or even color keywords. Any of those values would work, however, if you used the word "gloomy" with this property, it would do nothing because, as descriptive as that word may be, it is not a recognized value in CSS.

Our second example of "background-image" requires an image path to be used to fetch an actual image from your site's files. This is the value/syntax that is required.

All CSS properties have values that they expect. For example:

  • Border-color expects a color value.
  • Border-size expects a sizing value, like pixels or percentages.
  • Border styles expects one of the reserved styles used for this property, like "solid."

If you go through the list of CSS properties, you will discover that each of them has specific values that they will use to create the styles they are intended for.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Design Definition of CSS Property." ThoughtCo, Sep. 2, 2021, thoughtco.com/property-definition-3466899. Kyrnin, Jennifer. (2021, September 2). Design Definition of CSS Property. Retrieved from https://www.thoughtco.com/property-definition-3466899 Kyrnin, Jennifer. "Design Definition of CSS Property." ThoughtCo. https://www.thoughtco.com/property-definition-3466899 (accessed March 29, 2024).