| 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: |
| How do I integrate css?; into a website | |
|---|---|
| Tweet Topic Started: May 27 2005, 12:55 PM (211 Views) | |
| MythicalDreams | May 27 2005, 12:55 PM Post #1 |
|
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? |
![]() |
|
| mr kittles69-ZNR | May 27 2005, 01:14 PM Post #2 |
|
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 |
![]() |
|
| Amberon | May 27 2005, 02:09 PM Post #3 |
|
Winter is Coming
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
http://www.w3schools.com/css/css_howto.asp |
![]() |
|
| MythicalDreams | May 27 2005, 02:19 PM Post #4 |
|
PM me for Hosting Deals!
![]() ![]() ![]() ![]() ![]() ![]()
|
thanks
|
![]() |
|
| Oblivion. | May 27 2005, 02:23 PM Post #5 |
![]()
*waves*
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Make a CSS and then use
|
![]() |
|
| Fo'rizzle | May 27 2005, 03:27 PM Post #6 |
|
SZ Christian
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
I've been wondering this too. I can't see any great advantages to it though. |
![]() |
|
| pennythedude | May 27 2005, 03:55 PM Post #7 |
|
I swear I did not make this many posts.
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
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. |
![]() |
|
| wr50l | May 27 2005, 04:14 PM Post #8 |
|
Member
![]() ![]() ![]() ![]()
|
It's cuts down on a shedload of coding. Example
--------------------------------------- Instead you could put in a stylesheet like so -
Meaning that the coding in your body would look like so -
See how it shortens things. |
![]() |
|
| Lugiatm | May 28 2005, 04:46 AM Post #9 |
|
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. |
![]() |
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Technology Chat · Next Topic » |
| Track Topic · E-mail Topic |
10:43 AM Jul 11
|



![]](http://b1.ifrm.com/0/1/0/p601690/pipright.png)




10:43 AM Jul 11