# 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="/pages/-MJTTsfI8h6fH_kNrHdr#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="/pages/-MJTTsfI8h6fH_kNrHdr#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="/pages/-MJSrMcVkJuLD03lsmU3#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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.formsort.com/css-and-advanced-styling/css-reference.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.