Consider:
p { ... } .foo { ... } #bar { ... }
What is the correct name for these statements in CSS? I've seen them called selectors, rules or rulesets, but which is correct?
CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser. The browser applies CSS style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a webpage looks.
There are two kinds of statements: Rulesets (or rules) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
In CSS, a declaration is the key-value pair of a CSS property and its value. CSS declarations are used to set style properties and construct rules to apply to individual or groups of elements. The property name and value are separated by a colon, and the entire declaration must be terminated by a semi-colon.
The Universal Selector is the * in CSS. Literally the asterisk character. It is essentially a type selector that matches any type. Type meaning an HTML tag like <div> , <body> , <button> , or literally any of the others. A common use is in the universal reset, like this: * { margin: 0; padding: 0; }
A rule would be considered:
p {…}
A selector in this case is:
p
A rule is made up of selectors and declarations. A declaration is property:value
so the entire rule would be:
selector { property:value }
A rule can have multiple declarations and multiple selectors so we can actually have:
selector, selector2
{
property:value;
property2:value;
}
A rule set would be multiple rules.
Here's a quick source on this or the CSS 1 Specification.
CSS is made up of a number of rules in the form
selector{declaration}
So the .foo and #bar and p are called selectors but the full statement with the curlies are called rules.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With