We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
How do I integrate css?; into a website
Topic Started: May 27 2005, 12:55 PM (211 Views)
MythicalDreams
Member Avatar
PM me for Hosting Deals!
[ *  *  *  * ]
I am looking of building a new look for my site but I was wondering how to add css into it. Anyone help?
Offline Profile Quote Post Goto Top
 
mr kittles69-ZNR
Member
[ *  * ]
go to skin galery, pick a skin.... copy the css code... , go to ur site... admin cp> style sheet... delete your old css and replace with the new one.....



EDIT : oops lol, i guess i didnt read your post right, sorry
Offline Profile Quote Post Goto Top
 
Amberon
Member Avatar
Winter is Coming
[ *  *  *  *  *  *  *  *  * ]
http://www.w3schools.com/css/css_howto.asp
Offline Profile Quote Post Goto Top
 
MythicalDreams
Member Avatar
PM me for Hosting Deals!
[ *  *  *  * ]
thanks :)
Offline Profile Quote Post Goto Top
 
Oblivion.
Member Avatar
*waves*
[ *  *  *  *  *  *  *  * ]
Make a CSS and then use
Code:
 
<div class="CSSClassThingyYouWant">Content</div>
Offline Profile Quote Post Goto Top
 
Fo'rizzle
SZ Christian
[ *  *  *  *  *  *  * ]
I've been wondering this too. I can't see any great advantages to it though.
Offline Profile Quote Post Goto Top
 
pennythedude
I swear I did not make this many posts.
[ *  *  *  *  * ]
Fo'rizzle
May 27 2005, 07:27 PM
I've been wondering this too. I can't see any great advantages to it though.

You can use one css stylesheet to set background colours, text colours, link colours, text styles etc. for multiple pages. I use this in all of my sites, its a really easy way round things.
Offline Profile Quote Post Goto Top
 
wr50l
Member
[ *  * ]
It's cuts down on a shedload of coding.

Example

Code:
 


<P><FONT SIZE="2" COLOR="#EEEEEE" FACE="verdana" STYLE="text-decoration: underline">Blah blah blah</P>

<P><FONT SIZE="2" COLOR="#EEEEEE" FACE="verdana" STYLE="text-decoration: underline">Blah blah blah part 2</P>

<P><FONT SIZE="2" COLOR="#EEEEEE" FACE="verdana" STYLE="text-decoration: underline">Blah blah blah part 3</P>

<P><FONT SIZE="2" COLOR="#EEEEEE" FACE="verdana" STYLE="text-decoration: underline">Blah blah blah part 4</P>

<P><FONT SIZE="2" COLOR="#EEEEEE" FACE="verdana" STYLE="text-decoration: underline">Blah blah blah part 4</P>





---------------------------------------

Instead you could put in a stylesheet like so -

Code:
 

<STYLE TYPE="text/css">
<!------
P
{
font-size:2;
color: #eeeeee;
family: verdana;
text-decoration: underline
}
------------->
</STYLE>





Meaning that the coding in your body would look like so -

Code:
 


<P>Blah blah blah</P>

<P>Blah blah blah</P>

<P>Blah blah blah</P>

<P>Blah blah blah</P>

<P>Blah blah blah</P>





See how it shortens things.
Offline Profile Quote Post Goto Top
 
Lugiatm
Member Avatar
Member
[ *  *  *  *  *  *  * ]
Extract from Old Lady Butterfree's HTML Guide:

Lesson 5: The amazing CSS!

Now, want to do some magic for your page? Time for CSS! Now, right after the </title> tag in test.htm, go to the next line and type: <link href="stylesheet.css" rel="stylesheet" type="text/css">. Then, save it, and make a new file. Save it as stylesheet.css. There, it's time to make your very own stylesheet (don't worry if you have no idea how stylesheets work or what they do, I'll get to that in a sec).

You write CSS in a bit different way from HTML; to be basic, you use : instead of =, you don't need quotation marks, just need to end it in a semicolon (;), you use {}s frequently and last but not least, it's a lot more complicated. Remember when you were using <span style="color:red;">? That was CSS you put in "style". Anyway, start this file with <!-- and end it in -->. No <html> tag or whatever. Go between the arrows. There you can start writing your stylesheet.

When I write stylesheets, I always start with the link colors from old habit when I wasn't using CSS for anything else. So start by writing this (be sure only to write what I put in the courier font):

a:link {
text-decoration:none;
color:#777777;
}


a:link means normal links; ones not on mouseover, not visited and not selected. text-decoration means like if there's an underline or something, this can be none, underline, underline overline, overline or line-through. Well, technically it can be blink too, but that only works in Netscape and is very annoying anyway, so I suggest you keep away from that effect. The color coding was explained in lesson 4; you can also use red, black, white, etc. but I strongly recommend learning the hex code instead. You can also add a background image or a background color by adding background-color:#your color, or background-image:#your image.

Then, it's the other types of links. In this example, my styles are like this:

a:visited {
text-decoration:none;
color:#777777;
}


a:visited means that it's a link your visitor has been to before.

a:active {
text-decoration:underline overline;
color:#999999;
}


a:active means a link that's selected (so if you would press enter, it would activate the link and take you to the page it links to).

a:hover {
text-decoration:underline overline;
color:#999999;
}


a:hover is a link on mouseover, that is, a link like it looks when you run your mouse over it.

Now, look at if any of your styles are the same. In my simple example, a:link and a:visited are the same, and a:active and a:hover are the same. Since they are, I didn't really need to write out the same thing twice. I could have written it like this:

a:link, a:visited {
text-decoration:none;
color:#777777;
}

a:active, a:hover {
text-decoration:underline overline;
color:#999999;
}


Anyway, that's it for the links. Let's move on to the background. Go two lines down and write:

body {
background-color:#the hex code for the background color you want, it's what will appear before the background image loads and behind the background image, if it has transparency;
background-image:url(filename of a background image);
background-repeat:repeat;
background-attachment:fixed;


OK... body simply means the page itself, everything between <body> and </body>. background-color is the background color (duh), background-image is a background image (even more duh) but you must do it exactly as it says there. For example, if you were going to put a background image called background.gif on the page, you'd put background-image:url(background.gif). Remember the semicolon too. background-repeat is whether the background repeats itself or not. You can put repeat, no-repeat, repeat-x or repeat-y. Repeat-x will make the image repeat itself along the top of the page, but not below that. Repeat-y will make it repeat itself on the left side of the page, but not go any further to the right at all. repeat and no-repeat should explain themselves. For background-attachment, you can put scroll or fixed. Fixed means that when you scroll down, the text and images and everything move, but not the background. Scroll means it's just like normal. If you put no-repeat, you can add background-position:the place where you want the background to be in pixels or percentages; after this.

font-family:your font, a backup font if the preferred one doesn't exist on the computer;
color:#the color you want your font to be;
font-size:the size of your font;


This is the font properties... if I were you, I'd end the font-family part in arial, helvetica;. Then you've pretty much made sure that the user must have at least ONE of the fonts you ask for... anyway, if you want to take my advice, don't abuse font colors. The text isn't there to be in flashy colors that hurt your eyes, it's there so the reader can read it.

scrollbar-darkshadow-color:#the color you want for the scrollbar's bottom and right edges;
scrollbar-shadow-color:#the color between the right and bottom edges and the main color;
scrollbar-face-color:#the color you want as the main color of the scrollbar;
scrollbar-highlight-color:#the color you want between the main color and the top and left edges;
scrollbar-3dlight-color:#the color you want at the top and left edges of the scrollbar;



The order I put the first six in is the order they're "supposed" to be in going from darkest to lightest, but of course, you can make it different. To get an effect like the scrollbar is sinking into the sliding track, just switch "highlight" with "shadow" and "3dlight" with "darkshadow". To give them a more cartoony appearance, you can make 3dlight and darkshadow black, or even highlight and shadow too. There are many possibilities, I'm sure you'll think of something.

scrollbar-arrow-color:#the color you want for the arrows;
scrollbar-track-color:#the color of the space you can slide your scrollbar on;
}


Should explain itself... but keep in mind that the scrollbar attributes only work in Internet Explorer. They aren't of any harm if they're there even if the site is viewed in other browsers, though...

Anyway, there you've got a stylesheet. Just a final tip: If you want to change the color of an individual link, just use <a href="the page you're linking to" style="color:#the color you want for your link;">. Basically, the <span style="something"> is making a style sheet that applies only to a certain part of the page. Should we see what test.htm looks like after we've applied a style sheet to it? Click here.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Technology Chat · Next Topic »
Add Reply