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.
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.
For the purpose of this demo, I'll use a StackOverflow element for credibility.
If you sign out of SO, you can see a large call to action box at the top of the page. Even easier, just go to their new Portuguese version here - https://pt.stackoverflow.com/
Once you see the call to action box (captured below) go ahead and inspect it with developer tools.
On the div with the ID of hero-content, you will notice a style that I have pasted below:
#herobox #hero-content {
background: #fff7d8;
border: none;
}
I have done some research and as we all know, div ID's should be unique to the page. Although, if they are unique, why would a selector need to state an ID within an ID?
There are a couple of reasons.
Stylesheets can be reused between HTML documents. You may wish to distinguish between #hero-content that is a descendant of #herobox one page and of #somethingelse on another page.
The more likely one in this case is specificity. Assuming, for example, that #hero-content is a <div>, a general rule to set the styling of #herobox div would be more specific that #herobox #hero-content. Adding an extra id selector would increase the specificity.
It might be simply to increase the specificity of that selector.
For example, the author may have wanted to override...
#hero-content { border: 2px solid #333; }
It could also be a side effect of a tool like LESS, where the author may have originally written...
#herobox {
// Lots of other CSS.
#hero-content {
// ...
}
// Lots of other CSS.
}
I am coding a .psd image to html. But i confused with the best practise to do so. i.e
for styling a achor like a button i use following style attributes
.button {
padding: 10px;
display: inline-block;
text-decoration: none;
background-color: #3f4551;
color: white;
background-image: url("../images/icons/icon_left.png") no-repeat 10px center;
}
now i can use the to get the desired result.
However i have lots of anchor which have same styling as before only with minor changes like icon on right side instead of left and different color,gradient etc.. so i decided to break it in multiple class i.e
.button{
padding: 10px;
display: inline-block;
text-decoration: none;
background-repeat: no-repeat;
}
.icon_left{
background-position: 10px center;
}
.color_blue{
color:blue;
}
now i can use these classes to style i.e <a href="#" class="button icon_left color_blue></a>"
But in this way the markup is getting more and more clumsy and weird.So i decided to ask for which is the best practice ??? THANKS in Advance :)
That's a good start and you are going in the right direction.
Some further hints though, considering best practice:
Use descriptive names which are not explicitly telling their value. For example, do not use color_blue as class name because the color could change if you redesign your application. Better are names that reflect the purpose of that element, like default-action, disabled or emphasized. In the same manner, with-icon would be a better class name than icon_left. Names are about semantics, and not the visual representation.
Use specific selectors if applicable. For example, if the button classes are used by button elements use selectors like button.emphasized. That let's you reuse that class name for other types of elements (i.e. div.emphasized), so that you do not have to rename them into .button-emphasized and .block-emphasized.
If you know more about the structure of your document, you could even distinguish between #content > button.emphasized and #sidebar > button.emphasized and use different button classes depending on the element hierarchy.
Use selector inheritance if applicable. If a class shares the same property-value pairs amongst others that differ, you should use inheritance. For example .emphasized for rules that apply to all elements using this class, and button.emphasized & div.emphasized for specific rules, which can overwrite the more general ("parent") selector.
Apply naming conventions. Usually, the names are lowercase and the minus sign is prefered instead of using the underscore. Therefore, with-icon is better than with_icon. You can also use uppercase letters like so: withIcon. Personally i prefer the first version.
If I understand correctly ..Your on the right path! I know it looks like your source code is too stuffed but that's the way it works.Remember that classes are used for styling more than one element, and Id (if used in the proper way) are used to style a single entity/element
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.
I'm interested in building a menu bar that's backwardly compatible. I'd like to use just HTML and CSS. So I'm thinking a table with a number of cells each set with a different bkgnd color dependent on it's state. Something along the lines of ....
a:link {
.cell01{background-color:#white};
.cell02{background-color:#white};
}
a:hover {
.cell01{background-color:#red};
.cell02{background-color:#blue};
}
(I'm thinking something like this as I want to whole of the cell, not just the text in the cell to be effected). Obviously this example does not work ... but is there a way??
Thanks in advance
Giles
You probably shouldn't think of a table anyway. You can easily style a UL to have the appearance of navigation and this is much more semantically correct.
Anyway - from the CSS above I guess you have a table inside you link? If so then the correct syntax would be:
a:link .cell01 { background-color: #fff; }
a:hover .cell01 { background-color: #f00; }
etc etc
(if you want to use color names then you don't use the # symbol. If you are using hex values then use the # as I did above).
Or do you have links within the cells? In that case you would switch the items around e.g.
.cell01 a:link {background-color: white; }
Hope it helps!
Update:
Ahh - Steve's answer above gives me a slightly better idea of what you are trying to do... You have the links within the table cell and you want the whole cell to change when it is hovered over? Then simply:
.cell01 { background-color: #fff; }
.cell02:hover { background-color: #f00; }
Note that this won't work correctly on IE6 as in IE6 only A elements have hover state. You can work around this by adding an additional class in Javascript if necessary...
First: don't use tables for layout, or navigation. There is no need for that. UL usually is the best choice for the task.
Second: make your a elements block level and some padding and style as you wish: http://kod.as/lab/nav/
See http://css.maxdesign.com.au/listamatic/ to learn more.
If you want to affect the whole of the cell, you need to apply the css to the parent. Then, the child <a> tags can act separately. Something like this:
parentCell { background:white; }
parent1:hover { background:red }
parent2:hover { background:blue }
parent1:hover a { font-weight:bold }
parent2:hover a { font-style:italic }
I am assuming your HTML looks like this:
<table>
<td class="cell1">
Link
</td>
<td class="cell2">
Link
</td>
</table>
If this is the case, what you are asking is not possible using HTML and CSS alone. CSS doesn't allow you to target the parents of a selector in any way. JQuery can do what you are asking using .parent()