If I write this in my external css file it does make 'a' text green.
.ink-navigation ul.menu.black li ul.submenu li a {
color: green;
}
but this works
<nav class="ink-navigation">
<ul class="menu black">
<li>
<ul class="submenu">
<li>
This is a text
</li>
</ul>
</li>
</ul>
</nav>
Does anybody knows why the external css does not work?
CSS executes in order; therefore rules at the bottom of your CSS are given higher priority and override any prior rules. Also, inline CSS executes after the stylesheet and since it is seen last, it takes priority.
A simple fix would be to add important to the colour... e.g:
color: green!important;
On a side note, I highly recommend that you reduce your code by removing unnecessary bloat which actually contributes to such problems as this. If .ink-navigation is unique you don't need to use your current format. Use .ink-navigation ul li ul li a {} or even .ink-navigation .submenu a {}. However, if you have existing rules with the larger format then that will override the shorter format, so its important to address all occurrences if you want to shorten your code.
Most likely your external CSS is not linked to correctly in your HTML.
Example of how to link a CSS file that's in the same folder as your HTML:
<link href="./main.css" rel="stylesheet">
Also, just a tip - it's usually clearer code to understand and debug if you just put an id or class (i.e. id="green-title") as an attribute for your tag.
#green-title {
color: green;
}
In the head tag ,first Place bootstrap file on the top, then css file below. with this you don't want to use !important in every style code.
Where have you attached your css external files?
You should have something like this in your header
<link rel="stylesheet" type="text/css" href="CSS/cssFile.css">
Related
I am trying to change the position of a side panel that comes up when an option is being hovered over. Here is the code from chrome developer tools:
<nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show">
<ul data-template= "nav-template" class= "sidebar-bg-color ps-ready ps-container" data-blind= "source: nodes">
<li class= "nav_trigger nav_open">
<div class= "sub_panel" style= "left: 50px;"> == $0
</div>
</li>
</ul>
</nav>
I just need to change that style left : 50px to 76px. The developer tools just have this attribute saved under element.style which I can't really target in my CSS file. Any help is appreciated!
I have tried to target by being really specific and ended up targeting the main panel and not the sup panel. Here is the code that I tried:
nav #side_nav, ul.sidebar-bg-color ps-ready ps-container, li.nav_trigger nav_open, div.sub_panel{
left : 76px;
},
Your CSS selector should be as shown below (according to the HTML you posted). Look at every detail: I deleted all commas and a few spaces. If an element has more than one class, you address it like div.class1.class2 (no spaces, but with a dot between the class names). Commas are used to list separate selectors for the same rule, not to indicate child elements as you did. To select an element which has as ID, you directly attach the ID to the element (Not nav #side_nav, but nav#side_nav).
nav#side_nav ul.sidebar-bg-color.ps-ready.ps-container li.nav_trigger.nav_open, div.sub_panel {
left : 76px;
}
If necessary, add !important after 76px (but before the semicolon).
You can use the syntax !important so then it will override all other formating of the type that you use the !important on. Learn more here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#!important
You can also use the span element in the HTML to make it even more specific with the CSS.
I am using a nav tag in index page and also want to use that in second page but I want to remain just one same css file. Now the problem is that if I will change .nav styling in css file for second page then it will be change in index page.
Should I make separate css files for every page or is there any other solution as well?
I tried to give id to nav in second html page to make it different in the css file but it is not making changing in second page nav.
   
one
two
three
It should be change in the second page.
You can add a class to your element and reference that particular class. For example:
<nav class="nav-style-1">...</nav>
<nav class="nav-style-2">...</nav>
.nav-style-1 { your styles ... }
.nav-style-2 { your styles ... }
Hope that helped!
My recommendation is, if you want to continue with same CSS file, you can add id property to each navbar and use id to give them specific CSS attributes.
People doing wordpress themes have the same requirement as you. Their solution is to add an id tag to the body element.
Their CSS rules look something like ...
#page1 .nav {
... your nav css rules for page 1 ...
}
#page2 .page2 {
... add a style to all items on page two with the class of page2.
}
#page3 .page3 {
... custom style that appears only on page3 ...
}
The HTML
<body id="page1">
<!-- menu -->
<ul class="menu">
<li class="homepage">
<li class="page1">
<li class="page2">
<li class="page3">
</ul>
Rule [#page1 .page1] only has an effect when .page1 is a and element in #page1 which only happens on page1. So I can highlight the menu item that corresponds to the page which is loaded.
I'm using bootstrap for a navbar that I like and I use the style.css from bootstrap, but I also want to implement some elements from another framework that has its own style.css. The problem is that the elements appears distorted because the second style rewrites the first.
Is there a way to specify the influence of a style.css?
For example, style_1.css to have influence over:
<header>...</header>
and style_2.css to have influence over:
<main>...</main>
It is not possible to do it directly using those CSS files that are distributed, but you can create namespaces for each CSS framework library (or CSS file) and use that wherever you want to use that framework features.
See How to namespace Twitter Bootstrap so styles don't conflict and Is there any ready to use Bootstrap css file with prefix for more details on how to namespace your style-sheets.
If you're using less, then you can create a namespace by adding a pregfix to bootstrap like this:
.bootstrap-styles {
#import 'bootstrap';
}
/* OR */
.bootstrap-styles {
#import (less) url("bootstrap.css");
}
You can use http://www.css-prefix.com/ to prefix any CSS file and then use it like this:
<header class="bootstrap-ns-prefix> (some bootstrap code inside) </header>
<main class="style2-ns-prefix"> (some other framework/css styles that don't get affected by bootstrap) </main>
EDIT
It does not work automatically, you have to namespace each of your CSS and then use those CSS files instead of the initials. The generator www.css-prefix.com works for me, but it adds some extra classes/namespaces at the beginning/end and before/after each comment; you should check that and correct/delete any errors before you proceed. As I mentioned above, you can use LESS or SASS frameworks to generate those namespaces.
Here is an example of using both Bootstrap and jQuery UI together:
<head>
...
<link rel="stylesheet" href="css/bootstrap_ns.css">
<link rel="stylesheet" href="css/jqueryui_ns.css">
...
</head>
<body>
<button class="btn btn-primary">Test Button</button>
<div class="bootstrap-ns">
<button class="btn btn-primary">Bootstrap Button</button>
</div>
<div class="jqui-ns">
<button id="jqbtn" class="btn btn-primary">jQuery UI Button</button>
</div>
<script type="text/javascript">
jQuery(function($) {
$('#jqbtn').button();
});
</script>
</body>
And the result is this one:
As you can see, all three buttons have the bootstrap button classes btn btn-primary but only the button inside bootstrap-ns container uses the bootstrap styles.
Here you can see a demo page: http://zikro.gr/dbg/html/bootstrap-ns/
Here you can check bootstrap.css and jquery.ui.css generated by www.css-prefix.com and manual cleaned.
I had the same problem and I resolved it like this:
copy the CSS rules you want to use in a specific region.
convert them to SCSS by pasting them in this link: css2scss and then
Click on the arrow (choose SCSS).
copy the SCSS rules result you got, and paste them in this link: scss2css.
wrap the entire SCSS rules with this rule: .wrapper {}
like this:
.wrapper {
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
/*all other rules*/
}
click on the 'compile' button and wait until you will get all your CSS.
the above SCSS will result like this:
.wrapper a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
and so All your other CSS rules will be prefixed with the .wrapper class.
Click download button to download your CSS, and then link it to your HTML
page.
to use this CSS only in certain regions warp that region with a div
and give this div a class "wrapper".
<div class = "wrapper">
<a class = "a_Class_From_The_Downloaded_CSS_File"/>
<!-- put here all other HTML tags you want
and add all the class etc. you want from the
CSS file you created.
it will not collide with other CSS class from other
CSS files because of the div.wrapper tag
-->
</div>
Generally not. However you could use the > selector everywhere:
#divtoApplyTo > a {
color: green;
}
So that just all links in that specific div get changed.
This is not possible. Stylesheets are applied to the whole document and not to subsections of it. Whether an element is affected by the rules is then subject to the used selectors. Following of that, when you want a rule to only apply to elements within <header>, they must begin with header > or header (space).
However, from your comments it follows that rewriting all rules is not an option since it's too many. A solution might be to use a preprocessor like SASS.
Example:
Input (SASS)
header > {
div {
color: red;
}
button {
border: 1px solid hotpink;
}
}
Output (CSS)
header > div {
color: red;
}
header > button {
border: 1px solid hotpink;
}
The idea would be to wrap all rules that should only be valid for <header> into an appropriate block and let SASS rewrite the rules for you.
However, this leads to blowing up the overall file size. Also, one should not forget that frameworks also include global rules. Since something like header > html or header > body is bogus, this solution might still require doing manual changes.
Haven't tried it, but found this: The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is: Applying CSS styles only to certain elements
Concatenate the two Bootstrap files (bootstrap.css and
bootstrap-responsive.css) into bootstrap-all.css.
Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
Append bootstrap-all.css to bootstrap-all.scss.
Close the div.bootstrap selector by appending } to bootstrap-all.scss.
Run SASS on bootstrap-all.scss to produce a final CSS file.
Run YUI Compressor on the final file to produce a minimised version.
Add minimised version to head element and wrap everything I want the
styles to apply to in <div class="bootstrap"></div>.
I have new to CSS / HTML , sorry to ask such question .
I want to have a CSS / HTML code to make the word "testing" do not have underline , but I still find the underline on the web page , would advise how to change it to make it work ?
<a style="a:link {text-decoration:none;}" href="http://example.com" >testing</a>
you need to change this
<a style="a:link {text-decoration:none;}" href="http://example.com" >testing</a>
to this
<a style="text-decoration:none;" href="http://example.com" >testing</a>
check this fiddle
http://jsfiddle.net/K6CdG/
If you add a style property to an HTML object, you don't have to add the CSS Selector. The style property in an HTML object only works for that particular object.
So in your case you only have to add style="text-decoration:none;" into the HTML object.
However, if you don't want text-decoration in every <a> objects on the page, you have to add the CSS within the <style> tags in the <head> tags.
<style>
a {
text-decoration:none;
}
</style>
You could also link to an external CSS page. Most people prefer this to keep their document structured. To achieve this you have to add the following code in the <head> tags:
<link rel="stylesheet" type="text/css" href="style.css">
Change href=style.css to the file name of your CSS file (.css file extension included).
You can do it in this way as well if you want to change it just only for this anchor tag.
<a class="myUndecoratedLink" href="http://example.com" >testing</a>
Define below style either in a external CSS file or in your HTML.
.myUndecoratedLink,.myUndecoratedLink:HOVER {
text-decoration: none;
}
Try to define style in external file instead of inline styling as you are doing to make it more manageable.
In this way you can benefit of Themes be creating different CSS files one for each theme.
For more info have a look at below post:
The 3 ways to insert CSS into your web pages
CSS How To...
I'm currently developing a website in Drupal and I'm trying to put a custom twitter block. Here's my HTML code:
<ul id="twitter_update_list" class="twitter"><li>Twitter feed loading</li></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/terryamorin.json?callback=twitterCallback2&count=5"></script>
And here is the relevant custom CSS:
#twitter_update_list a {
color: #CA0A6C;
}
Now for some reason the code won't update properly or will only work for one link and not all of them. I checked with firebug and if I choose the element and disable/re-enable the font-size in here:
element.style {
font-size: 85%;
}
then it shows properly for that one link. Why is this happening? Am I not overriding the right properties?
UPDATED:
<div class="content">
<ul id="twitter_update_list" class="twitter">
<li><span>Vote for Cooper in the Fido Casting Call once a day every day! We could have our own UOGC puppy in a commercial !! http://t.co/bDwdKlQ6</span> <a style="font-size:85%" href="http://twitter.com/UOGreekCouncil/statuses/237535525911793664">about 15 hours ago</a></li></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/uogreekcouncil.json?callback=twitterCallback2&count=1"></script></div>
FIXED:
I used the following CSS instead and it seemed to work:
#twitter_update_list a{
color: #CA0A6C;
}
This is simply a case of your attribute selector not actually matching. The attribute getting set on the actual element is style="font-size:85%", while the attribute you're searching for in your CSS is style="font-size: 85%;" (notice the extra space and the addition of a semicolon). The text must match perfectly.
You could change the selector to look for the actual style property being set:
#twitter_update_list a[style="font-size:85%"]
See the jsFiddle.
Additionally, since those links appear to be the only ones using inline styles, you could just look for the presence of the style attribute, like so:
#twitter_update_list a[style]
Since you're using an external JavaScript file to create this HTML, modifying it to use classes instead probably isn't an option, although that's what I'd ultimately recommend. Looking for specific styles may work for now, but if the JavaScript ever changes and the structure isn't exactly the same, it will instantly break your CSS.