Selectors and Properties
In CSS, styling rules are made up of several components. Selectors tell the browser which element, pseudo-element, class, etc. to apply styling to; properties tell the browser which styling to apply; and values determine the specifics of how the styling is applied. In the following CSS rule p {color: green;}
, "p" is the selector, "color" is the property, and "green" is the value. Combined together, they tell the browser to color paragraph elements green.
2 Selector Examples
:hover
determines what styling to apply to an element when the mouse is hovered over it. A number of different properties may be applied to a hover, such as adding a border, changing the main or background color, changing the font styling, etc. Hover states are most commonly applied to links, but may be applied to any valid element.
Source: CSS-Tricks Almanac - :hover
::marker
allows you to style the marker (bullet point, hyphen, etc.) of a list element or item. Its color, font-weight, size, or even content can be changed from its default (bullets/shapes for unordered lists, numbers/numerals for ordered lists) to whatever you'd like (emojis, symbols, words, etc., as long as the browser supports it).
Source: CSS-Tricks Almanac - ::marker
2 Property Examples
background-attachment
determines how the background of a page moves in relation to the viewport window. scroll
allows the background to scroll within the main view of the web page (the browser window) while remaining fixed within the local view (a smaller subset of the main view); fixed
keeps the background in place whether or not it is within a local view; and local
in essence combines both values to allow the image to scroll with the main view and within the local view.
Source: CSS-Tricks Almanac - background-attachment
letter-spacing
determines how much space appears between letters in a text block or element (also known as kerning). Font-relative values such as em
or rem
are standard values which will add spacing on top of the default spacing determined by the browser. Negative values will draw letters in to each other and decrease the space between them.
Source: CSS-Tricks Almanac - letter-spacing
Summary
Selectors and properties are the building blocks of CSS rules. Selectors tell the browser what's being styled, properties tell the browser how to style them, and a property's value determines how much/what kind. A CSS rule without any of these components is invalid and incomplete. CSS-Tricks' Almanac of selectors and properties is an invaluable resource to coders seasoned or amateur.