Including css

[ice78991]

Does it make any difference if I put my css directly into my page or whether I use

<link rel="stylesheet" href="styles.css" type="text/css" />

Assuming the styles are used in this page only, which is the preferred method

 

[BillyRayPreachersSon]

Linking is always preferred for two reasons:

1. It keeps the page weight down, as the file will be cached initally, and

2. People with no CSS support aren't forced to download code of no use to them.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

I'd add number 3,

3. It makes code maintenance much easier as you only have 1 place to edit

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[BabyJeffy]

3. It makes code maintenance much easier as you only have 1 place to edit

You haven't seen the css files for the project I'm working on

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[ice78991]

Does it follow then that it is ok to put all of your css (or javascript - I assume .js works the same) into 1 page - ie it is not necesary to try to break up your css into smaller files for each page

 

[ice78991]

I say this because having all css in 1 place would make organization easier for my project and I would be taking advantage of file caching (I accept the first page may be a little slower to load when the initial cache takes place but hopefully not by a great deal)

 

[BillyRayPreachersSon]

Not necessarily. For example, you might split out navigation into one CSS and JS file, and layout into another.

The advantage of this is that if your navigation never changes but your layout does, browsers will still load the cached nav file but fetch down the updated layout file.

As you can see, it really depends on how often certain parts of your site change.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

I tend to create a stylesheet with base styles then additional sheets for different pages if I need them.

Most commonly I have something like

global.css <- base styles
home.css <- the home page tends to have a different layout
inner.css <- inner pages
forms.css <- form elements

I may also have one for the nav, but normally this goes in the global stylesheet.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[BillyRayPreachersSon]

Oh yes - we normally have IE6- and IE7-specific override CSS files, as well as a printer CSS file. You can link these in by specifying a media type (for the printer CSS file), and using IE-only conditional comments.

You can find out more about the latter in faq215-6625. Printer style sheets are linked in as follows:

<link rel="stylesheet" href="/assets/css/print.css" type="text/css" [!]media="print"[/!]>

I can't think of much else you'd need CSS-wise

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

P.S. It's normal to include your printer CSS [!]after[/!] your regular CSS files (in source order), so that you don't have to use more specific rules.





Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]