| CSS Help |
I am NOT an CSS expert and this is in no way complete....these are basic CSS codes, which is different from HTML, but the end result looks the same. Note that codes typed out will be done in Blue and where they are necessary, spaces will be done as (space) - don't type the (space), just leave a space! to try to make them stand out. Otherwise, the sample codes will be in the textarea "boxes". Let's get started!
Backgrounds. To put a background on a page, you type:
Now, most backgrounds will "tile", meaning the image will just repeat itself over and over. You can make your background "fixed" so whatever you've got on that page will almost look like it's "floating" over the background - very easy:
If you want your background to not repeat and be centered:
The background:#FFFFF is always a good thing to add (you can use any color you like) - there's a color while the background is loading, and if people are using the newer big monitors, it just looks nicer.
If you just want a plain colored background, that's:
So, now you've got your background on the page. We're going to change the font color, font size and font type now:
You can make your font size larger or smaller, just change the number - from 1 to ?; For the font type, verdana is recognized by I think every browser. If you want to use a different font, you should still add verdana, like this:
To make font "glow" in css:
Yes, you can use a different color for your "glow" and you can change the strength (how big the "glow" is) by changing the strength= number. The lower the number (1) the smaller the glow...and vice versa...a higher number (3) is a bigger glow.
Here's 2 colorcharts for background and font colors:
Just type the color word in, or use the hex numbers =) NOTE: If you're just using the words for colors, in the body text or links section, you will NOT need the # sign.
Images. CSS for images works very different from regular HTML...you don't just use the img code.
OK, now you're seeing all these new things: height: width: position: top: left:
height: width: this is simply the height and width of your image. It's important to have these numbers right, otherwise you'll end up with just part of an image showing up.
position:absolute this basically means that where ever you place the image, it will stay put in that space
top: left: this is where you're setting your image -- top means how far from the top of the page you want your image to appear; left means how far from the left you want that image. This can take practice and some trial and error. Don't fret...if an image isn't quite where you want it, just keep adjusting those top and left numbers.
If you're adding more that one picture, you will use the same style code, but you will change anypic1 to anypic2 - in both places anypic appears. You can do this multiple times!
You can make the border of your image "glow" just like you can font:
Like font, you can change the color of the "glow" and the strength by changing the number.
Miscellaneous "stuff".
Returns - In some cases you can simply use the < p > or < br >, but if you can't or want to know the css return code:
You can change the 550 to a larger or smaller area for your text. Now, between every paragraph, you will type this:
Remember, everything you do in css must start with < style type="text/css" > and must end with < /style > (no spaces in there - that's just so you can see the code).
Stuff to remember - when you put up a background using css and want a background color too, use the background code above. Don't do a background code and then a separate background color code -- one of your codes will NOT work!
If you're using the anypic code, make sure if you're adding more than one picture, that you change the number! That is very easy to forget. ;)
That's all for now. If I think of more to add or find there are other things that people want or need to know, I'll update this page.
|