U
U.N. 0W3N
Guest
Original poster
So, this was originally a guide that FieryCold allowed me to use to help users on RPNation. But, I fear that this would be erradicated with their upcoming update. So, it's going to stay in here for my sanity's sake.
color | Sets the color of the text.
| ||
font-family | Specifies the font family for the text.
| UPDATE: They kinda work for Google Fonts. But, don't expect users to have the font downloaded on to their computer already. | |
font-size | Specifies the font size of the text.
| ||
background-color | Sets the background color of an element.
| ||
background:linear-gradient | makes the background a gradient. you can put more than two colours and transparent as well.
| ||
background:url | Sets an image as the background of an element.
| background:url(url here) repeat center fixed; | Fixes the image so that it doesn't scroll with the page. |
background:url(url here) no-repeat; | Prevents the background image from repeating. | ||
background:url(url here) repeat-x; | Repeats the image along the x-axis (horizontal). | ||
background:url(url here) repeat-y; | Repeats the image along the y-axis (vertical). | ||
background-size | Sets the dimensions of the background image. Width first, then height.
| ||
background-position | Sets the starting position of the background image. This is used with the background:url property, which sets the image. The first value specifies the horizontal position whereas the second value specifies the vertical position.
| ||
border | Sets the style, color and thickness of the edge or boundary of an element.
| border-left: value style color; border-right: value style color; border-top: value style color; border-bottom: value style color; | Sets properties of SPECIFIC borders; side-specific. |
border-style (e.g. border-style: dotted solid dashed double) | Another way of coding the style for each border side. Follows the TRBL rule. From the example on the left:
There are also groove, ridge, inset, outset. | ||
border-radius | Sets the roundness of the border corners.
| border-top-left-radius: value; border-top-right-radius: value; border-bottom-left-radius: value; border-bottom-right-radius: value; | Sets roundness of SPECIFIC border corners. |
box-shadow | Attaches one or more shadows to an element. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0.
| ||
width | Sets the width of an element.
| ||
height | Sets the height of an element.
| ||
min-height | the box will be that height and if the text surpasses it it will automatically expand | ||
max-height | the box will be that height and if the text surpasses it it will automatically turn into a scrollie (therefore you must add overflow:auto with it) | ||
margin | Sets the distance between the element and other elements.
| margin-left: value; margin-right: value; margin-top: value; margin-bottom: value; | Sets the left/right/top/bottom margin of an element respectively. |
margin-left: auto; margin-right: auto; OR just margin: auto; | Centers the element. | ||
padding | Sets the distance between the element and the border.
| padding-left: value; padding-right: value; padding-top: value; padding-bottom: value; | Sets the left/right/top/bottom padding of an element respectively. |
text-align | Aligns the element.
| ||
text-indent | Adds indentation to the first line in a text block.
| ||
text-shadow | Adds shadow to the text.
| ||
text-transform | Controls the capitalization of the text. | text-transform: uppercase; | Transforms all characters to uppercase. |
text-transform: lowercase; | Transforms all characters to lowercase. | ||
text-transform: capitalize; | Capitalizes the first character of each word. | ||
text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user. | text-overflow: clipped; | Overflowed content is clipped. |
text-overflow: ellipsis; | Overflowed content is represented by an ellipsis. | ||
line-height | Specifies the distance between lines.
| ||
letter-spacing | Increases or decreases the space between characters in a text.
| ||
word-spacing | Increases or decreases the space between words in a text.
| ||
opacity | Sets the transparency of an element, with 0.0 being fully transparent and 1.0 being fully opaque.
| ||
display: none | Hides the element. | ||
display: inline-block | Ensures that the content wraps nicely when the browser is resized. | ||
overflow-x | Specifies what happens if content overflows an element box along the x-axis (horizontally). | overflow-x: hidden; | Hides the overflowing content. |
overflow-x: scroll; | Displays overflowing text along a particular direction (x-axis, horizontal). | ||
overflow-y | Specifies what happens if content overflows an element box along the y-axis (vertically). | overflow-y: hidden; | Hides the overflowing content. |
overflow-y: scroll; | Displays the overflowing text along a particular direction (y-axis, vertical). | ||
white-space: nowrap | Prevents long words from breaking and moving on to the next line. | ||
transform: rotate(#deg) | Rotates the element. | ||
position | Specifies the type of positioning method used for an element (static, relative, absolute or fixed).
|
| |
pointer-events: none; | most useful for disabling the "click to view at full size" thing on images | ||
font-style | Adds a "style" to your font. Oblique skews your letters (8 to 12 degrees usually) while italic is an actual italic font style (especially valid for Serif typefaces like Times New Roman)
| ||
font-weight | defines your letter thickness. For the number parameter, it runs from 100-900, with 400 being normal.
| ||
vertical-align | sets the vertical alignment of an element; its use is especially apparent when using two inline-blocks next to each other. For more info, go here. |