I'm trying to catch all the elements of my website in one css declaration. It's a Drupal websites with a billion p's, a's, li's, ul's, strong's, all kinds of div's,...
So, pretty easy I thought and I added this in my css:
body.i18n-zh-hans {
color: red;
}
But for some freakishly reason, the site doesn't move a muscle.
What's the proper declaration to catch ALL the text in just 1 CSS declaration?
Worst case scenario, I would have to declare everything on its own no? Like:
body.i18n-zh-hans, #main p strong a li ul {
color: red;
}
UPDATE
So, Basically, I just want to override all, in this example, the colors of the font in the whole website!
Thanks in advance
You'd want to make that declaration !important, so it'd override any more "specific" styles specified elsewhere in your CSS. Remember that CSS has precedence rules, and "more specific" matches will have higher priority than "less specific" ones.
body.i18n-zh-hans {
color: red !important;
}
* {
your style..
}
and you got to be the last rule in the list..
and there might be some inline styles, those will override..
tested it a bit out and figured out that everything you define in it needs !important..
Here you go:
If body is the biggest box in the box model. Get it? You want to target the big container. Try firebug. It's a great tool. You can even edit the css on the browser to instantly change the website (not permanent though).
body {
color: red !important;
}
This was the one and only solution!
.i18n-zh-hans * {
font-size: 99% !important;
}
Thanks to everyone who participated this discussion.
Related
I'm new in CSS and I have a question about blocks (actually I don't know how do we name the 'blocks' like #my-id{color: yellow} so if you can also answer that it would be great)
So, I wanted to know if it was possible to specifie how will type of a class comport, it would look like this:
.my-class{
h1{
color: yellow;
}
p{
color: blue;
}
}
I hope you understood what I want to explain, so please answer my two questions!!!
Technically, yes, but not when both blocks are rule sets. (e.g. you can put a rule set inside a media query).
Some other languages, such as SCSS, which can be transpiled to CSS, allow you to do that, but in CSS it is just invalid.
I use the same 3-4 colors on 99% of the elements on my website. I know of absolutely no way this is possible, but I'd thought I would ask.
Is there any way to specify a color and quickly reference it within other elements further down the page? For example:
.red_color {
color: #FF0000;
}
Now, further down the page we have other elements:
div.example {
padding: 10px;
color: [REFERENCE ABOVE]
}
This way, if the color ever changes, I can update it in one place and all the other elements will follow suit.
I know it is possible if I list all the elements in one place, like:
div.example, div.other_example, p {
color: #FF0000;
}
But this way, every time I add another element to the stylesheet, I have to remember to add it to this list.
Any other ways of doing this?
Thanks.
Yes, but not in CSS. Look at using LESS or SASS. Then you can define variables and use them as you're suggesting.
So this is a strange bug I cant seem to figure out.
Im using Meyers reset in my app. But when I edit my main css file to change the h1 font size, it will not change it. But when I put it in the body tag it works. Could anyone explain this to me?
Example
base.css.scss
h1 {
font-size: 2em; //--This doesnt work
}
body {
width: 100%;
height: 100%;
h1 {
font-size: 2em; //-- This works
}
}
Make sure to include the reset file before your base.css.scss file. Looks like it overwrites the h1 rule.
There are three possible causes to this issue. First, make sure you are not trying to use SASS in the browser. It will need to be fully converted to plain CSS before you can use it there. Second, make sure the selector you're using has a higher specificity. That is, make sure the selector is more specific than another selector setting the property. body h1 has a higher specificity than just h1. Though, in Meyer's reset, that shouldn't be a problem. Third is order. If two selectors have the same level of specificity, the one that comes later gets priority. Make sure your reset comes before any other CSS on your page.
you've redefined, so the second assignment of H1 does not work, although you can use! important but I'd better not
Because the second one has a more specificity than the first one: in this case body h1 has more power than h1
The issue you are having is two-fold. There is a specificity issue as well as a cascading issue. You aren't going to be able to override a style before it is declared without using and !important. So your override should be after the reset.
You will also want to match the selector you are trying to override. So if your reset is targeting the element with the body and h1 selectors, do the same to override the styles.
body h1 { font-size: 2em; }
I'm trying to tidy all my css code on my site, I want to be able to be specific with the type. Let's say the type will be 20px, bold and blue e.g.
<h1 bold blue>Hello world</h1 blue bold>
So the css file will have:
h1 {
font-size:20px;
}
bold {
font-weight:bold:
}
blue {
color:blue;
}
Then as I go through my design process i can mix and match with colors and sizes etc. Is something like this possible?
this isn't possible exaclty like you want to, but what you can do is this:
<h1 bold blue>Hello world</h1 blue bold> // your idea
<h1 class="bold blue">Hello world</h1> // correct html, even slightly shorter
and
h1 {
font-size:20px;
}
.bold { // added . for being a class
font-weight:bold:
}
.blue { // added . for being a class
color:blue;
}
css-variables itself are possible when using something like lesscss, but this works in another way than the one you mentioned and your html-markup still has to be valid.
EDIT:
please note that, as edem (and others) said, using blue and bold as classnames in a real project isn't a good idea. i assumed you just gave this as short examples to ask for how to combine different "sets of css-rules" (read: classes). if thats not the case: stick to edems or tims explanation and take a look at guides for "semantical markup".
Colors rarely make good identifiers. Suppose "blue" is no longer blue? Maybe you want it to be red instead?
Font-weights ("bold" in your example) also are not good identifiers. Perhaps in the future you may prefer a font which looks better with a normal font-weight.
Determine the purpose of the style (e.g. article byline, or picture caption) and/or the semantic purpose of the element to which it is being applied, and name your styles accordingly.
You can then use a combination of classes (as others have mentioned) to achieve your desired goal.
This is against good practices. Let's say you have an article header type which can be found on any article page and a main header which is on every page:
.mainHeader {
font-size:20px;
font-weight:bold:
color:blue;
}
.articleHeader {
font-size:15px;
font-weight:bold:
color:red;
}
What if some day you decide that your article header won't be blue any more. If you change
.blue {
color:blue;
}
to
.blue {
color:red;
}
that wont'be good. You should name your classes/ids according to their semantical purpose.
The point is that CSS supposed to be succint so you can change the looks of your whole page with modification in 1-2 lines. The idea you present here is not succint therefore not considered a good practice.
I think you should use less css as the answer suggested above. By the way if you use some scripting language on your webpage like python or php you can use a template engine which supports inheritance and you can generate your own css code and you can use variables there. This simply does not fit in CSS alone.
Yes. Use classes.
<h1 class"bold blue">Hello world</h1>
h1 {font-size:20px;}
.bold {
font-weight:bold:
}
.blue {
color:blue;
}
I have a css-problem I really don't seem to understand :) I have been styling css for three years now, but I've never had this problem.
I have declared some styles in my css-file that should apply for the content of my page. This is generally the right css, but there are some exceptions, like the page_child_title. I was under the impression that if I declared a style further in my css for specific classes, these would override earlier css-declarations. well now, in this case, it is not true. When I inspect with firebug, it seems that my browser really wants to use the font-size-css of ".page a" instead of using the ".page_child_title" (and I for one do not agree with my browser). The color of ".page_child_title" is applied correctly however. Below you can find the Html and css I'm talking about.
Html
<div id="page" class="page Jobs">
<div class="page_child">
<a class="page_child_title" ...
Style.css
.page p, .page ul, .page a {
font-size: 10px;
text-align: justify;
}
style.css (line 208)
.page_child_title {
color: #006633;
font-size: 12px;
}
style.css (line 262)
I have already tried replacing ".page_child_title" with ".Jobs a" but this didn't work. Then I tried declaring ".page_child_title" before ".page a", same result, so now I'm kind of stuck. Does anyone know what could be causing this problem?
.page a is a more specific selector. Therefore its settings will be used.
This phenomenon is called css specificity:
http://css-tricks.com/855-specifics-on-css-specificity/
a.page_child_title { ... } would work.
It would seem to me that selecting an element by its type rather than classname would be more specific.
Try changing .page_child_title to a.page_child_title
Example.
There are two solutions,
http://jsfiddle.net/ErsS4/
Change page_child_title to
a.page_child_title
Or
http://jsfiddle.net/m5V8f/
This meathod is a direct statment to the element.
Hope this helps!
An easy fix should be to change your style to
a.page_child_title
I believe it has something to do with the hierarchy of css and declaring the style of a itself.