CSS syntax - CSS Tutorial

- [Instructor] Because CSS is a declarative language, and the point of it is to define style properties for specific elements, the syntax of CSS comes in the form of rule sets containing a list of CSS declarations. Let's take a closer look at each component within a CSS rule set. A CSS declaration consists of a property value pair separated by a colon and ending with a semicolon. Both property names and values are generally case insensitive and the property name defines what property is targeted while the value sets the value for that property. So, many CSS properties can be controlled individually or as a group in shorthand. For example, the padding property can either be defined by individual side, padding top, padding right, padding bottom, padding left. Biological individual side, padding block start, padding inline end, padding block end or padding inline start. Or in shorthand where the values are top, right, bottom and left, and each value is separated by a space. You'll find a full list of all available CSS properties along with their documentation at the MDN web doc CSS reference. CSS declarations are bundled together in declaration blocks placed inside of curly braces. If you've worked with JavaScript objects before, the syntax will look familiar. Just note there's a semicolon separating each of the property value pairs, not a comma. Now here's an interesting note. While certain linting standards or developer preferences may specify listing declarations in alphabetical order, technically the order doesn't matter. The only exception to this is unless one of the declarations overrides another one, and then order does matter. So check out this example. Here, padding block end is overriding the bottom value of the previous padding declaration because it's further down in the cascade. The declaration block is applied to one or more HTML elements using a list of one or more comma-separated selectors, also called a selector group. This list is placed before the opening curly brace and operates sort of like an object name. This construct, the selector group, the declaration block, and the individual declarations inside form a CSS rule set. A style sheet can have an unlimited number of CSS rule sets listed. They just come one after the other. In addition to rule sets, there's also something called at-rules named because they start with the @ symbol. Generally speaking, these tell CSS how to behave or perhaps when to conditionally apply a rule set. For example, the @media rule defines a media query. Support asks a browser if it supports a specific property. Import is used to import an external style sheet, and keyframes describes the steps in a CSS animation sequence. These are just a handful of the at-rules you might encounter. CSS rule sets and at-rules both fall under the broader category of CSS statements. To sum it up, CSS syntax is made up of declarations and declaration blocks, which are targeted using selector groups. These form rule sets and are enhanced by at rules together making up the CSS statements in a style sheet.