Selectors are used to determine which specific HTML elements are to be styled. Some of the ways selectors can target elements is based on their tag names, classes, and IDs.
Properties are the styles appled to the selected elements. Each property comes with a value to determine how the selected element is to appear. Some of the stylings that properties cover are, colors, spacing, borders, and fonts.
This selects elements when the mouse cursor is over them. It is often associated with a link element. Hover can also be used to reveal the next level in a nested menu. It is recommended, however, to be used with some sort of action, as that has been the long-established web pattern.
This selector is used for styling an element currently targeted by the keyboard or the mouse. One use of focus is for tabbing through elements. Even though most browsers default the focus state with a dotted outline, with the focus selector, it may be replaced with a suitable alternative.
This property is used for position and layout of web pages. One use is to have an image to one side and having text wrap aorund it. In web design, elements with the float property are like the images in print layouts where the text flows around them. Floats can also be used to create entire web layouts. For text wrapping, the float property is the best choice.
This property controls the vertical stacking order of overlapping elements. Without any z-index value, elements would stack in the order they appear in the DOM.
There are a lot of selector and property combinations for web development. Selectors are used to target the specific HTML elements while properties are used to determine the actual stying of those selected elements. Together, they allow a web developer to control the appearance of web content with CSS.
You can check out more at: css-tricks.com/almanac/