# CSS reference

<table><thead><tr><th width="139.66237095424106">Property</th><th>Definition</th><th data-hidden></th></tr></thead><tbody><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><strong>margin</strong></a></td><td>The space around the outside of the border of the element</td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding"><strong>padding</strong></a></td><td>The space between the content and the border of the element</td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><strong>border-radius</strong></a></td><td>Rounds the corners of an element's outer border edge  </td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-color"><strong>border-color</strong></a></td><td>Sets the color of an element's border</td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width"><strong>border-width</strong></a></td><td>Sets width of an element's border</td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><strong>box shadow</strong></a></td><td>Adds a shadow effect around an element's frame</td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height"><strong>min-height</strong></a></td><td>Sets the minimum height of an element</td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width"><strong>min-width</strong></a></td><td>Sets minimum width of an element</td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width"><strong>max-width</strong></a></td><td>Sets the maximum width of an element</td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform"><strong>transform</strong></a></td><td>Let's you rotate, scale, skew, or translate an element </td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><strong>text-alignment</strong></a></td><td>Sets the horizontal alignment of the content inside a block </td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/opacity"><strong>opacity</strong></a></td><td>The degree to which the content behind and element can be seen</td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size"><strong>font-size</strong></a></td><td>Sets the size of the font. For responsive design, <a href="../../styling/customizing-appearance/typography#understanding-rem-sizing">rem units</a> are recommended</td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><strong>font-weight</strong></a></td><td>Sets the weight (i.e. boldness) of the font. The weights available are determined by the font-family that is set </td><td></td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"><strong>line-height</strong></a></td><td>Sets the space between lines of text</td><td></td></tr></tbody></table>

### CSS Length Units&#x20;

Formsort recommends using a handful of the [CSS length units](https://www.w3schools.com/cssref/css_units.asp) when defining the dimensions of a component (margin, padding, font size, etc.)

<table><thead><tr><th width="140.36358642578125">Property</th><th>Definition</th></tr></thead><tbody><tr><td>rem<br></td><td><p>Relative to the <a href="../../styling/customizing-appearance/typography#understanding-rem-sizing">base font size</a>. This allows responsiveness if there are differing base font sizes for different viewports. </p><p>Ex: 1.5rem of a base font size of 16px will be 24px (1.5 x 16 = 24).</p></td></tr><tr><td>vw</td><td><p>Relative to 1% width of the viewport. </p><p>100vw = 100% width of the viewport. </p></td></tr><tr><td>vh</td><td><p>Relative to 1% height of the viewport. </p><p>100vh = 100% height of the viewport.</p></td></tr><tr><td>% </td><td>Relative to the size of the parent element. <br>Setting 100% on a width property will allow that component to take 100% of the available space. </td></tr><tr><td>px</td><td>Pixel: 1px = 1/96th of 1in. <br>Pixels are unresponsive, so it is considered an absolute value. <br>If the content max width setting is 500px, it will be 500px regardless of changes in the viewport size (you can use <a href="../../styling/customizing-appearance/color-and-dimension-variables#dimension-variables">dimension variables</a> to create responsiveness, however)  <br>Useful for setting an absolute value for a component, i.e. a base font size or the width/height of a component. </td></tr></tbody></table>