2R - CSS Tricks Almanac

What are selectors and properties?

CSS selectors target HTML elements on web pages to be styled, while CSS properties style the elements through their values.

Selector Examples

Two common CSS selectors are class and ID selectors.

Class selectors start with a dot (.) and selects all elements with a matching class attribute. Classes can have any name that starts with a letter, hyphen, or underscore. While numbers can be used in class names, they can't be the first character or second character after a hyphen. Elements can also have more than one class, and will be styled with CSS rules for each class. Class selectors are more powerful than element selectors but less powerful than an ID selector.

The ID selector allows you to target an element by referencing the ID HTML attribute. ID attributes are prefixed with an "octothorpe", also known as a "hash" or "pound" sign. HTML with two or more identical IDs will not validate, and will produce unpredictable results. These selectors are extremely powerful, as they have a very high specificity. Styles applied with them override other selectors that use tags or classes. Avoiding the ID selector is considered a best practice in CSS, it is preferable to use a class in nearly every case. A valid ID cannot start with a number and must be at least one character long, and ID attributes and selectors are case-sensitive.

Property Examples

Two examples of CSS properties are overflow and border-collapse.

The overflow property controls what happens to content that breaks outside of the bounds of the div it's placed in. The overflow property has several different values: visible, hidden, scroll, clip, auto, initial, and inherit. It's also possible to manipulate the overflow of content horizontally or vertically with the overflow-x and overflow-y properties.

The border-collapse property is for use on table elements, or elements made to behave like a table through display: table or display:inline-table. Two values for the border-collapse property are seperate and collapse. Seperate is where all table cells have their own independent borders and there may be space between those cells as well. Collapse is where both the space and borders between table cells collapse so there is only one border and no space between cells.

Summary

The CSS Tricks Almanac is a great alphabetized resource for learning various CSS selectors and properties. It gives an informative overview on each topic, and is filled with examples for how to best utilize the selectors and properties.