halfliquid
Registered User
Posts: 5
|
Posted: 3/12/05 9:47 pm
External Style Sheets
Having external sheets is easy and cleans all the clutter out of the custom html section. You leaving only the html and javascript you may have.
To be able to have external style sheets you will need a host, free or paid whatever you can get your hands on. past your css into notepad or your editor of choice and save it as a .css file. Upload it to the host and then you can begin linking.
Also when pasting the css make sure you are not including the style tags.
Note: Remove the * from the code. or it will not work!
<link r*el*="stylesheet" href="URL to your .css file" type="text/css">
And place that where your css was in custom html.
Alright, let me explain what that does. 'link rel' tells the browser what to expect, in this case a stylesheet. 'href' is where the .css file is located. and 'type' tells the bowser that the file is css. You could get more indepth in to type, but I'll leave that for a later time.
An alternative to the link rel tag you could use this:
<*style type="text/css" media="screen">
@import url (mystyle.css);
</style*>
Which imports the file from the location or url you put it. This would go in the header, where all the normal css goes.
Media Types
In the above code I included media="screen". Well there are a bunch of media types, listed below:
screen: Intended for non-paged computer screens.
tty: Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
tv: Intended for television-type devices (low resolution, color, limited scrollability).
projection: Intended for projectors.
handheld: Intended for handheld devices (small screen, monochrome, bitmapped graphics, limited bandwidth).
print: Intended for paged, opaque material and for documents viewed on screen in print preview mode.
braille: Intended for braille tactile feedback devices.
aural: Intended for speech synthesizers.
all: Suitable for all devices.
Most websites just use 'screen', 'tv', 'projection'. 'print' and 'all'. You can use multiple media declarations by sperating the value (tv or screen or whatever you put in) with a comma ','.
This is an example of a persistent style sheet, one that will always show up when the site is opened:
<link r*e*l*="stylesheet" href="URL to your .css file" type="text/css">
it's just the basic external style sheet code.
To have a style sheet that is prefered by the author, use this code:
<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
The title attribute makes it still persistant but allows it to be used for style sheet switching.
<link r*e*l*="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
This is an alternate style sheet, using javascript this can be used to make the font bigger, and/or smaller if the users would like. There are also numerous things users can do with alternate style sheets, which include color changing, layout changing and many more.
When using the @import for style sheets, if you want to add media types use this example below and modify to what you need.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
Some of the content and codes are coprighted to the w3 link
Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University). All Rights Reserved. http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231"
Edited by: Nutrocker at: 3/15/05 2:38 pm
|
Cool Tips & Tricks
:::Edit Post Button
:::Delete Post Button (Moderator Only)
ezboard Help Communities: