Where and how do I add a custom class like:
.my-custom-class {
color: red;
}
The reason is so it won't change all of the Semantic UI elements too.
In which file do I add it for it to be included in the dist file?
If you don't want to change the Semantic-UI elements, why don't you just have a completely separate CSS file for custom styling?
It's completely fine (and quite common) to have multiple CSS files, such as with the following structure:
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
Then in custom.css, simply include your additional custom styling:
.my-custom-class {
color: red;
}
The order in which the external stylesheets are loaded directly corresponds to the specificity; loading your custom stylesheet after Semantic-UI will give it more specificity in the case of a tie.
Hope this helps! :)
I'm not sure how to link CSS to the HTML. Here's how I link currently:
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
But when I do so and save it, I don't see any changes, so I've resorted to using the <style> tag. I'm also using Sublime Text if that has anything to do with the issue:
<style type="text/css">
body {
background: green;
color: black;
background-color: red;
}
</style>`
Try an absolute path.
Change:
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
to
<link href="http://yourwebsite.com/styles/main.css" rel="stylesheet" type="text/css"/>
If that doesn't work please edit your question to include the contents of your main.css file as this may be a simple misunderstanding on how to write a stylesheet.
Happy coding.
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
As written, your main.css file has to be in a subfolder called "styles", relative to your html document.
Here is the structure visualised:
If you had the main.css file in the same folder, you could change the link tag to be:
<link href="main.css" rel="stylesheet" type="text/css"/>
As others have stated it's likely that the path is wrong. Try appending that path to the url of the html page, minus the html file.
eg: http://www.mysite.me/index.html becomes http://www.mysite.me/styles/main.css
If the css file doesn't come up then your path is incorrect.
If your css file includes the <script> and </script> that is your issue. The CSS file should only include the style sheet text, and those tags are for entering a style sheet inside the HTML and not using a link as you seem to want to do (props to you ;))
The content of your main.css file should look exactly like:
body {
color: black;
background-color: red;
}
If you are using Chrome, press CTRL + U and right click the main.css and open it in a new tab. If the file can't be displayed, the path is probably wrong
Suppose we have the following in stylesheets/myFilename.css.scss:
...
.carousel-control.left, .carousel-control.right {
background-image: none;
}
...
This will not perform as intended unless I modify it to:
...
.carousel-control.left, .carousel-control.right {
background-image: none !important;
}
...
However, if instead of having the css in the stylesheets folder, I put it directly into myfile.html.erb, I don't need !important. How do I resolve this issue?
I assume that it has something to do with the ordering/combination of the css from stylesheets, but I'm not certain. If anyone could shed some light, that would be great.
This is because CSS has a cascading hierarchy that it follows. In your case:
Inline styles
Internal stylesheet
External stylesheet
Internal stylesheet is prioritized more than External stylesheets, so if you declare it directly in your html, you won't need !important anymore to override any other external stylesheets that cause this conflict.
Further reading on css hierarchy and specifity:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://www.w3schools.com/css/css_howto.asp
If you need a !important in your external stylesheet, that means you have a css conflict somewhere else. Being more specific in your selector is always better than using !important, so you can do it like so:
/*Use an ID in your html*/
#my_id .carousel-control.left, #my_id .carousel-control.right {
background-image: none;
}
You should add your stylesheets/myFilename.css.scss file after the main stylesheet.
Suppose, your all css style getting from styleshees/style.css
Now your should write (stylesheets/myFilename.css.scss) it after that ( styleshees/style.css) in your index or associate header file.
Example,
<link rel="stylesheet" type="text/css" href="/styleshees/style.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/myFilename.css.scss">
not
<link rel="stylesheet" type="text/css" href="/stylesheets/myFilename.css.scss">
<link rel="stylesheet" type="text/css" href="/styleshees/style.css">
I am completely stumped as to why this doesn't work. It seems the HTML file can't load the CSS for some reason, even though both are in the same directory. Any idea what might be the problem?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>
style.css
body{
background-color: #F9F9F9;
background-image: url(images/bg3.png);
background-position: center top;
background-repeat: repeat;
text-shadow: #FFFFFF 0px 1px 0px;
font-family: "Georgia", "Times", serif;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration: none;
}
#main{
margin: 50px auto 50px auto;
width: 1000px;
min-height: 500px;
padding: 0px 20px 0px 20px;
}
The above doesn't work. Adding the css inline in index.html works fine though
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css" media="screen">
body {
background-color: #F9F9F9;
background-image: url(images/bg3.png);
background-position: center top;
background-repeat: repeat;
text-shadow: #FFFFFF 0px 1px 0px;
font-family: "Georgia", "Times", serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
#main {
margin: 50px auto 50px auto;
width: 1000px;
min-height: 500px;
padding: 0px 20px 0px 20px;
}
</style>
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>
Add
type="text/css"
to your link tag
While this may no longer be necessary in modern browsers the HTML4 specification declared this a required attribute.
type = content-type [CI]
This attribute specifies the style sheet language of the element's
contents and overrides the default style sheet language. The style
sheet language is specified as a content type (e.g., "text/css").
Authors must supply a value for this attribute; there is no default
value for this attribute.
Check both files in the same directory
and then try this
<link href="style.css" rel="stylesheet" type="text/css"/>
As per you said your both files are in same directory. 1. index.html and 2. style.css
I have copied your code and run it in my local machine its working fine there is no issues.
According to me your browser is not refreshing the file so you can refresh/reload the entire page by pressing CTRL + F5 in windows for mac CMD + R.
Try it if still getting problem then you can test it by using firebug tool for firefox.
For IE8 and Google Chrome you can check it by pressing F12 your developer tool will pop-up and you can see the Html and css.
Still you have any problem please comment so we can help you.
You have to add type="text/css" you can also specify href="./style.css" which the . specifies the current directory
I have struggled with this same problem (Ubuntu 16.04, Bluefish editor, FireFox, Google Chrome.
Solution: Clear browsing data in Chrome "Settings > Advanced Settings > Clear Browsing Data",
In Firefox, "Open Menu image top right tool bar 'Preferences' > Advanced ", look for this image in the menu:
Cached Web Content click the button "Clear Now".
Browser's cache the .css file and if it has not changed they usually won't reload it. So when you change your .css file clear this web cache and it should work unless a problem exists in your .css file.
Peace,
Stan
With HTML5 all you need is the rel, not even the type.
<link href="custom.css" rel="stylesheet"></link>
Well I too had the exactly same question. And everything was okay with my CSS link. Why html was not loading the CSS file was due to its position (as in my case).
Well I had my custom CSS defined in the wrong place and that is why the webpage was not accessing it. Then I started to test and place the CSS link to different place and voila it worked for me.
I had read somewhere that we should place custom CSS right after Bootstrap CSS so I did but then it was not loading it. So I changed the position and it worked.
Hope this helps.
Thanks!
Also make sure your link tag's media attribute has a valid value, in my case, I was using WordPress CMS and passed the boolean value true in the media field so it showed like that.
<link rel="stylesheet" href="./style.css" media="1">
That's why it was giving error.
There are three main attributes on which the css style loading depends.
Make sure that your link tag's relation rel attribute's value must be valid for a css file i.e. stylesheet.
Make sure that your link tag's target href attribute's value must be pointing to a valid an existing Cascading Stylesheet file. Like in your case it's ./style.css.
Remember that you can use both absolute and relative paths in the href attribute's value. That means if your file style.css is present at the root i.e. / then you can also use /style.css in the href attribute's value or else if the file is present in the same directory in which your HTML file is present then you can use ./style.css as the value in your link tag's href attribute's value.
Make sure that your link tag's media attribute should be one of the following.
For every device you can use the all keyword as your media attributes's value.
For PC's and laptops only you can use the screen as your media attribute's value.
For webpage prints you can use the print keyword as your media attributes's value. Note that it also applies when you press the Print Screen button to capture the screen's image.
At last for screen readers you can use the speech keyword as your `media attribute's value.
By following these rules your HTML structure for link tag will be.
Your css file should be defined as UTF-8. Put this in the first line of you css file.
#charset "UTF-8";
You could try this:
<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
Make sure that the browser actually makes the request and doesn't return a 404.
I found myself out here looking for an answer and figured out that my issue was a missing character - spelling is important.
<link href="tss_layout.css" rel=styleheet" />
once I put the s in the middle of stylesheet - worked like a charm.
I had been facing the same issue,
For Chrome and Firefox but everything was working how it should in internet explorer. I found that making the CSS file UTF-8 made it work for chrome.
<link href="style.css" rel="stylesheet" type="text/css"/>
I had a similar problem and tested different ways to solve it.
Eventually I understood that my index.htm file had been saved with "Unicode" encoding (for using Farsi characters in my page) while my .css file had been save with "ANSI" format.
I changed the encoding of my .css file to "Unicode" with Notepad and the problem got solved.
Not sure this is valuable, but I will leave this here for others. Making sure that "Anonymous Authentication" was set to "Enabled" loaded my CSS file correctly.
To do that in Visual Studio 2019:
Select your solution's name, right click, and hit "properties"
Navigate to the "Properties" frame, typically in the bottom right corner
Ensure that "Anonymous authentication" is set to "Enabled" as shown below
Here is another cause to add to the collection on this page. In this code...
<link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen">
...I misspelled rel as ref.
After digging and digging on this issue, for me it was solved by Johannes on another thread: Local CSS file is not loading from HTML
The type attribute in your link tag has typographical quote
characters: type=“text/css”. Try to change these to "plain" quotes
like type="text/css"
I had similar problem.. my code was working fine but suddenly css sheets stopped working.. after some detection I found out that somehow the MIME of style sheet was changed from type="text/css" to "text-css".. Idk how they were changed since the code was working few hours ago but however I changed it and it worked fine. hope this helps.
Well I faced this issue today and as workaround (not the best) I did below
<script type="text/javascript" src="testWeb/scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>
where testWeb is my root app folder in my htdoc dir. in windows (using xampp) or in /var/www/html directory as for some reason I do not know yet
<script type="text/javascript" src="scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>
not loading while html index file beside scripts folder in same directory.
This may be a 'special' case but was fiddling with this piece of code:
ForceType application/x-httpd-php
SetHandler application/x-httpd-php
As a quick test for extentionless file handling, when a similar problem occurred.
Some but not all php files thereafter treated the css files as php and thus succesfully loaded the css but not handled it as css, thus zero rules were executed when checking f12 style editor.
Perhaps something similar might occur to any-one else here and this tidbit might help.
I was having similar problem but resolved changing the Style.css to style.css Because of this name caps letter "S"change it was throwing 404 error we won't notice small changes in my system it was working but when I hosted in cloud it was throwing this error make sure this all being checked after uploading in cloud
i have the same probleme, i always change the "style.css" to "styles.css" or any other name
and it worked fine for me.
HTML was not loading my css because i had placed the style.css in template folder rather it should be in static folder . After replacing my file to static folder it worked for me
Use the following steps to load .CSS file its very simple.
<link rel="stylesheet" href="path_here.css">
note: 1--> don't forget to write "stylesheet" in rel attribute.
2--> use correct path e.g: D:\folder1\forlder2\folder3\file.css"
Now where ever directory you are in, you can load your .css file exactly path you mention.
Regards! Muhammad Majid.
guys the best thing to try is to refreash the whole website by pressing ctrl + F5 on mac it is CMD + R
Add type="text/css"
It worked for me.
I have a set of Styles that were first created inside the style attribute on a page.
I want to move it from being on the page itself into a stylesheet.
however, when I move it to a .css file, the page breaks, move the code back to the html doc and it works fine again.
This makes absolutely no sense, moving styles from a style to a css file shouldnt break the code should it?
Am I missing something? I am not changing any of the code, its simply a copy and paste.
This is just a shot in the dark as (at the time of this post) you haven't provided source code.
Make sure you're linking to your stylesheet using a link tag in the head of the HTML document.
If you had:
<style type="text/css">
/* <![CDATA[ */
#someid
{
margin: 0;
padding: 3px 12px;
}
/* ]]> */
</style>
You'll need to have
#someid
{
margin: 0;
padding: 3px 12px;
}
in your CSS file with:
<link rel="stylesheet" type="text/css" href="path/to/style.css" />
to link to the stylesheet.
Some common newbie mistakes include:
<style type="text/css" src="path/to/style.css">: because it's a similar syntax to the <script> tag, which would make sense, but is invalid
<link rel="stylesheet" src="path/to/style.css">: but link elements use href not src
placing link elements within the body: although browsers will tend to manage link elements in the body, there are likely going to be some errors, and it's not a defined behavior
not specifying a doctype declaration: allows the browser to go into quirks mode, which is never a good idea.
You should make sure the stylesheet is properly imported.
Sometimes the #import doesn't work well if not used accordingly, so always reference your stylesheet:
<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />
Always remember to close the <link> tag as it's a self-close tag. I think #zzzzBov forgot to mention that.
Finally, if that doesn't work, try to override some of the styles by physically writing (above the </head> section) something like:
<style type="text/css">
body { background: blue; }
* { color: red; }
</style>
and see if that gives you a blue background and red colored text. It should. After that, try to implement the referencing method and make sure you reference the stylesheet file to the right directory.
Good luck!
I had the same problem, but the cause was not some mistake in the code but the fact that the .css file was loaded with some delay after making the modifications in it. The server needed 5 - 10 minutes to update the changes.
I had this problem as well, and the reason was that the path had to be updated for some url() references since the css file was in another folder than the html file it previously was called from.
So basically
background-image: url('patterns/debut_dark.png');
had to be changed to
background-image: url('../patterns/debut_dark.png');
Don't include <style type="text/css"></style> in your .css file.
I had the same issue and was quite frustrating. I had a css file that was properly referenced, however not all the elements were being loaded from it. As it turns out, it was a cache problem in Chrome. After clearing it and restarting the window, the css elements were working correctly.
Ran across same problem. Found there were lines in my css file that should have been commented out (a block of colour palette information that I had cut and paste to the top of the file for quick reference).
If all your syntax seems fine, then its most likely a browser cache problem that we can easily fix. In your html/php file, reference your new .css style sheet (e.g. styles.css) by adding an extra random parameter. This will force browsers visiting your page to fetch your latest styles.css.
In the of your html/php file, you should have something like this to load your new styles.css file:
<link rel="stylesheet" type="text/css" href="styles.css" />
simply change it to be like this:
<link rel="stylesheet" type="text/css" href="styles.css?ref=v1" />
that extra "?ref=v1" will prevent browsers from re-using the styles.css file they have cached, and will force browsers to get your very latest styles.css file. As you make updates to the styles.css file and upload them to your web server, just change the "v1" to "v2" etc. or whatever naming system you like so that browsers are forced to reload the latest styles.css. Note adding this "?ref=v1" to the link does not need you to change the name of your styles.css file (you can change the file name but i find that gets messy). This is a simple and clean way to force browsers into re-fetching your very latest .css file.