Introduction
The CSS we wrote for the University of Louisville Libraries site includes a number of "cheat codes" - ways for page authors to adjust layouts as needed without needing to know CSS. To add these elements, look for the info in the Attribute column. You will add that inside a class="" in the HTML view of whatever element you want to affect.
Ex. You want to increase the left margin on the line "This is a test paragraph."
Original HTML: <p>This is a test paragraph.</p>
HTML with spacing attribute: <p class="margin-left-3">This is a test paragraph.</p>
Live example:
This is a test paragraph.
Box Model
Adding Border
| Attribute | Browser Will Show: | Example |
|---|---|---|
| border-black-1 | border 1px thick solid black | |
| border-gray-1 | border 1px thick solid #ccc | |
| border-black-2 | border 2px thick solid black | |
| border-gray-2 | border 2px thick solid #ccc |
Padding Spacing
| Attribute | Browser Will Show: |
|---|---|
| padding-0 | no padding around content |
| padding-1 | padding around content will be 1rem on all sides |
| padding-2 | padding around content will be 2rem on all sides |
| padding-3 | padding around content will be 3rem on all sides |
Margin Spacing
| Attribute | Browser Will Show: |
|---|---|
| margin-0 | no margin |
| margin-1 | margin around border will be 1rem on all sides |
| margin-2 | margin around border will be 2rem on all sides |
| margin-3 | margin around border will be 3rem on all sides |
| margin-right-1 | margin around border will be 1rem on right side |
| margin-right-2 | margin around border will be 2rem on right side |
| margin-right-3 | margin around border will be 3rem on right side |
| margin-bottom-0 | bottom margin will be 0 |
| margin-bottom-1 | bottom margin will be 1rem |
| margin-bottom-2 | bottom margin will be 2rem |
| margin-bottom-3 | bottom margin will be 3rem |
| margin-left-1 | margin around border will be 1rem on left side |
| margin-left-2 | margin around border will be 2rem on left side |
| margin-left-3 | margin around border will be 3rem on left side |