I was wondering how to link to external CSS. I hear that it can decrease loading time. I'm using Blogger, and I have tried a few website's methods, but both brought up errors in Blogger.
just use the direct path <style type="text/css" src="http://your_path_to_css.css/" ></style> another method is to use the import method
mz906, that should be <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen,projection"> (if using an XHTML DOCTYPE, add a space and a forward slash immediately after projection"). Notice how I have the stylesheet in a folder called "styles" and that it's being referenced relative to the root of the Web site. Also notice how the stylesheet is named by its media type (and that the type "projection" is added for Opera users who use "full screen" mode in their desktop browsers).
DAN, didn't know bout that "projection" for opera sorry bout that syntax, i was thinking inline styles or something... also maybe another way to organize CSS... another guy in a forum told me bout this and i've been doing ever since /assets/css/layout.css /assets/css/text.css /assets/css/images.css /assets/css/global.css (occasional)
That "other way" just results in increaed ping times, HTTP requests and generally slows down the response times thereby increasing the time it takes to download and render the page. I definatley do not recommend doing it that way. One stylesheet for the screen, one stylesheet for printing, and one stylesheet for aural devices - that's it (since the others are barely supported, and even then the aural device stylesheet isn't as well supported as it should be).
You'll never get everything in one stylesheet with blogger anyway because there's google's style sheet and blogger's style sheet and then yours. But if you look at the top of your html file, you should see the lists for google's and blogger's links to external files. If it's not working, it could be the path isn't right (triple check that). Beyond that, I know little else of Blogger. But surely one can have external sheets on it?
Everything is inside this tag: <b:skin><![CDATA[/* At the top, they've got Variable Definitions that look like this: <Variable name="mainBgColor" description="Main Background Color" type="color" default="#eec" value="#ffffcc"> <Variable name="mainTextColor" description="Text Color" type="color" default="#333" value="#333333"> I don't see where the link is... Then it goes into CSS: body { background:#006; color:$mainTextColor; font:x-small Verdana, Arial, Sans-serif; font-size:12px; letter-spacing:0; line-height:1.5em; margin:10px 0 0; max-width:930px; min-width:875px; padding:0; text-align:center }
Before you do this you need to look at the visitor statistics for your blog. I'm guessing you're using Google Analytics or somthing similar considering it's a Blogger blog. There's two statistics you need to pay attention to. The first is page views per visit, if that number is in the 1-2 page range you're probably not going to see much of an improvement. However, if you know you have alot of repeat visitors that will not be true. For instance, if you make new posts daily & you know there's quite a few people who come back every day & read them, there will be an improvement, provided the server hosting the stylesheet sets a reasonable expiration date on the stylesheet. Basicly, if your blog has a high turnover rate & you're not getting more than 1-2 pageviews per visit, you'ld be wasting your time & possibly bandwidth by making the stylesheet external on a Blogger blog. Also note, that if the server hosting the external stylesheet is slower, or further away than Blogspot servers, you could actually be hurting performance by using the external stylesheet.