Is it possible to apply an external CSS to a component in AngularJS1?
And if so - how?
I could find only examples which apply inline css...
AngularJS component's template is nothing different then a regular HTML template. So including the CSS in one of the standard ways should work.
Inside of the HTML of your template use:
<link rel="stylesheet" type="text/css" href="theme.css">
Where theme.css will be replaced with the absolute path to your external CSS.
Related
For CSS in my nextjs project I am using styled-jsx (https://github.com/vercel/styled-jsx).
All styled JSX tags (<style jsx>) will be appended at the end of the HTML <head> element.
However I have another native (non styled-jsx) HTML <style> tag that contains several CSS overrides. If I place my <style> tag in the nextjs <Head> component it will be placed in the HTML <head> element but above the other styled-jsx style tags. This will cause that the other styled-jsx <style jsx> tags will override my styles defined in my normal <style> tag. I want to achieve the other way around.
import Head from 'next/head';
<Head>
<style dangerouslySetInnerHTML={{ __html: props.css }} />
</Head>
I already tried to put my style tag outside of the <head> element but this is no option for me right now.
How can I put my native HTML <style> tag at the end of the HTML <head> element so other styles will be overridden?
If you are still looking for an answer:
My styles were overriden by styles like Bootstrap so I was also facing your problem.
In the end I decided to override the order in next/head by overriding next.js-Sourcecode.
This is the file you might need to override:
https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx
You have to move {head} down.
After some research I decided to use a npm-module named patch-package. https://www.npmjs.com/package/patch-package
It's straight forward and allows you to create a patch for the nextjs-Sourcecode.
I don't know much about ruby, but I know about html and css...
In my Ruby on Rails application I have this tag:
<%= stylesheet_link_tag "admin.css", "jquery.facebox.css", "jquery.tooltip.css" %>
Which has the output of this (i only show the css, i need css only):
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/admin.css?1391082652">
But not exist this path "/stylesheets" in my aplication, i found the file admin.css only here:
/home/webserver/app/public/stylesheets
/home/webserver/app/app/stylesheets
when I rename it to "admin.css_", the css styles continues to apper normal in html ruby, even clear cache in browser.
How I can change the css and make work correctly in website?
Do I need to compile anything?
Not only overwrite the file somewhere?
Hi you can add extra css in your application with .css in /home/webserver/app/public/stylesheets
Another is that css are you applying is directly from jQuery I think so
Please inspect the in browser and check the class name
then search in your application with ctr+f
I'm rather new to this so its mostly (copy and paste) with a little YouTube and reading materials here and there.
Why have both? Please simplify you answer, don't go so technical.
<style type="text/css"> is when you want to have style rules embedded within the page.
<link rel="stylesheet" href="path/to/style.css" /> is when you have a separate stylesheet file that you want to reference in the current page - doing this means that clients don't have to download the CSS every time, which makes page-loads faster.
CSS has the #import directive, if you use <style>#import style.css;</style> then it's roughly equivalent to <link rel="stylesheet" href="style.css" /> (but with some minor differences: see Difference between #import and link in CSS ).
Method 1 (using <style type="text/css">)
Is simple way to declare CSS. But it should be used for small codes. When you want to overwrite an attribute of the main stylesheet.
Method 2 (using <link rel="stylesheet" href="path/to/style.css" />)
The first advantage of this method is that, we have a style in an external file. And that means that we can use it repeatedly. But this is not the end of the advantages. You can tell your browser to save the file in the cache. Which reduces page load time.
What is better?
In my opinion Method 2.
Using <style type="text/css"> is for CSS code in your HTML file and <link...> is for including an external CSS file.
The first case <style type="text/css"> is for including css definitions in your html file. The 2nd case puts the css definintions in style.css (or whatever file is the href). The 2nd case makes it easy to use the same css across multiple html files.
The first is used to insert css code directly in your html files, while the second is calling an external css file.
I have trouble with less.js. Less.js itselfs works fine, but when i want to link other css styles, it seems to loaded them, but it doesnt works. There is problem witch cache probably.
there is generated code:
<link href="http://localhost/less/bootstrap.less" type="text/css" rel="stylesheet/less">
<link href="http://localhost/css/admin.css" type="text/css" rel="stylesheet/css">
<script src="http://localhost/js/less-1.2.2.js" type="text/javascript">
<style id="less:xxx:cz-web-static-less-bootstrap" type="text/css" media="screen">
<script src="http://localhost/js/head.min.js" type="text/javascript">
So what is in bootstrap.less it works, but what is in admin.css doesnt work.
strictly speaking, rel="stylesheet/css", isn't valid. But it's possible there are more problems. We'd need to see some examples of the code. If you are utilizing LESS's nested selectors - each nesting level will potentially override your css elements even if you are calling it after your less file.
More simple put:
#mybody #mydiv p a
{
style
}
which is potentially a very easy string to create with nested LESS structure - WILL override a
a
{
style
}
in your CSS.
I'm using twitter bootstrap. My problem is that font-sizes in tables are wrong. For some reason the User Agent stylesheet is overriding the bootstrap table styles.
On the twitter bootstrap page (http://twitter.github.com/bootstrap/base-css.html) everything is of course working correctly.
In my inspector I see the following difference:
My page:
The twitter bootstrap page:
So definitely the problem is that the user agent stylesheet is overriding the bootstrap styles.
I haven't been able to figure out why this is different on my page and the twitter bootstrap page.
Most of the other CSS is working fine.
My css import:
<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">
CSS import on twitter bootstrap page:
<link href="assets/css/bootstrap.css" rel="stylesheet">
I actually figured this out myself. I had the <!DOCTYPE html> tag wrongly written. So if you have this problem make sure the doctype declaration is correct!
Please import the docs.css into your application as well. If I must say so, you must have realized that the Twitter Bootstrap Docs are using bootstrap.css and a custom docs.css. Try doing, which you can download from the github package. Then, try playing around with the table classes in docs. css without messing with the master css. Or try adding DOCTYPE in headers.
<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
If declaring <!DOCTYPE html> in the very beginning doesn't work, then it's probably not your user-agent style sheet casuing it. It may be Bootstrap's style sheet overriding your styles (I've had this problem). Make sure your style sheet is linked to after Bootstrap's style sheet in your HTML.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->
I had the same issue as the OP. I wanted lovely small text and some user stylesheet was overiding it and putting:
font-size: medium;
When I wanted:
font-size:8pt;
I placed the following at the top of my HTML page:
<!DOCTYPE html>
All was good then, a bad habit to get into to not declare doctype at the top. All user stylesheets have now gone.
To discover what is overriding what on your CSS it is always a good idea to inspect element (F12) and you can modify and untick attributes on the fly until you get to right, then update your CSS file with it!
However if you do have a user stylesheet issue, these values will be locked.
Check whether your CSS is called or not in browser dev tools (press F12) under network column.
If it is not called, use your style sheets with1 rel="stylesheet" type="text/css".
It worked for me.