Angularjs applycss for directives

Question

Developed a simple angularjs application using the code given @ http://gon.to/2013/03/23/the-right-way-of-coding-angularjs-how-to-organize-a-regular-webapp/

It basically creates your header and footer as directives to use anywhere.

The code is working fine but how do I apply custom css for the header and footer html files.

Can they only be applied inline? In other words, Can I not refer to an external css.

EDIT: Code @ http://plnkr.co/edit/AmvqLu?p=options
Expected: Need to apply style.css to header.html alone.

Appreciate you response.

of course you can use external css files. It's not clear what your specific issue is — charlietfl
– charlietfl, Commented Jul 11, 2014 at 20:18
How do I use it? That was my question. When I use the link tag in header.html, it doesn't work as expected. — palaniappanm
– palaniappanm, Commented Jul 11, 2014 at 20:22
what does doesn't work mean? WIthout some specifics your whole question is far too vague — charlietfl
– charlietfl, Commented Jul 11, 2014 at 20:23
Have made a plunker version @ plnkr.co/edit/AmvqLu?p=options . When I remove the link tag line @ header.html, it is working. Do let me know if you have any further questions. Thanks. — palaniappanm
– palaniappanm, Commented Jul 11, 2014 at 22:35
link tags belong in the head, why can't you just put it there? Is this what you are after? plnkr.co/edit/XOAgvF?p=preview — charlietfl
– charlietfl, Commented Jul 11, 2014 at 22:41

Bill · Accepted Answer · 2014-07-11 22:53:48Z

1

CSS files have to go in the document head, you can't place them in Angular templates (your header.html file). Instead, place all of your css files in the document head and namespace your CSS so that they only apply to the sections that you want them to.

index.html

<html>
<head>
<link rel="stylesheet" href="/styles/app.css">
</head>
...

header.html

<div class="header"><p>This is some text</p></div>

app.css (turn only the header paragraphs blue)

.header p { color: blue; }

You can search for object oriented CSS (OOCSS) or BEM for more information on naming conventions for CSS such that rules don't conflict.

edited Jul 11, 2014 at 22:53

answered Jul 11, 2014 at 22:48

Bill

25.6k8 gold badges100 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs applycss for directives

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related