Unused Cactus, haver of peonouns

There are several size units for HTML and CSS

• px, the size in pixels
• em, the size based off of the size of text
• rem, the size based off of the root size of text
• vw, the size based off of browser page width
• vh, the size based off of browser page height
• percent (%), the size based off of the amount of available space

The <span> tag is used to apply styles to inline text, like making this text green and very bold.

The border-image property can be used to set an image as a border around an element. Images used for this purpose should have uniform sections dedicated to corners and edges so that they do not bleed into eachother. More information can be found here

The transform property can transform items in multiple ways:

• Rotate, which rotates items by a certain number of degrees (deg), radians (rad), and turns(turn). Can rotate over the z axis (visually clockwise/counter-clockwise), the x axis (visually upwards/downwards), and the y axis (visually left/right). Can also be applied via vectors, with the syntax "rotate:[x multiple] [y multiple] [z multiple] [angle][unit];". Default is rotation over the z axis.
• Translate, which moves items by a certain amount of units. Can translate over the x axis (visually left/right), the y axis (visually up/down), and the z axis (visually forwards/backwards in 3D space). Order of values is X Y Z.
• Skew, which skews items by the same types of angles that Rotate does. Items can only be skewed over the X and Y axes.
• Scale, which scales items either using a percentage or multiple of their size. Negative values mirror the item over the Y and Z axes when X is negative, over the X and Z axes when Y is negative, and over the X and Y axes when Z is negative. Order of values is X Y Z.

Notes: Transform does not work on span tags, unless they are specifically set to be inline-block or block. Translate, rotate, and scale over the Z axis only work once the perspective property has been set.

The transition property, much like the transform property, changes the appearance of items, though it changes them when a condition is met. This condition can be set by psuedo-classes like :hover or :active. What the transition does is defined by translate properties beneath it. Syntax is "transition:[propertyName/all] [duration] [easing funtion] [delay]", and multiple properties can be altered by seperating them with commas.

More information can be found here.