CSS Tricks Almanac

Research

What are Selectors?

Selectors are objects used to style an html element. A selector could be that specific element, an element with a specified class or id name, a nested element inside another specific element, or a specific state on an element at any given time.

What are Properties?

A property is a part of an element that can be styled. Some properties include color, border, margin, etc. In addition, some properties only work for certain elements, or work in conjunction with other properties, such as a 'flex-wrap' property only working on an element with the 'display: flex' property and value.

Document

Selectors

::before and ::after selectors. These allow a user to insert content before and after an element on the page without putting it in the HTML. Can be used to insert items like an image, 'nothing content', and line breaks.

::selection selector. When a user selects a particular sentence or group of words on a website, the blue background and changed font color have been used to indicate the selection state. This selector can change the background color and font color of the selected text.

Properties

'animation' property. This property can be used to animate other CSS properties like colors and size on a certain element. The animation utilizes 'key frames' to determine when to do certain actions.

'cursor' property. The cursor property changes what the mouse cursor would look like when hovering over certain elements. This is present by default on certain elements, where links have a pointer finger sticking out, indicating the user can click on the link, and text has a vertical line to indicate that the text can be selected.

Summary

Selectors are items in CSS that select an element to be modified, where the selector could be the element name, a class name, or element state. Properties are individual modifiers to an element that can change things such as color, background, border, margin, padding, etc. Overall, there are plenty of unique ways to utilize selectors and numerous properties to modify the way a website looks.