From the course: CSS: Selectors

CSS terminology - CSS Tutorial

From the course: CSS: Selectors

Start my 1-month free trial Buy for my team

CSS terminology

“

- [Instructor] Before we get too far into discussing selectors, you might be wondering what exactly a selector is and you might wonder about the other parts of a CSS declaration. This terminology is very helpful for a course like this, so let's get clear about what the parts of a CSS declaration are called. First, there is the selector itself. This is anything that comes before the curly brackets in your CSS. Here, this is an element. It's an HTML tag that's being called in your CSS. And in this case, it's the article tag. Sometimes it's really simple, like a class or an ID. Here, we have the class of myclass. Sometimes there are several selectors separated by commas or sometimes you have a descendant selector like this one. The selector indicates that this is a test. If your code has a paragraph descended from a class of myclass, then the styling inside the curly brackets will apply. The declaration is a single line within the curly brackets. Font-size 1.2rem is one declaration. Line-spacing 2 is another declaration. There may be many declarations within a CSS style or they may be as few as one. A declaration block is everything inside of the curly brackets. That would include all of the individual declarations. So essentially, a CSS style is made up of a selector plus a declaration block. A declaration block is made up of many individual declarations. And what exactly makes up each declaration? There are two sides to a declaration. The left side is the property. This includes items like font-size, line-spacing, animation, grid template area, justify content, linear gradient, and so many others. The right side of the declaration is a value. Each property has certain permitted values. For example, font-size is expecting a number with a unit of measure like m, rem, pixel, point, millimeter, centimeter, percent, or inches. Other properties have very specific prescribed values. The float property, for example, could have values of left, right, or none, and nothing else would be correct. Sometimes you'll hear the combination of property and value referred to as a property-value pair. That's the same thing as a declaration in CSS. However, property-value pair is a term that comes to us from programming, where it's used in several programming languages. Since this is a pairing of a property and a value, it applies here as well. Property-value pair and declaration can be used interchangeably. With these terms in mind, let's do a quick review of some CSS selector types you already know and love.

Contents