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.
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.
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.
In CSS there are selectors. You could even say that the CSS is selecting the HTML tags to be styled. ;)
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 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.
- You want to make your header font color white.
- 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.
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: rgba(100%,100%,100%, 1);
color: hsl(0, 100%, 100%);
color: hsla(0, 100%, 100%, 1);
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.
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.