I have multiple css files in html file. It cause conflict for some of the styles.
I want to know execution sequence to avoid conflict or suggest me some other method.
Below are the code.
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox-theme.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/cropper.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fileinput.cs">
The CSS files will be parsed from top to bottom. For example, any conflicting styles in main.css would be overridden by style.css.
I would suggest using a CSS preprocessor like Sass and a task runner like Gulp to bundle your stylesheets together, reducing the number of requests the browser has to make. That would also make it easier to namespace any styles to avoid conflicts.
For example:
#namespace {
// original code goes here, which will all be prefixed with #namespace
}
FYI, there’s a typo in your code above—css/fileinput.cs is missing an s.
Related
to submit an assignment, I must put my css and html file in a separate folder "assignment", when I did that the CSS and bootstrap is not showing up in my webpage. I know i need to update the css link, so that's what I did below, but it didn't work so how do I correctly do that? directory
from:
<link href="styles.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
to:
<link href="assignment/styles.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
If your index.html (which you want to put the codes) is out of the assignment folder and the css files are in the assignment, use
<link href="./assignment/styles.css" type="text/css" rel="stylesheet">
<link href="./assignment/bootstrap.min.css" type="text/css" rel="stylesheet">
or if all of them are in the same assignment folder, you don't need to change the path.
If your index.html , style.css and bootstrap.min.css File in assignment folder and for both css haven't separate folder, then bellow code apply
<link href="styles.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
If your index.html , style.css and bootstrap.min.css File in assignment folder and for both css have separate folder which name is css, then bellow code apply
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
I initially was loading a page
somePage
And the index.html would render with styling
<head>
..
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
The above code works fine in production. However someone made some changes and deleted the app folder and refactored the code to this:
somePage
And the index.html to
<head>
..
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
Now index.html cannot find the css styling. I tried different relative and absolute paths but nothing seems to work.
Any help?
EDIT: My folder structure is:
When I load my page localy http://localhost:56071/blabla/en/ and then click to navigate to "somePage" I end up on http://localhost:56071/tos/blabla/en/ a page with text and no styling. However, if I try to navigate to http://localhost:56071/themes/basic_themes/blabla/base_theme/bootstrap.min.css it returns a 404. BUT I can access my .css file through this link http://localhost:56071/blabla/en/themes/basic_themes/blabla/base_theme/bootstrap.min.css Can someone explain whats happening here?
My index.html file is in the public_html directory. All css files/ image files are in a css directory, and images directory respectively.
I have been over and over my code but the index is not linking with anything in hosting.
`
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="main.css"> // ***
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-icon.css">`
*** I moved the main.css file directly into public_html to see if it would work and it does. I can only assume that I have made a mistake in my path.
BTW I have added a / to the css path in href. I don't want to move everything into the public_html folder, which I am taking to be the root
Many thanks
This might be redundant but one possible workaround is to use ./ everywhere. Eg.
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/flexslider.css">
<link rel="stylesheet" href="./css/jquery.fancybox.css">
<link rel="stylesheet" href="./main.css"> // ***
<link rel="stylesheet" href="./css/responsive.css">
<link rel="stylesheet" href="./css/animate.min.css">
<link rel="stylesheet" href="./css/font-icon.css">
It should work.
Assuming the css folder and main.css are the siblings of the HTML file in which this code is inserted .
After building my web site for a while now, I wanted to see if I could upload it to my domain and see if it was functional from the web.
Now I have this error coming from my css files :
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://www.benny-water.com/Mainscss2.css"
I have been googling for 3 hours straight and haven't found a solution. If I understand it is my server (OVH) that is wrongly interpreting the css files as html or text files but I have no idea where to change this.
my code for the css files looks like this :
<head>
<title> Benny Water </title>
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oxygen"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Muli"/>
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio_style_default.css" />
<script type="text/javascript" src="js/Jportfolio/js/jquery-1.11.2.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/bootstrap.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/jportilio.js"/>
<script src="http://code.jquery.com/jquery-latest.min.js"/>
</head>
thank you for your help :)
Looking at your paths there seems to be a mismatch between where your CSS files are located.
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
The /style/Css3.css has a / in front of your path, but the style/Grid.css doesn't.
Your Mainscss2.css link is also closed incorrectly. I would removed </link> and close the tag with /> instead for consistency in your code.
The .css file must go inside the <head> tag, while the .js in the <body> tag. It is a rule but it obviously work anyway also when they all are inside <head> too.
About the path of your .css, are you sure it is correct?
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
there are 3 different paths for 3 .css
Use this scheme:
/var/www/mywebsite/index.php
/var/www/mywebsite/images/favicon.ico
/var/www/mywebsite/style/css/mytheme.css
/var/www/mywebsite/style/css/images/imagesUsedBymytheme.png
/var/www/mywebsite/style/js/myscript.js
of course modify it accordingly, if you are index.php, you would want to link your .css using this code:
<link rel="stylesheet" href="style/css/mytheme.css" type="text/css" >
EDIT:
<link> is a single tag, you can use it as <link rel="" href"" >
I have a very new site I am trying to put together and it seems that my css file isn't being recognized.
The site is http://www.problemio.com and I have in my index.php a direction to pick up the css file like this:
<link rel="stylesheet" type="text/css" href="main.css"/>
and then a header div declaration like this where some of the initial styles are used:
<?php
include("divs/header.php");
?>
I am trying to go through the index.php file with firebug, but not sure how to tell if the css file is being recognized or something else is the problem.
Any ideas how to get the styles recognized?
You have to link to the CSS Reset before you link to your own styles.
The way you set it up now, the CSS Reset is resetting your styles.
Change this:
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
to this:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
Loaded CSS:
grids-min.css
main.css
menusystem.css
reset-min.css
Reset is loading after the others, which nullifies the majority of your settings.
This is probably because of the order you are loading the CSS files. You are loading your "main.css" file first, then the YUI reset CSS, which basically resets whatever your main.css file has set already. Try loading the reset first.
The stylesheet appears to be loading fine. You need to put it after the reset styles though, or the reset will get rid of most of yours.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
If the problem you think you are seeing is related to the sign-in links, note that they are set to color:#fff;, which happens to match the background...
Depending on your browser, Ctrl+Shift+I (Chrome), Ctrl+Alt+I (Safari), F12 (IE9), or Firebug (Firefox) can show you which resources are loaded... You should probably get comfortable with the developer modes for each.