Blogskins Times

Saturday, August 19, 2006

HELLO (: I'm the newly recruited writer of your number 1 best site for juicy happenings in blogskins.com, ENEX! Okay, so my first post in this website is about CSS. :D I'm sure many of you have already known what's CSS full form, as what our Saturday, June 24, 2006's post have already said.

CSS's long form is actually Cascading Syle Sheets.

<style type="text/css">
That is the starting for the style sheet, it has ALWAYS got to be that way. I don't know why, so don't ask me xD

body {
background-color: #FFFFFF;

Now, the bolded part, aka FFFFFF is actually the coding of the colour white .. If you want the background colour to be white, you got to put it as FFFFFF .. the hex code is optional, but I still suggest you put it there. Next, we add:

body { background-color: #FFFFFF;
font-family: tahoma;

The bolded part now, is the word TAHOMA. Font family, which means the wide variety of font. To choose what font you want for your page, you can type over there, replacing the word tahoma.. There are different fonts you can choose, not only tahoma. I'll name the few.

Times new roman
Comic sans MS
Verdana
Arial

These are the few fonts that people would use, so stick to these :D .. Next, we add the size :

body {
background-color: #FFFFFF;
font-family: tahoma;
font-size: 7pt;

Bolded part again, 7pt.. From the name, font-size, you can tell that it's doing with the font size luh. Well, 7pt is the size you're reading now :D Here are the sizes untill 10pt :

8pt
9pt
10pt

It SHOULD be like that, if I'm not wrong x_x.. Next, colour of the font :

body {
background-color: #FFFFFF;
font-family: tahoma;
font-size: 7pt;
color: 336699;

The colour of that is obviously the one you're seeing right now :D If you want to know more colours, visit this site for a huge list of HTML colours (:

body {
background-color: #FFFFFF;
font-family: tahoma;
font-size: 7pt;
color: 336699;
line-height:13px;

The one bolded now is named as 13px .. Line height, means whenever you do a
(new line), it determaines how far it would be from the second line. Let's say if you put line-height as 10px, when you do a
it would be very close to the first line, get it? x_X..

body {
background-color: #FFFFFF;
font-family: tahoma;
font-size: 7pt;
color: 336699;
font-weight: normal;
cursor: crosshair;

Now the bolded is something called CROSSHAIR It's a cursor type, and it's the one you're looking at now. :D Here are the different types of cursor you can use. Hover over them to see what type and what name

crosshair
default
hand
help
move
text
wait
e-resize
ne-resize
n-resize
nw-resize
w-resize
sw-resize
s-resize
se-resize

Now the scrollbars.

scrollbar-face-color: ffffff;
scrollbar-highlight-color:black;
scrollbar-shadow-color: black;
scrollbar-3dlight-color:ffffff;
scrollbar-arrow-color:black;
scrollbar-track-color: ffffff;
scrollbar-darkshadow-color: black;
}

This is the scrollbar one, it should come next after those fonts and background :D .. Well, I can't really teach you much here. You just go edit it with colours by consulting the list over here.

.head {
Color: #black;
font-size: 12px;
border-bottom : 2px dashed black;
font-family: tahoma;
letter-spacing:1pt;
text-transform:uppercase;
text-align:left;
font-weight : bold;
background-color : auto-flow;
padding-bottom: 0px;
}

That would be the coding for the HEAD. :D Here's an example of a heading:

Example

Well, this would be an example. You see that border-bottom : 2px dashed blank; thing there? Well, look at the example of my heading, and the dashed thingy below the word Example. That would be the coding for the border-bottom : 2px dashed black; but in a BLACK :D You can change it if you want. There are different types of styles you can use, other than dashed, like Solid (one straight line)
You can change the text-transform to either uppercase, or lowercase :D For the text-align, you can align it as either left, or right or center. font-weight. It can be either italic, or bold, or ~~strike~~. The background-color is as auto-flow so that the colour would be the same as the background, but you can change to other colour :D

A:link
{ text-decoration: none; color: black; font-weight: normal; font-family: tahoma; font-size: 10px; text-transform: none}
A:visited
{ text-decoration: none; color: black; font-weight: normal; font-family: tahoma; font-size: 10px; text-transform: none}
A:active
{ text-decoration: none; color: black; font-weight: normal; font-family: tahoma; font-size: 10px; text-transform: none;}
A:hover {
font-size : 10px;
color : #white;
text-decoration : none;
text-transform : none;
font-weight : normal;
font-family : tahoma;
cursor : crosshair;
}

Lastly, this is the links. A:link, A:active, let it have the same coding. If you want the link to be in other colour after clicking and visiting, you may change A:visited.
Now, A:hover is the important part around here. If you want it to change to other colour upon hovering on the link, you can change it, if not you can make the text transform, to either uppercase or something :D If you want upon hovering a link and your cursor to change, you may too. (:

After this, you would be done, BUT, remember to add a :

WELL, i'm finally done! So those who are usually not so good in creating your own CSS texts at first, heres some enlightening for you, than! :D

tere .s.
update @ 6:34 PM

Remember you drop us a comment!

The ones who spoke:

great tutorial!!

Said

Keeper Of Illusions @ 19 August, 2006 19:11

Contributors