I'm trying to update a website. There's a label element I want to style. It looks like:
#foo {
font-size: 9px;
}
<label id="foo"></label>
but it looks like a css definition for the "label" element is overriding the more specific style I'm setting. I'm seeing this in firebug
label {
font-size: 16px;
}
.foo {
font-size: 9px; /* strikethrough on my font-size declaration here */
}
so is there a way to override the default label font-size setting without modifying it for everything? (I thought my more specific definition would do that by default)
Thanks
You've mixed up the syntax for id with the one for class:
#foo { /* # = id, . = class */
font-size: 9px;
}
Keep in mind that ids are supposed to be unique for the entire document
or switch your label to using a class instead:
<label class="foo"></label>
You could always use the !important indicator to give precedence to the rule.
font-size: 9px !important;
Related
I'm creating a chat widget and I want to overwrite a bunch of CSS. For example if this is the website theme's CSS:
textarea {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea {
padding: 5px;
}
then only my widget's CSS should work. However, it adds both CSSs to textarea by default - how can I prevent the website's CSS from being added?
As Marc B stated, you can put your chat in an iframe, in which case you can have its own completely separate stylesheet.
If you must use it inline, then you can use all css property to unset what has been set elsewhere:
Widget CSS:
textarea {
all: unset;
padding: 5px;
}
Further, as pointed out in comments elsewhere, the best way is to create different classes for text area and use them where necessary, for example:
textarea.main {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea.chat {
padding: 5px;
}
And then use
<textarea class="main">
or
<textarea class="chat">
depending on what you need.
Well I guess it is really easy to write !important to all your css rules. Just replace ";" with "!important" if that's an easy way for you OR if you really want to change then you can use iframe really
I've been fiddling around and trying to figure out how to make the text from within a WordPress menu list bigger and I just can't figure it out.
The URL is here
http://www.playstoresales.com/top-charts/
And I just want the text in the main list(games, top free games, top adventure games, top action games, etc) to be bigger.
I can't seem to find out which CSS class(or whatever) that I should be targeting, and what the syntax for it is.
Depends on the level of control but a nuclear option that would change the font size of every li element that has a CSS class of .menu-item would be:
.menu-item {
font-size: 24px;
}
For a little more control you could target that specific menu with an additional CSS class. I see you already have class (.menu-=top-charts-container) and id (#menu-top-charts) to hook onto.
/* all elements with .menu-item class */
.menu-item {
font-size: 18px;
}
/* only elements with .menu-item within #menu-top-charts element */
#menu-top-charts .menu-item {
font-size: 24px;
}
I believe this should work:
.menu-item.parent > a { font-size: 30px; } /* Or whatever font you want */
That being said, you may want to try tagging all the links that you want to have bigger text with a css class, that way you can target the class instead of adding selectors.
Like this:
.main-link { font-size: 30px; } /* All hyperlinks you want to be bigger can have this class */
Targeting the anchor within the ul ID;
#menu-top-charts a {
font-size: 50px;
}
I'm learning CSS and I have the result I want but only if I use the ! important; specification. I don't understand why I can't override a property inheriting one class and overriding a property.
form button.minor-action,
#profile-left a.action,
.minor-action {
display: inline-block;
background: #lightBlue;
color: white;
padding: 0 1.2em;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
text-decoration: none;
text-align: center;
font-weight: bold;
border: none;
height: 25px;
margin-top:1.0em;
line-height:25px;
white-space: nowrap;
&:visited {
color: white;
}
&:hover, &:active, &:focus {
background-color: darken(#lightBlue, 10%);
text-decoration: none;
}
&.call-to-action {
background-color: #pink;
&:hover, &:active, &:focus {
background-color: darken(#pink, 10%);
text-decoration: none;
}
}
}
.extra-questions {
margin-top: 0em !important;
}
I thought that if I use the above style for a button:
<button id="add_question" class="extra-questions minor-action">{% trans "Lägg till ny" %}</button>
then I wouldn't have to use the ! important; statement and the override would work without it, but it doesn't. What am I missing? can you please help me understand why it doesn't work without the ! important statement, or show me a way do to it without ! important; ?
Its is not entirely correct that it isnt overridden because its set in the class above, in this instance it isnt due to the order of your LESS - it isnt being overridden because you have listed your classes in the wrong order- instead of
extra-questions minor-action
You need to do
minor-action extra-questions
When denoting classes, if they share values for the same property settings- those values for the last class applied will take precedence.
Alternatively, you can add more specificity to your classes, in your LESS, nest extra-questions within minor-action and prefix with &. This will mean the order of classes in your HTML does not matter, the combination does. The output CSS will be:
.minor-action.extra-questions
Also, as I am sure you are aware, using !important should be avoided
Your example works without !important - http://jsfiddle.net/sgguap7v/
It does not work !important without that case -
1. The rule is to follow the class - .extra-questions {} .minor-action {}
2. The rule has a higher weight - button.minor-action {} It has a greater weight than .minor-action {}
The css rule are applied depending on the order you call them, and the more specific they are.
if you have 2 rules defining the margin-top The browser then have to decide which one to apply. To do that it read your css file from top to bottom and calculate the priority of each rules based on the following.
Priority 1: #id (Id are unique selector so very important)
Priority 2: .class (Then the class they are less important than ID but still )
Priority 3: element (Finally generic style that is overridden most of the time, this is your default style)
Each time you add a nested selector it add to the priority as well so:
body.class is more important than .class and body #id is more important than body.class etc...
Finally if the rules ends up with the same priority, the last one is apply.
setting the !important flag in your code is a way to artificially boost the priority to a particular rule. But if you end up having the same rule with !important then the priority rules above will apply.
Override Will Work if You Do
.minor-action{
margin-top: 0em;
}
You didn't apply any styles to .extra-questions but to .minor-action. its true you apply to a same element. but cascade just work like that.
This will help: How to override the properties of a CSS class using another CSS class
And This: http://www.w3.org/TR/CSS2/cascade.html#cascade
Because its already set in the class above .minor-action, if it's set it doesn't override unless you use !important
Your first selector is more specific, it applies to elements that are children of a form, and it just overrides the most general (the second one) which applies to any of your .yourclass regardless of its position in the document hierarchy. you can get rid of the important by selecting form .yourclass instead.
Is possible in LESS make an element inherit only one or more specific properties?
For example (in a stylesheet.less provided from another source so i cannot modify it):
.divheader{
height:50px;
color: red;
line-height: 1.5;
}
In my stylesheet.less:
.mydivheader{
.divheader;
color: black;
}
In this case it would inherit all the properties not overwritten by my class, but i would like to do something like this:
.mydivheader{
.divheader.height; //invented syntax
color: black;
}
so i only inherit the height property of the divheader class...
How can a do something like this?
In CSS, is there a way to use a class as a property? As in the first line below:
h1 { class = big }
.big { font-size: 25px; }
.small { font-size: 10px; }
The goal being to easily change the h1 styling by replacing "big" with "small" in the first line of code.
You can use less, sass, stylus or something similar.
With those you can easily do that.
No is posible H1 => references an html tag