| |
|
| CSS
1. GENERAL | comments | /* indicates opening of comments and */ indicates closing. |
2. TEXT | font-family | Most common choices: times (new roman), arial, verdana, tahoma. If you use more exotic fonts, you run
the risk that they won't be isntalled on user's computer. |
| font-size | Indicate value, by number and unit, such as 12px or 10pt. |
| font-weight | Default: normal; bold (equivalent to the b tag). |
| text-transform | None (default); capitalize – first character of each word will be uppercase;
'uppercase': all characters will be uppercase; 'lowercase' : all characters will be lowercase. |
| text-decoration | None (default); underline (default for a). |
| font-style | Normal (default); italic. |
3. SPACING | text-align | How is content inside an object horizontally aligned within the object.
Values: left (default); right; center; justify (aligned at both ends). |
| letter-spacing | Use this to spread out the letters. Indicate value. |
| line-height | Use this to spread out the vertical space between lines of text.
Specify number followed by units, as in '1px'. The default is a bit more than the font size. |
| padding | Indicate value. Puts extra space inside element – between the edge of the element and
the actual content. Can be limited to top (as in padding-top), bottom, left, right. |
| margin | Indicate value. Puts extra space outside element. Can be limited to top, bottom, left, right. |
| white-space | Default: normal. Set to 'pre', if you want line breaks and other whitespace characters preserved. |
4. GRAPHICS | color | Text color. I typically use a word, like red or blue, or a hexadecimal rgb value, like #ff0000 for red. [Note that
if you give an 'a' a color as its style when you define it, then this overrides 'hover'.] |
| background-color | Background color. |
| background-image | Convenient when you want a certain area to have an image, and you then want text (and maybe other
images) over it. Use it like this: background-image:url(aaa), where aaa is the URL of the image. |
| background-position | Allows you to indicate where in the object should the background image appear. Can take one or two
arguments, one for x and one for y. Possible values: a value; a percentage; for x: left, center, right; for y: top, center,
bottom. Default is top-left. If you need specify only one axis, you can use background-position-x or background-position-y. |
| background-repeat | If the size of the area is greater than the size of the image, should the image repeat itself? Values: repeat (default)
– the image is repeated both horizontally and vertically; no-repeat; repeat-x; repeat-y. |
| border | Set border around object. Three arguments: width, style, color, as in 'border-width:1px solid blue'. Although you can
set each separately, with border-width, border-style, border-color, I rarely if ever have done so. Note as well that you have
the useful option of setting a border on only side: top, bottom, left, right, as in 'border-top'. (And, the two can be combined,
as in 'border-top-style'.) |
| cursor | Set the cursor to different shapes. I used to use this and set it to hand, when I wanted to make an area clickable,
but didn't want to use a, but since Firefox doesn't support cursor:hand, and since one can use a:href=javascript, I never use this. |
5. SIZE AND POSITION | position | How is the object placed on the screen. Values: Static (default) – the object is placed in the order in
which it was defined; absolute: you can specify exactly where on the screen the object should go; relative: object is placed
according to normal flow, but you then can adjust it. I use position absolute for scrolling iframes.
I use absolute and relative together for popup sub-menus. The coding for each of these is tricky! |
| top | Vertical position of object – use when you have set position to absolute or relative. |
| left | Horizontal position of object – use when you have set position to absolute or relative. |
| z-index | If two items are both set through position:aboluste, and there is overlap, then the one defined first will be on
top. To override this, give the one you wish to be on top a higher number. A much-discussed attribute, I have actually never used it! |
6. DISPLAY | display | How is object displayed. Set to 'none', if you want the object to be hidden from view. Elements that are displayed
are usually either 'inline' or 'block'. The differences: 1. If display is set to 'block', then the object begins on a
new line. 2. Many CSS attributes, such as width, are unavailable for display:inline elements.
Span and a are by default inline, while div, table, form, td are by default block. I regularly give a display:block. Conversely,
on occasion, I give a form display:inline, if I only want to put hidden inputs in it and I don't want it to take any room on
the screen. |
| overflow | What to do if content exceeds object's dimensions. Values: 1. Visible (default) – the object simply grows to
accommodate its contents. 2. Scroll: scrollbars appear to accommodate overflow – even when there is no need.
3. Auto: scrollbars. Different from 'scroll' in two ways: a. Scrollbar appears only if necessary; b. Only side scrollbar appears
(although if overflow were caused by image which overflowed on both dimensions, presumably then, both scrollbars would appear).
4. Hidden: excess content is simply not shown – but check out Firefox! Note there is also overflow-x and overflow-y,
although, again, I'm not sure how FF would handle this. In any event, auto should generally give what one needs. |
| scrollbar-face-color | Set the color of the scrollbar. There are a whole bunch of related ones, for setting the color of
various elements within the scrollbar – all supported by MSIE only! |
| clip | Use for hiding portions of an element. Useful if you wish to have an object appear not all at once, but rather open
gradually (using setTimeout). Syntax: clip:rect(top right bottom left). Separate values with spaces, not commas.
And apparently, the unit must be spefified. And position must be set to absolute. How to fill in the numbers is quite confusing. Consider
an object with a height of 200px and a width of 400px. 0 is the top; 200px is the bottom; 0 is the left; 400px the right. So if you'd
want to clip off 40px from the top and 20px from the bottom, and 30px from the left and 60px from the right, then you would have
clip:rect(40px 340px 180px 30px). |
References: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties.asp
Check this page for W3C Compliancy
Top of Page
|
|