Is there any automated way to get CSS property and value with its selectors from one giant CSS file? For example,
.selector1 {
border-radius: 3px;
color: #000;
text-align: center;
}
.selector2 {
background-color: #000;
padding: 10px 20px;
}
Now I want to extract CSS below from CSS above based on #000 color value.
.selector1 {
color: #000;
}
.selector2 {
background-color: #000;
}
Finding and editing manually in text editor works, but this approach is hard to accomplish after CSS is changed which is changed frequently. So I wonder if there is any automated way to do that.
I thinks this is not possible with css but you can achieve it using JavaScript.
Related
I have the following CSS:
.point.active,
.point:active {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
Example: http://jsfiddle.net/7zmjvaxL/
This is working. But when the element is active and I hover over it, it loses the CSS colors. How I can keep the color if the element is active and if I hover over it?
Thanks.
Bootstrap comes with a number of default settings for certain elements.
In your case it is forcing this rule:
.btn-default.active:hover {
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
Which is overriding your own rule set.
The best bet is to remove the class btn-default, because its not really a default button, its a customised one, and then add CSS rules for your element.
For example, this jsfiddle demo:
.btn-point {
color: #333;
background-color: #fff;
border-color: #ccc;
}
Try this :
.point.active,
.point:active,
.point:active:hover{
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
Do you have .point:hover{} somewhere ?
I'm pretty new to CSS and have been finding my way around so far.
I am creating these button like links with shadows and stuff. Now there are several such buttons required on the site - everything about the buttons is same - except few properties change like width and font size.
Now instead of copying the same code - over and over for each button - is there a way of extending the button and adding just the properties that change.
Example of two buttons - css
.ask-button-display {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
width:350px;
font-size: 20px;
font-weight: bold;
padding:10px;
}
.ask-button-submit {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
font-weight: bold;
width:75px;
font-size: 12px;
padding: 1px;
}
And this is how I'm currently using it in my html
Ask a Question Submit
So I'm wondering if there is a cleaner way to do this - like
.button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}
AND THEN SOMEHOW EXTEND IT LIKE
.button #display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}
.button #ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}
But I'm not sure how to do this.
Thanks for your inputs
You can add multiple classes to one element, so have one .button class which covers everything, then a .button-submit class, which adds things in.
For example:
.button {
padding: 10px;
margin: 10px;
background-color: red;
}
.button-submit {
background-color: green;
}
See a live jsFiddle here
In your case, the following should work:
.button {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
width:350px;
font-size: 20px;
font-weight: bold;
padding:10px;
}
.button-submit {
width:75px;
font-size: 12px;
padding: 1px;
}
See a live jsFiddle here
You might want to try this:
.button {
padding: 10px;
margin: 10px;
background-color: red;
}
.button.submit {
background-color: green;
}
.button.submit:hover {
background-color: #ffff00;
}
This way you avoid repeating the word and will able to use the classes in the elements like this:
Ask a Question
Submit
See the example in JSFiddle (http://goo.gl/6HwroM)
Rather than repeat the common "Add a button class to the element" answer I'm going to show you something new in the weird and whacky world of new age CSS, or better known as SCSS!
This reuse of code in stylesheets can be achieved with something called a 'Mixin'. What this allows us to do is reuse certain styles by using the '#include' attribute.
Let me give you an example.
#mixin button($button-color) {
background: #fff;
margin: 10px;
color: $color;
}
and then whenever we have a button we say
#unique-button {
#include button(#333);
...(additional styles)
}
Read more here: http://sass-lang.com/tutorial.html.
Spread the word!!!
You can do this since you can apply more than one class to an element. Create your master class and and other smaller classes and then just apply them as needed. For example:
Ask a Question Submit
This would apply the button and submit classes you would create while allowing you to also apply those classes separately.
Modify your code example along the lines of:
.master_button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}
AND THEN SOMEHOW EXTEND IT LIKE
.button_display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}
.button_ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}
And apply like:
Ask a Question
Submit
.ask-button-display,
.ask-button-submit {
/* COMMON RULES */
}
.ask-button-display {
}
.ask-button-submit {
}
You may want to look into Sass. With Sass you can basically create variables in your css file and then re-use them over and over. http://sass-lang.com/
The following example was taken from Sass official website:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Add a button class to both links for the common parts
.button {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
}
Keep in your other classes the rules that aren't common.
And your HTML will be
Ask a Question
Submit
Without changing/ adding new classes you can add styles to all elements with a class name starting with "ask-button"... (whatever the elements with the class are; button, anchor, div etc.) let's say your buttons are divs then:
div[class^="ask-button"] {
// common css properties
}
You can also list all classes that will have common properties like this:
.ask-button-display,
.ask-button-submit {
// common css properties here
}
And then you add the separate styling for each button:
.ask-button-display{
// properties only for this button
}
.ask-button-submit {
// properties only for this button
}
I new to CSS/CSS3 and I read in many places different way to build CSS files. Some people all tags in the same elements and some people divide elements and then use different classes in the HTML code.
eg:
// css
h1 { font: normal 20px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
h2 { font: normal 16px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
so in the HTML they just have to put and that's it. If you need to change the border color then you have to change ALL tags that has the border-bottom.
OR
h1 { font: normal 20px Arial; }
h2 { font: normal 16px Arial; }
.colorBlack { color: black; }
.headers { margin: 1em 0; padding:0; }
.borderBottom { border-bottom: solid 0.1em #ddd; }
and in the HTML you use:
<h1 class="black headers borderBottom">h1</h1>
Very easy but everytime you have to put all the CSS you need
Is there any Best Practices on how to build CSS? Which way is better for performance or loading time?
I recommend to use:
h1, h2 {
color: black;
margin: 1em 0;
padding: 0;
border-bottom: solid 0.1em #ddd;
}
h1 {
font: normal 20px Arial;
}
h2 {
font: normal 16px Arial;
}
The best practice: Keep your code readable. Readability is not achieved by separating a style definition in several useless classes.
Usually, you want the h1 and h2 tags to have similar styles. For that reason, I've grouped the styles. When you want another property value for a certain element, you can add another CSS definition. When the selector has a higher specificity, the new declaration will override the previous one(s).
I think both technics are useful. Personally I often put two or more classes when I need to separate one element from another (example last in row element should not contain margin-right) my code looks like:
HTML:
<div class="images-row">
<div class="image-item">...</div>
<div class="image-item">...</div>
<div class="image-item">...</div>
<div class="image-item last-in-row">...</div>
</div>
CSS:
.image-item {
border:1px solid red;
margin-right:20px;
width:200px;
height:200px;
}
.image-item.last-in-row {
margin-right:0;
}
(supported well in IE > 7 and other good browsers). This solution keeps the code quite clean and also makes me write less (I don't need to rewrite all the styles for the last element or add separate selectors). jQuery element handling is less confiusing (I need only one selector to match all .image-items).
If I have two css files:
File 1:
.colorme
{
background-color:Red;
}
File 2:
.colorme
{
background-color:Green;
}
And have included them in a page, which one will take priority? I'm guessing the one that is loaded last? If so is there anyway to ensure which one css file is loaded last?
The one loaded last (or as David points out, more accurately included last) wins in this case. Note that it's per-property though, if you load 2 definitions with different properties, the result will be the combination. If a property is in both the first and second, the last wins on that property.
The only way to ensure which is used last/wins is including the <link> elements in the order you want in the page.
For the property, here's an example:
.class1 { color: red; border: solid 1px blue; padding: 4px; } //First .css
.class1 { color: blue; margin: 2px; } //Second .css
is equivalent to:
.class1 { color: blue; border: solid 1px blue; padding: 4px; margin: 2px; }
I want to style a form in html using CSS. It's a really simple form, so I didn't expect to have any problems with accessing it with CSS selectors. But anyway, when I am trying to add something like:
#maincontent #left_side #comments{
margin: 100px;
}
or
#comments{
margin: 100px;
}
I see no visible effect.
Sorry, I think I am not very descriptive, but not sure how to describe the problem...
Maybe you could take a look at the demo url here:
http://chess-advices.com:8000/article/ololo/
And suggest how to fix my CSS, to pretify the form? (Well I actually just need to access it first)
Thanks in advance
You forgot to close this:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
change this to:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
}
To find this: Line 267 in your style.css or you can use strg/cmd + f to find it...
But i think, if you add something like this:
form label { width: 100px; display: block; float: left; }
form p { padding: 5px 0px 0px 0px; }
your form would look nicer :)
I hope this is the answer of your question...
There is an error earlier in the css file that causes this. There is no closing bracket on the style div.pagination span.disabled style, that makes the browser skip the rest of the css file.
Note: as an id is unique in a page, you only need #comments to target the element. The only reason to use #maincontent #left_side #comments would be if you need to make it more specific to override some other style, or if you use the style sheet for several pages and there can be other elements with the id comments that you don't want to target.