[Tutorial - CSS] Basics level 101 [Archive]

Sophonax

07-21-2009, 05:38 AM

What is CSS?

CSS is the abbreviation of Cascading Style Sheets. Style sheets are a great tool for editing the look of the page by editing a property in the CSS. Not all CSS is supported by the major browsers, so it's a good idea to test your sites in both FireFox and Internet Explorer.

CSS codes are placed in side the HEAD tags.

<head>
STYLES HERE
</head>

CSS changes the look of your entire page just by editing that line of code.

An example of CSS

This is what the typical style sheet looks like. There may be more lines, there may be less. It depends on what you want to change.

<style>



</style>

What does the code above mean?

BODY,P,TD
This line shows what the text on your page will look like.

FONT FAMILY: This is the font you want to use. Put the name of the font here. Be sure to use a common, easy to read font like Tahoma, Arial, Comic Sans, Verdana, etcetera.

FONT SIZE: This one is simple enough. Replace the number with the size of font you would like to use. Use PT sizes, not just the 1-7 font sizes. PT sizes are the font sizes you use in a word processor.

COLOR: This changes the color of all the text on the page. Replace this with a color code.

A:LINK, A:VISITED, A:HOVER
These are styles are links. All the links on your page will change when you do these. "Link" is normal links. "Visited" is links that you have been to before. "Hover" is what the link looks like on mouseover.

TEXT DECORATION:
This is what is attached to the link. You can make the link underlined or overlined, you can make the link have a line through it, or you can make it have nothing at all. If you use FireFox, you can make your links blink. In Internet Explorer, it will just look like a normal link. You can keep none to make it so links aren't underlined, or you can add a different decoration:

none
overline
underline
line through
blink

COLOR: This changes the color of all the links on the page. Replace this with a color code.

CURSOR: This is only in the HOVER section. When you mouseover a link, you can get a different curser than the hand. If you really do want the hand, just take it out ^_~. There are many types of cursors:

cursor:n-resize - Cursor faces north
cursor:e-resize - Cursor faces east
cursor:s-resize - Cursor faces south
cursor:w-resize - Cursor faces west
cursor:nw-resize - Cursor faces northwest
cursor:ne-resize - Cursor faces northeast
cursor:sw-resize - Cursor faces southwest
cursor:se-resize - Cursor faces southeast
cursor:wait - The cursor looks like an hour glass
cursor:crosshair - Looks like a cross
cursor:move - Cursor with four arrows
cursor:help - Cursor with a question mark
cursor:text - Cursor looks like a text arrow

BODY
This is the section for you to add your colored scrollbars! If you look at this page, you'll notice my scrollbars are different colors. If you can't see it, it is because you are either using FireFox, or a version of Internet Explorer below 5.5. Just replace the colors of the scrollbar to your own hexcodes.

scrollbar-arrow-color This is the color of the arrow that you push to go up and down.

scrollbar-darkshadow-color This is the color on the outer right and bottom of the buttons.

scrollbar-track-color This is the background of the scrollbar.

scrollbar-face-color This the the bar travels up and down the scrollbar.

scrollbar-shadow-color This is like the darkshadow color, but this one is a line just inside that line. This is a normal shadow.

scrollbar-highlight-color This is a line that is on the inner left and top of the buttons.

scrollbar-3dlight-color This a line that is on the outer left and top edge of the buttons.

It may be hard to get a scrollbar you like, so just replace the colors, and see what you can come up with.

How do I add borders to objects?

Borders are nifty to add to tables, frames, and images. You can add this style to a lot of things.

http://sophonax.com/gfx/images/neovenezuelaffver.jpg

The above image should have a white dashed border around it (it doesn't because of the forum). This is done by using this code:

style="border: 1px dashed #FFFFFF"

You put the above code in the image tag like this:

<img src="neovenezuelaffver.jpg" width="150" height="100" style="border: 1px dashed #FFFFFF">

PX Change this number for how wide you want it to be.

DASHED Replace this with SOLID, DOTTED, OUTSET, INSET, RIDGE, GROOVE or DOUBLE. There may be more types.

COLOR As you may have guessed, this is the color of your border.

Oloty

08-13-2009, 12:40 PM

Nice work but just to point out for everyone the raw code will not work if you are trying to code something like a forum style you ave to input css version where items belong color and everything raw code will work but you have t implement it into certain spots. I'll design something now for an example.

Balance

08-14-2009, 09:16 PM

So...
If you were to use the CSS codes, you would have to call upon the css style sheet before you begin programming the html/php page, am I correct?

Then also, if you are formatting something on the html/php page, you can make it easier on yourself by making a css style and then calling upon the format that you've created by starting with <div class="name"></div>

Am I correct?
This is something that I had to learn all myself by the way, and I would like to know that I have a few things right.

FlashD

08-15-2009, 03:18 AM

Yes, there are 2 ways of using CSS. You can place the code in your header and then call a class or ID to it, or you can place the CSS directly inside the element.

To give you an example:

<html>
<head>
<style>


</style>
</head>
<body>
<div class="DIVStyle">Text here</div>
<div id="SecondStyle">Text here</div>
</body>
</html>

The example above is the way this tutorial explains the use of the CSS style sheet. In this case the HTML page calls it at the beginning of the script and then uses it later where needed.

NOTE: Since this tutorial doesn't speak about IDs check the dot and the hash in the sheet. One defines a class, the other one an ID and they have to be used that way.

The example below uses the CSS style sheet by element.

<div style="color: red;">Text here</div>

This way you define each element separately and doesn't need a <style></style> element in the header. In this case the attribute gets called when the element is processed. Usually this way of coding is used for attributes that need to be defined only once in the whole document. It is recommended to avoid this way of coding and use the ID attribute instead.