- I wrote these html tutorials 100%.
- Comment if you find these tutorials useful.
- Do not jock or steal my tutorials or ideas!
- Read carefully and follow the steps.
html tutorials
fonts in your stylesheet!
.orangetext15 = about me, who i'd like to meet, blurbs
.blacktext10 = date of comments
.blacktext12 = extended network text
.whitetext12 = text above url, contact table, and details/interests
.nametext = the text above your picture/display name
.text = basic font for your page
.redtext = font for the number of comments you have
.redbtext = font for the number of friends you have
.lightbluetext8 = font for titles in your details and interests
change the font styles!
You take one of the codes from above like .orangetext15 and then add stuff to it like:
font-family, font-size, color, text-decoration, line-height, text-transform, and font-weight.
When you put it all together you get something like this:
.orangetext15 {font-family: tahoma; font-size: 11px; color: black; text-decoration: none; line-height: 12px; text-transform: lowercase; font-weight: bold;}
Make sure you remember to put the { brackets } or the codes won't work.
what all that stuff means!
Now if you are wondering what that stuff means inside the brackets then I will explain:
font-family = the type of font like tahoma, arial, or georgia. there are many other kinds of fonts, but those are just a few popular ones.
font-size = that is the size of your font like 11px would be a good size, 30px would be huge, and 5px would be so tiny you probably couldn't read it and px stands for pixel.
color = is pretty obvious that it is the color of your font like black, white, red, or orange, or you can use hex color codes like 000000 or FFFFFF which are black and white.
text-decoration = is if your text has any decoration on it like an underline.
line-height = this is the height of your line, so if you make your font size 11px and your line height 7px then your words will probably get chopped off, so you should make the line height a couple pixels bigger than your font size.
text-transform = is if your font is lowercase, uppercase, your normal. lowercase will make your font lowercase, uppercase will make your font uppercase, and normal will make it uppercase and lowercase depending on how you type.
font-weight = this is the weight of your font like bold, or normal. bold will make your font thicker and normal will make it just regular.
what are style tags for?
First of all, let's make sure you know what style tags even are. Style tags are the things you see at the very beginning of a code and at the very end of a code, so if you have a whole layout code put together then it should look something like this:
< style >
.orangetext15 {font-family: tahoma; font-size: 11px; color: black;}
.nametext {font-family: tahoma; font-size: 11px; color: black;}
.blacktext10 {font-family: tahoma; font-size: 11px; color: black;}
.text {font-family: tahoma; font-size: 11px; color: black;}
< / style >
THE STYLE TAGS ARE NOT SUPPOSED TO HAVE SPACES IN THEM, BUT I HAD TO DO THAT OR ELSE YOU WOULDN'T BE ABLE TO SEE IT.
background image or color!
You have to start out with this:
body { }
and then you add stuff like this inside the brackets, background-image:URL HERE!; or background-color:COLOR HERE!;
You must also add background-attachment: fixed OR scroll; background-repeat: repeat OR no-repeat; background-position: bottom left OR bottom right OR top right OR top left OR center;
In the end you should have something that looks like this:
body {background-image: url(); background-color:; background-repeat:repeat; background-attachment:fixed; background-position: bottom left;}
You can have a image url and a background color in at the same time, but if you have a image url in there the image will show up and not the color, and if you have
the background-repeat on repeat then it doesn't matter what the position is.
click here for photoshop tutorials!