EXTERNAL CSS GUIDE So Much Better than Style Tags!
INTRODUCTION
Please note that with changes to dropbox public folder functionality, I no longer know a way to do this for free. The guide is here for posterity and anyone who is willing to pay money for hosting things.
I've been using external CSS for a long time ever since I realized that it was possible to embed .css files here. GMSuerte the Mathmagician was doing it and I asked something to the effect of, "What's the HTML to embed the CSS?" and he replied something like, "Link tag." And I've been doing it externally ever since.
Most people here use HTML style tags to accomplish what most websites use .css files do. You can attach a .css file to your page much like attaching a picture to it with only one snippet of HTML. In this way, it is vastly superior to using style tags. Additionally, it is easy to use paragraph breaks in .css files, so you won't have to hunt through chunks of info to edit them and you won't have to use comments to break them into workable info chunkies. Lastly, and this is my favorite part, you can edit your external .css files without having to update your page. Your trackers won't have to see updates of you tweaking tiny little details unless you also alter the HTML.
You will probably need an ok understanding of HTML and CSS in order to understand how to do this. I apologize if I have failed to make this more transparent. But you can always ask questions and I will do my best to help you!
You can use this anywhere for whatever, credit never ever necessary. Have fun and don't be afraid to ask questions if I am ever unclear with anything or if you have a specific issue, but I'm still learning myself. I want everyone to be able to make the kinds of pages they want to make.
It's possible I may update the code or page from time to time if there is an error or if there is something new I want to add or clarify. I hope my trackers won't mind too much.
EXAMPLE
This page is an example itself. The CSS that changes its look is not in a style tag. Feel free to right click the page (and any of my pages) and view page source to look at how it is put together--you will find no bulky style tag!
This link tag allows you to embed files in your page. For instance, when I load special fonts onto pages, I use the link tag for that as well.
INSTRUCTIONS
Open Notepad or a similarly barebones text editor. (I would recommend a program called Notepad++ that is free and helpful for any kind of coding if you are a more advanced CSS user.) When you save your file in notepad, there will be a field for "Save as type:" and you should set your drop down to "All Files". Name your new .css anything you want so long as the file name ends with ".css"
It will look something like this before you save:
Now you have your .css file. Put your CSS from your page there, omitting the style tags. You can organize it however you please now because it no longer has to be on one line! You can take a look at how mine is organized here, and you are free to take what you need from it.
The next step is hosting it. A lot of sites will only host images, not many will host css files. I used to recommend that people use dropbox, but that is no longer an option. I currently use Rackspace because I also use them for other things, but they charge fees. You may be on your own here.
After it is hosted, use the link tag above to put it on your page. Make sure it goes under the cut and that you have your input format set to BBCode and you should be good to go!
Oh very exciting! I've been wondering for ages if having a separate CSS was even possible. I'm pretty new to CSS in general and wading through a huge pile of code becomes frustrating after awhile especially with it having to be all in one line.
I do have a question though, its probably a really stupid one, but, for example - if you are using fonts from somewhere like Google Fonts and you need to link back to that stylesheet to grab your font, where exactly do you put that now?
Good to know people find this useful. I should have made this earlier but I was lazy.
Bullings--you can have as many link tags as you want on your page, so you can have the link for the external CSS plus as many link tags as you like for fonts as well. For example, the TEFc site, even without our meddling on the pages, has about ten link tags in it.
I do believe It could work in signatures, but the big problem with that would be that you'd risk overwriting what's on the person's page to begin with, same as in comments... and even if you made one to only affect signatures, I think the css would carry to every signature on the page and you'd risk screwing up others' pages.
As it is now, you can style signatures with the stuff in style tags, with external css (for instance, I'm using this exact post to make sig text appear red right now), and pretty much anything as long as the blog they show up in is set to BBCode. Sometimes you see a sig with an unclosed tag or something that fusses with all the subsequent posts on the page.
I guess I meant having a ton of links in a file with one link in the signature, because I know people would LOVE to have little pix of their characters, each with a link to their bio, but the sig length hinders it. Does that make sense? /shot
I think that with Javascript that would be possible. Just like CSS, it's possible to link to .js files that are hosted elsewhere (I do that too but there are so few people here who write their own functions that I don't think it's worth it to write a tutorial for that, it was also kind of a pain in the rear to do since the HTML tag necessary to load it onto the page is forbidden by the site and you have to use javascript to create the HTML tag to make the javascript accessible externally).
One could write a lengthy function in Javascript that would create elements within the signature that are images with links. But all that would go in the signature would be a style tag with javascript built in to create an HTML tag that would load external Javascript that would create the pictures and links.
There may be an easier way to do it but that's the only way that seems possible to accomplish it at my baby level of Javascript, and I don't think I'd be able to do it myself.
Yeah, the tidiness is the best part of it. Fo sho.
'Cause like, at a certain point it's just so much text in the little teensy edit box that you have to do something about it, and it's especially annoying when it's in between all of the HTML elements and page content.
Hello i know it has been a good while finaly found you lol. I was wondering if you remember me and saying you would make a bio for my Cheveyo? I have no idea where that thread is or i would have posted on that one sorry.
This is a great guide. My only input is that you don't need the <head> part; you can just place the link tags by themselves. If you'll notice by using your browser's web developer tool, the link tags you add don't actually appear in the head — they appear right where you put them. It doesn't work like that <body> trick I showed you that one time.
Oh my god thank you I have
tracking this for later ooo
Yes. Thank you. /Bookmarked
Thank you. /Bookmarked
Oh very exciting! I've been
I do have a question though, its probably a really stupid one, but, for example - if you are using fonts from somewhere like Google Fonts and you need to link back to that stylesheet to grab your font, where exactly do you put that now?
Good to know people find this
Bullings--you can have as many link tags as you want on your page, so you can have the link for the external CSS plus as many link tags as you like for fonts as well. For example, the TEFc site, even without our meddling on the pages, has about ten link tags in it.
Gonna track this!
I wonder if this could work
this is useful, but goes over my head right now xD
I do believe It could work in
As it is now, you can style signatures with the stuff in style tags, with external css (for instance, I'm using this exact post to make sig text appear red right now), and pretty much anything as long as the blog they show up in is set to BBCode. Sometimes you see a sig with an unclosed tag or something that fusses with all the subsequent posts on the page.
I guess I meant having a ton
I think that with Javascript
One could write a lengthy function in Javascript that would create elements within the signature that are images with links. But all that would go in the signature would be a style tag with javascript built in to create an HTML tag that would load external Javascript that would create the pictures and links.
There may be an easier way to do it but that's the only way that seems possible to accomplish it at my baby level of Javascript, and I don't think I'd be able to do it myself.
Let me just Love this for now
Love this for now
Character Hub
Track to read this later!
(No subject)
(No subject)
Did you know that you are
Please do not feed the ego
Loving this, wow! Hoping to
Track, thank you !
Avatar & signature by Shimmyshimmy. ♥
Yeah, the tidiness is the
'Cause like, at a certain point it's just so much text in the little teensy edit box that you have to do something about it, and it's especially annoying when it's in between all of the HTML elements and page content.
Tracking. So helpful thanks
Hi Alison. I made a new
tracks
Hello i know it has been a
This is a great guide. My
<head>part; you can just place the link tags by themselves. If you'll notice by using your browser's web developer tool, the link tags you add don't actually appear in the head — they appear right where you put them. It doesn't work like that<body>trick I showed you that one time.bookmark
bookmark