CSS REFERENCE (INCOMPLETE) PropertyDescriptionDerivativesDescriptioncolorSets the color of the text. color: hex|name; e.g. color: #000000; e.g. color: black; font-familySpecifies the font family for the text. font-family: fontname; e.g. font-family: Times New Roman; font-sizeSpecifies the font size of the text. font-size: value; e.g. font-size: 12px; e.g. font-size: 2em; background-colorSets the background color of an element. background-color: hex|name; e.g. background-color: #000000; e.g. background-color: black; background:urlSets an image as the background of an element. background:url(url here); 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-sizeSets the dimensions of the background image. Width first, then height. background-size: value value; e.g. background-size: 400px 200px; e.g. background-size: 100% 50%; background-positionSets 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. background-position: value value; e.g. background-position: 0% 0%; (top left corner) e.g. background-position; 100% 100%; (bottom right corner) borderSets the style, color and thickness of the edge or boundary of an element. border: value style color; e.g. border: 1px dotted #000000; 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: top border is dotted right border is solid bottom border is dashed left border is double There are also groove, ridge, inset, outset.border-radiusSets the roundness of the border corners. border-radius: value; e.g. border-radius: 14px; 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.widthSets the width of an element. width: value; e.g. width: 200px; heightSets the height of an element. height: value; e.g. height: 200px; marginSets the distance between the element and other elements. margin: value; e.g. margin: 20px; 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.paddingSets the distance between the element and the border. padding: value; e.g. padding: 20px; padding-left: value; padding-right: value; padding-top: value; padding-bottom: value;Sets the left/right/top/bottom padding of an element respectively.text-alignAligns the element. text-align: left|right|center|justify; text-indentAdds indentation to the first line in a text block. text-indent: value; e.g. text-indent: 20px; text-shadowAdds shadow to the text. text-shadow: h-shadow v-shadow blur-radius color; e.g. text-shadow: 2px 2x 3px #000000; text-transformControls 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-overflowSpecifies 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-heightSpecifies the distance between lines. line-height: value; e.g. line-height: 2em; letter-spacingIncreases or decreases the space between characters in a text. letter-spacing: value; e.g. letter-spacing: 2px; e.g. letter-spacing: -2px; word-spacingIncreases or decreases the space between words in a text. word-spacing: value; e.g. word-spacing: 10px; e.g. word-spacing: -10px; opacitySets the transparency of an element, with 0.0 being fully transparent and 1.0 being fully opaque. opacity: value; e.g. opacity: 0.5; display: noneHides the element. display: inline-blockEnsures that the content wraps nicely when the browser is resized. overflow-xSpecifies 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-ySpecifies 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: nowrapPrevents long words from breaking and moving on to the next line. transform: rotate(#deg)Rotates the element. HOW-TO'S ON DIV BOXES (Move your mouse to the spoiler area to reveal the content) Work in progress. ON THE OVERFLOW PROPERTY (Move your mouse to the spoiler area to reveal the content) The div scroll [dscroll][/dscroll] may be a handy feature, but it doesn't provide much room for customization. This guide will focus on how to create scroll boxes that you can design in many different ways. Scrollable content all comes down to the overflow property. There are overflow-x and overflow-y. Overflow-x specifies what happens to content located along the horizontal line, whereas overflow-y specifies what happens to content located along the vertical line. Let's start off with overflow-y. This property should let you scroll along the length of your div box. However, setting a height is also necessary. The content will cut off at whatever height measurement you set, such that any overflowing content becomes scrollable--hence, the term overflow. Width is not so much important unless you're going for a specific style. You may set the height in pixels or whichever method you prefer. In this guide, I will be using 50px but you may adjust that according to your preference. Going by that logic, the same should be true for overflow-x. This property should let you scroll along the width of your div box. However, while overflow-y needs a specific height measurement, overflow-x needs a specific width measurement. Any overflowing content along the x-axis should be scrollable. Despite utilizing the same logic as overflow-y, the code doesn't seem to turn out right. We can't scroll along the x-axis, but why? It's because the text automatically wraps so that any overflowing content moves to the next line. Fortunately, there is a code that can help override this. The white-space: nowrap property should solve our problem. As such: We can use both overflow-x and overflow-y should we need to. Just cross-reference the codes used above, such that: What's great about this div scroll is that you can also easily add borders, backgrounds, and many other customizations to the code. Simply append these desired properties to the existing div tag. ON WHITE SPACES (Move your mouse to the spoiler area to reveal the content) For all of us lazy people who don't want to bother using the letter-spacing and word-spacing properties. Because Iwaku does not let us type two or more consecutive spaces, we are going to resort to unicodes—specifically U+2000, also known as the EN QUAD—to achieve a similar effect. You can encode the EN QUAD by pressing Alt +2000 (for Windows users) or you may just copy-paste the blank spaces before the arrow: ← U+2000 EN QUAD Now, you can add more s p a c e s between your text. ON INVERTED/LOPSIDED TEXT OR IMAGES (Move your mouse to the spoiler area to reveal the content) Well, this requires a bit of math. Rotating something -180 degrees is essentially turning it upside down, such that: upside down text You can use the same code to slant your text or image. Just change the number to something like 10 degrees. ON FONT AWESOME ICONS (Move your mouse to the spoiler area to reveal the content) Back when Iwaku had an entirely different format (remember the overview, cast list, etc. tabs?), all first thread posts had a star symbol in them. Well, it turns out, you can do more than just star symbols! Size can be adjusted, with 1x being the smallest and 5x being the biggest. (Edit: I just found out that there is a Font Awesome creator in the Rich Text Editor! It's the last icon, shaped like a triangle.) You can also rotate, spin, stack, and do more awesome things with font awesome icons: ON REMOVING ACCORDION BORDERS (Move your mouse to the spoiler area to reveal the content) Those accordion borders look a little tacky, but fortunately there's a way to remove them! We just need to do a lil bit of tweaking: First, we set the margins to a negative value. Think of it as cutting away the outer layer of the accordion. -7px for the header and -6px for the body ought to do the trick. Try not to change these values because they're already accurate. I highlighted them in red for you. :3 The codes in green, however, can be altered or even removed. A COUPLE OF TIPS Don't completely rely on Rich Text. Codes can be overwhelming at first, but practice makes perfect and helps you memorize CSS properties. Use div tags instead of the rich text editor when setting font styles. Rich text tends to fuck up A LOT. Using div tags will save you a lot of time and effort, especially if you're the type of person who likes complicated coding. Your display resolution is not universal. The site looks vastly different on mobile and on certain laptops. You can control how your codes will turn up on other devices, but only to a certain extent. Properties such as display-inline, max-width, and the likes may be useful in that regard. Did you add a background image/color? Remember to color your text. Iwaku offers more than one theme: There's Bright Light, Black Night, Grey Mist, Thunder Grey, and many more. Bright Light users have black text on a white background, whereas Black Night users have white text on black. This means that, if you're a Black Night user who decides to use a dark grey background but you forget to color your text, it would look fine on your end because Black Night's default font color is white. However, for White Light users, it would appear as black on dark grey, which would be hard to read. Protip: After coding, switch to a different theme. Not only will this give you a new perspective on your work, it will also tell you whether or not you forgot to code in those pesky font colors. Why you should never use the marquee tag: Not only does it not work on all browsers, it's also extremely tacky. Unless tackiness is completely intentional, avoid the marquee. Need more persuasion? This article and this article should explain it enough. Follow the rules of typography. As a general rule of thumb, don't use more than two fonts and avoid too many colors! Use colors sparingly. Prepare a palette for what you have as your banner or your background using the color picker tool in Photoshop. Stick to your palette. Assign specific colors for your headers, borders, font, etc. Experiment with Unicodes. I wouldn't recommend using too much of these as some unicodes may not turn up on certain devices. However, they do provide a lot of aesthetic value, so experimenting with these may spice up your coding.