I'd like to use the same color as the H2 element for some text in a JSP page. But there are 7 style sheets included in the page, as can be seen from view source:
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/css/menu.css"/>
<link rel="stylesheet" type="text/css" href="/css/lib/jqModal.css"/>
<link rel="stylesheet" type="text/css" href="/css/en-US/localized.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui-theme.css" />
How do I determine which style sheet is used for the H2 element?
As the name says, CSS - Cascades. So wherever the h2 is defined, the browser fetches the rule and applies it to the page. So, let's say we have included a few style-sheets, like how I have done in my application Soceall, which has a lot of plugins CSS than my own.
If you see in the Chrome's Dev Tools Inspector, you could find all the cascading rules for, say, I picked a <h4> here:
It gets from three style-sheets and the line numbers are also displayed:
<link rel="stylesheet" href="/css/fonts.css" />
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.standalone.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.1.1/css/bootstrap-colorpicker.min.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/formvalidation/formvalidation/master/dist/css/formValidation.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.8.0/css/bootstrap-markdown.min.css" />
So, here:
Clicking on the link, which says, style.css:277 will take you to the declaration on style-sheet as well. You can also edit the file and see the changes lively.
Related
I'm using kalendae calendar in my site.When there are no other stylsheets other than kalendae's stylesheet and script src then it works properly.But when i add all of them then it behave abnormally.I also tried removing all the links one by one to see what is causing the problem but could not figure it out.It only works normally when i remove all the stylesheets and script src.Here are the two images that will make my question clear.
When i remove all stylesheets and script src
After adding them
And here are the stylesheets and script src.I'm really sorry for using so many bootstrap link but some were not doing the tasks i wanted so i added so many of them.
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="js/wheelnav.min.js"></script>
<script src="js/wheelnav.js"></script>
<script src="js/raphael.icons.min.js"></script>
<script src="js/raphael.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/Livie_ccs1.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
Please help.
Here is the code for kalendae
<html>
<head>
<title>JavaScript calendar</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
</head>
<body>
<div class="auto-kal" ></div>
</body>
</html>
Here is the fiddle link. https://fiddle.jshell.net/qyf96yrk/.
The Kalandae is not appearing on the fiddle though i have added the link.Also the src code is very long.That is the reason why i was not adding my code.Sorry for the onconvenience
Where am I going wrong please guys, tried a lot of variations from various sources, but to no avail - Here is the code, I hope you can help as going slightly bonkers - thanks in advance guys...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="shortcut icon" href="assets/img/favicon.ico">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.jpg">
<link rel="apple-touch-icon" sizes="72x72" href="assets/img/apple-touch-icon-72x72.jpg">
<link rel="apple-touch-icon" sizes="114x114" href="assets/img/apple-touch-icon-114x114.jpg">
<link rel="stylesheet" type="text/css" href="assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
First: I would try adding an additional forward-slash before your CSS paths, e.g.
<link rel="stylesheet" type="text/css" href="/assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
If that doesn't work, then try testing the absolute paths in place of the relative ones, e.g.
<link rel="stylesheet" type="text/css" href="http://www.daveswebsite.com/assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="http://www.daveswebsite.com/assets/css/style.css" />
If the latter still doesn't work, then there could be a problem with the formatting of your CSS file(s).
I have my main.jsp page wich contains this code:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<script src="/targets/js/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/targets/jsp/uploadify.css">
<link rel="stylesheet" type="text/css" href="/targets/css/cssPicker.css">
<!-- ko template: { name: showView } --><!-- /ko -->
It is initializing some components as scripts and css. I'm calling cssPicker.css which contains the below code:
<!--[if IE]><!-->
<link rel="stylesheet" type="text/css" href="/targets/jsp/targetsMSIE.css">
<!--[endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/targets/css/targets.css">
<!--<![endif]-->
But the style is not applying.
I have never played with css before and I'm pretty sure that the way I'm trying to call the sheet is incorrect. Please give me an advice on how to call correctly the sheet when someone is using IE and when someone is using another browser.
All versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
All browsers except IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
All browsers.
<link rel="stylesheet" type="text/css" href="/targets/css/targets.css">
Conditional Stylesheets should help you to understand better.
I doubt you are not referring CSS locations properly "/targets/jsp/targetsMSIE.css" should this be "/targets/css/targetsMSIE.css"
I am experiencing a strange issue while trying to print in Internet Explorer. I have only tested with IE8.
My stylesheets with media="screen" are being applied even when printing. My page prints properly in Firefox/Chrome.
My head element:
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link type="text/css" rel="stylesheet" href="/styles/reset.css" media="all" />
<link type="text/css" rel="stylesheet" href="/styles/global.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/site.css" media="screen" />
<link type="text/css" rel="Stylesheet" href="/styles/jquery.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/forms.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/print.css" media="print" />
<script src="/scripts/jquery-1.4.4.min.js"></script>
<script src="/scripts/jquery-ui-1.8.8.custom.min.js"></script>
<script src="/scripts/modernizr-1.6.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/scripts/selectivizr-1.0.1.min.js"></script>
<![endif]-->
<script src="/scripts/colorbox/jquery.colorbox-min.js"></script>
<script src="/scripts/global.js"></script>
<script src="/scripts/site.js"></script>
</head>
I have tried searching, and I have not been able to find any related issues. Any help is greatly appreciated.
Can you provide us a link?
This might be a probable solution.
Try switching your print stylesheets' rel value to rel="alternate"
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<link rel="StyleSheet" href="style.css" />
while using this, the content in IE is also affected by style.css and ie.css, i'm not sure how to go about fixing this.
It is supposed to be.
You have some HTML which is only for IE, and some that it for general use.
The usually approach is to:
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
And have ie.css contain a tiny amount of CSS to fix things that break with the general stylesheet.
If you really want to have completely separate stylesheets then:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->