Font and Spacing CSS has a lot of properties. CSS can do so many things, but often the font and spacing are overlooked. Common font related properties:

1. color – sets the font color

2. font-size – sets the font size

3. font-weight – sets the font weight (skinny to very bold)

4. text-align – sets the font position inside element (left, centre, right, justify)

font-family – sets the actual font type

Text Spacing

Text spacing, refers to characters in relation to other characters. The first important property is letter-spacing, which is the horizontal spacing between characters. The second and final is the line-height that is the vertical spacing between text lines.

CSS box model

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge. Every box has a content area and an optional surrounding margin, padding, and border.

1.The innermost rectangle is the content box. The width and height of this depend on the element‘s content (text, images, videos, any child elements ).

2.Then have the padding box (defined by the padding property). If there is no padding width defined, the padding edge is equal to the content edge.

3. Next, the border box (defined by the border property). If there is no border width defined, the border edge is equal to the padding edge.

4. The outermost rectangle is the margin box. If there is no margin width defined, the margin edge is equal to the border edge.

CSS Position

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. There are 5 main values of the Position Property: position: static , relative , absolute , fixed , sticky and additional properties for setting the coordinates of an element : top , right , bottom , left AND the z-index.

What is this z-index?

Consider height and width (x, y) as 2 dimensions. Z is the 3rd dimension. An element in the webpage comes in front of other elements as its z-index value increases. Z-index doesn‘t work with position: static or without a declared position. The .features-menu element needs to have a lower z-index than the Features label. The default z-index value is 0, so make both of them higher than that. It can conveniently wrapped the Features label in a allowing to style it via a child selector.

Position Properties

1. Static position: static is the default value. Whether declare it or not, elements are positioned in a normal order on the webpage.

2.  Relative position: relative: An element‘s new position relative to its normal position.

3. Absolute In position: relative, the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element. If it doesn‘t have any parent elements, then the initial document will be its parent. Since position: absolute removes the element from the document flow, other elements are affected and behave as the element is removed completely from the webpage. Add a container as parent element.

4. Fixed Like position: absolute, fixed positioned elements are also removed from the normal document flow. The differences are: They are only relative to the document, not any other parents. They are not affected by scrolling.

5. position: sticky It can be explained as a mix of position: relative and position: fixed. It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed.