Basic CSS

Style applied inline with the style attribute.

Tag styled in html using <style> tag.

Tag styled using class attribute.

Another tag styled with class attribute and with a p selector.

This paragraph uses cutom font, but can also degrade.

Smaller image using 'width' property: Portrait

Image with a border and small width (two classes): Portrait

Custom 'background-color' property.

This has an ID and its CSS has higher priority than its class.

Margin and Padding:

This has higher padding

Then this

This has higher margin

Then this

This has no margin

This has negative margin

Using attribute selector to only select a checkbox: Using relative units for elements width and height:

10em width and height;

Remember that all children will inherit properties from their parents. At least those properties whose default values are set to inherit.
For example font size of all elements on this page is inherited from the body element.

If tag has multiple classes with overlapping properties then the class that was declared last will be applied.
ID declarations will override class declarations.
Inline styles will override id declarations.
Properties declared with the !important keyword will override all other declarations.

Don't forget about fallback values with css variables
var(--var-name [, optional-fallback-value])