2

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?

Improve this question
8
  • You could write inline styles. Commented Dec 27, 2013 at 10:01
  • @Leifingson I can't use inline styling coz this file use in multiple pages so it create lots of work to me. Commented Dec 27, 2013 at 10:03
  • Also, possible duplicate of stackoverflow.com/questions/4957446/… and stackoverflow.com/questions/1642212/… Commented Dec 27, 2013 at 10:04
  • 1
    Whats the reason, not adding in head section? Commented Dec 27, 2013 at 10:04
  • 1
    @Himalya Vashistha likewise you can put the <noscript> in the body if you want Commented Dec 27, 2013 at 10:12

5 Answers 5

Reset to default
4

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

you can try this: 

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

2 Comments

I think he can't add directly to head
Hehe, really sharp answer to his question: "So Is it possible to add css file into my html document without using javascript?" ^^
1

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 } ?>
Improve this answer

Comments

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.

Improve this answer

1 Comment

Himalya Vashistha didn't want to put it in the head, but that's fine cause it's okay to put <noscript> in the body
1

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.

Improve this answer

1 Comment

This is correct. Stylesheets don't have to be in <head>, but the sooner you add them in the page, the less likely you'll have flashes of unstyled content. Just use <link> right after your "common head section" file or use PHP in that file to add the stylesheet only on the pages that need it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.