Using CSS on FPSB
This tutorial assumes you're already familiar with HTML so if you aren't I strongly suggest reading my tutorial on it first: Using HTML on FPSB.
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (style) of a markup language, for example, Extensible HyperText Markup Language (XHTML). I think you can guess where I'm going with this. On FPSB, which happens to use XHTML 1.0 Transitional, CSS is a convenient way to change the fonts, colors, alignment, spacing, positioning, borders, etc. in your threads and posts.
There are three ways to provide CSS for your XHTML content: an external stylesheet combined with the XHTML <link> element, the <style> element, and the style attribute. Because using <link> or <style> requires access to the <head> element, which you do not necessarily have on FPSB, this tutorial will concentrate solely on the style attribute.
The value of the style attribute consists of a list of CSS "declarations" separated by semi-colons. Each declaration consists of a CSS "property" followed by a colon ':' followed by a "value" followed by a semi-colon ';'. This tutorial will cover a wide range of CSS properties you may find useful on FPSB as well as their allowable values.
Keep in mind that CSS is extremely useful as tom has demonstrated with his "uberstyle" concept, however, there are numerous problems with using it resulting from bad browser support. Whether you realize it or not you've probably encountered some of these while surfing FPSB, especially if you use an unpopular or out of date browser. In fact, though very popular Micro$oft's Internet Explorer (IE) has traditionally had the worst CSS support of all, so if you use it I highly recommend making sure you have the latest version or considering alternatives like Firefox.
Enough talk, let's get started with some CSS properties. I'll be using a wide variety of XHTML elements to demonstrate the style attribute and CSS but if you've read my XHTML tutorial they should all look familiar.
If you recall the XHTML <span> element is a generic container, making it perfect for random uses of the style attribute. As you'll soon see style can be useful on many other elements but <span> is especially handy because it doesn't have any inherint style information associated with it, at least no on any browsers I've heard of.
Anyway, in the above example we're using one CSS property - color. As the name might imply, color sets the color of a text. This is opposed to the background color, which we'll cover a bit later on. The color property has three different kinds of values demonstrated above: color names, rgb (red green blue) values, and six digit hexadecimal numbers (rgb in disguise), respectively. Hopefully you learned some color names in Kindergarten so we'll get those out of the way first: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
RGB values are a little trickier if you're not familiar with the concept behind them. Because your computer can (hopefully) display thousands if not millions of different colors it would be ridiculous to try to name them all. Instead, they can be encoded by a number consisting of three parts ranging from 0 to 255 - red (redness), green (greeness), and blue (blueness). For example, mix all three together "rgb(255,255,255)" and you get white. Don't use any of them "rgb(0,0,0)" and you get black. Use only red "rgb(255,0,0)" and you get red. Use only green "rgb(0,0,255)" and you get green (lime actually, but you get the idea). Use only blue "rgb(0,255,0)" and you get blue. Try your own combinations!
Another way to encode an RGB value is with a hexadecimal number. I realize some of you may not know hexadecimal so here's the short short version: the numbers you're used to are based on the number 10. Think about it - you (hopefully) have ten fingers and ten toes and the digits in every number are from the set 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 (that's 10 digits in case you weren't counting). Hexadecimal is similiar except it has 16 digits - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. You can think of 'A' as 10, 'B' as 11, 'C' as 12, 'D' as 13, 'E' as 14, and 'F' as 15. All the possible two digit hexadecimal numbers are as follows:
00 (0)
01 (1)
02 (2)
...
09 (9)
0A (10)
0B (11)
...
0F (15)
10 (16)
11 (17)
...
9F (159)
A0 (160)
A1 (161)
...
FD (253)
FE (254)
FF (255)
The first and last numbers (00 - 0, FF - 255) should look familiar - that's the same range in
Back | POSTED BY Robert Otlowski
president@alum.rpi.edu | Robert Otlowski | rpipresident@gmail.com