4 css terms

4 CSS Terms You Need to Know

June 14, 2018|CSS, Getting Started with CSS

There are a few terms that you will see over and over when CSS is described or explained. They’re not complicated. And after reading this you will probably feel like, okay, easy peasy. At least I hope you will, that’s my goal.

Knowing these terms will give you the terminology to talk about your CSS. It will also help you understand what others are talking about.

Those four words are: selector, declaration, property, and value. Let’s look at each one.

Selector

In HTML there are tags. Let’s say you’re writing your HTML document and you want to include a headline on your page. The text for that headline is going to be wrapped in a header tag so that your browser knows it’s the main header on the page and not a paragraph or an image or something else.

<h1>Hello world!</h1>

Let’s say you want to change the way that header looks. Now we’re talking about targeting that header with CSS. To do that we use selectors. Here’s what that CSS might look like.

Visual representation of a CSS selector

In CSS there are selectors. You could even say that the CSS is selecting the HTML tags to be styled. ;)

Declaration

In order to make that header white and change it’s size you need to declare those styles in your CSS document. You would do that like this:

(The CSS styles declaration)

The declaration includes all of the CSS styles for that given selector. In this case it’s the h1 tag that’s being styled.

Property & Value

For each line in your declaration you will have a property and a value. For this example, let’s look at the two lines of styles you want to apply to your header.

  1. You want to make your header font color white.
  2. You want to size the header to be 24 pixels.

To do that you need to first use the correct property and value combination. It’s much easier than it sounds. It would look like this.

CSS property and values visually shown

You can see that the property to make your font white is color and the value for that property is whatever color you want. In this case it’s simply white. You actually have a lot of options for when it comes to color. All of these values would work:

  • color: white;
  • color: #fff;
  • color: #ffffff;
  • color: #ffffffff;
  • color: rgb(255,255,255);
  • color: rgb(100%,100%,100%);
  • color: rgba(255,255,255,1);
  • color: rgba(100%,100%,100%, 1);
  • color: hsl(0, 100%, 100%);
  • color: hsla(0, 100%, 100%, 1);
  • color: transparent;
  • color: currentColor;

These values only work for the color property. They wouldn’t work for font-size, for instance. As you can probably guess the font-size property accepts different values than the color property.

If you’d like an exhaustive list of all the different CSS selectors, properties, and values here’s one of my favorites.

Conclusion

Knowing these four CSS terms (selector, declaration, property, and value) will not only give you the terminology to talk about your CSS but help you understand what others are talking about.

Learn to Effortlessly Create Anything in CSS

Get access to my free courses, best articles, and tips once a week.

I won't send you spam, promise. If it ever feels that way you can unsubscribe at any time.

Sign Up For Free

×

Sign In

×