Load CSS file into head section or into HTML section without using Javascript

Question

I have a web page in which I add a css file in head section using javascript code from the bootom of the page:

$(document).ready(function(){
var css=document.createElement('link');
css.type='text/css';
        css.href='/css/user.css';
        css.rel='stylesheet';
        document.getElementsByTagName('head')[0].appendChild(css);
});

So I have a problem when user disable javascript then thic file can't be added to page so is there any way to include css file in that page using

<noscript>..Code..</noscript>

I can't add this file directly into my head Section.

So Is it possible to add css file into my html document without using javascript?

@Leifingson I can't use inline styling coz this file use in multiple pages so it create lots of work to me. — , Dec 27 '13 at 10:03
Also, possible duplicate of http://stackoverflow.com/questions/4957446/load-external-css-file-in-body-tag and http://stackoverflow.com/questions/1642212/whats-the-difference-if-i-put-css-file-inside-head-or-body — Leifingson, Dec 27 '13 at 10:04
@anand4tech Because i use a common head section for all pages to my website.If i include it in head section then it appars on all pages and it also increase page size. — , Dec 27 '13 at 10:06
@Himalya, why don't you put the header section flexible based on your requirement ? — Anand Jha, Dec 27 '13 at 10:17

score 4 · Accepted Answer · answered Dec 27 '13 at 10:07

with javascript:

$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "/styles/yourcss.css"
}).appendTo("head");

http://api.jquery.com/jQuery/#jQuery2

without javascript:

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

score 1 · Answer 2 · answered Dec 27 '13 at 10:03

1

you can try this:

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

answered Dec 27 '13 at 10:03

Nopesound

482
1
13
28

I think he can't add directly to head – shanks Dec 27 '13 at 10:04
3

Hehe, really sharp answer to his question: "So Is it possible to add css file into my html document without using javascript?" ^^ – nkmol Dec 27 '13 at 10:04

score 1 · Answer 3 · answered Dec 27 '13 at 10:04

Yes it is possible to load css file without using javascipt

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

If you want to add css on the basis of some condition then use php if statement as shown below:

<?php if(YOUR CONDITION){ ?>
  <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
<?php } ?>

score 1 · Answer 4 · answered Dec 27 '13 at 10:07

1

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

Now you can place this code in head section and it'll be called only when javascript is disabled.

answered Dec 27 '13 at 10:07

ankitjain11

253
2
16

Himalya Vashistha didn't want to put it in the head, but that's fine cause it's okay to put – Leifingson Dec 27 '13 at 10:14

score 1 · Answer 5 · answered Dec 27 '13 at 10:08

Not sure how HTML compliant this is, but you can include a link within your body tag and still have it reference the class, given that you cannot edit the head section as stated.

Doing this did work for me, referencing the 'class1' from the style.css file

<head>
</head>
<body>
<div class="class1"></div>
<link href="style.css" rel="stylesheet" type="text/css">
</body>

Edit: in HTML 4.01 it is not acceptable, however using HTML5, this is perfectly acceptable markup. If referencing a larger CSS file this may cause some elements to be without style temporarily as the head section is intended to load such documents prior to displaying content, however if this is not a possibility, then this may be a solution for you.

This is **correct.** Stylesheets don't have to be in ``, but the sooner you add them in the page, the less likely you'll have [flashes of unstyled content](http://www.bluerobot.com/web/css/fouc.asp/). Just use `` right after your "common head section" file or use PHP in that file to add the stylesheet only on the pages that need it. — fregante, Dec 27 '13 at 10:12

Load CSS file into head section or into HTML section without using Javascript

5 Answers5