I want to define some basic styles that I can combine. Let's say I have a stylesheet that contains the following lines:
.whitebackground {background-color: #ffffff}
.borderblue {border: solid 1px #0000aa}
I'm wondering if there is there a way to include these lines into a new line? Something like:
**div.main {.whitebackground; .borderblue}**
The result must be the same as it would be with this line:
div.main {background-color: #ffffff; border: solid 1px #0000aa}
You are looking for SASS or LESS library.
They will allow you to include style declaration from one selector to the other.
Using LESS, you syntax will be perfectly valid and work as you want
div.main {
.whitebackground;
.borderblue;
}
But, when they are compiled, it will take the optimized form automatically.
With standard CSS, you can't. However, you can give your div multiple classes.
<div class="whitebackground borderblue">
This will apply both sets of css to the div.
By the way, if I were in a pedantic mood, I'd say that names like "whitebackground" and "borderblue" are not very good class names. With classes like that, you could just as well use inline styles. Class names are supposed to convey meaning, intention, structure, emphasis etc. Use names like "special-remark", "important", "sidenote", "highlight" or whatever reason you have for giving your div a white background and blue border.
Related
I'm seeing this "div#container" syntax being used in CSS and I'm wondering how it works. Anybody has a resource for it?
As well as being a unique reference as mentioned above, IDs increase specificity (I highly recommend you read this article or one similar http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, understanding specificity in css will make your life easier).
Ill try to explain with a short example - take the following:
div#item { background: blue}
<div id="item" class="item">Hello world</div>
This says make any divs with the ID 'container' blue, but if you then add the following styles after it in your stylesheet
#item {background: purple}
.item {background: green}
the assumption is that the container would be green because stylesheets are cascading and the class with green background comes last. However this isn't the case, an ID has greater precedence and will override a class even if the class comes later. Additionally the item would not be purple because you have added the div before the id earlier on. Having the div and the id increases the specificity further.
People often specify items in css like this: div#container to add extra importance to the style or to specifically state that only DIVS with the id container can be blue.
I would recommend not doing this it becomes harder to override and the style then be comes unusable if you want to make something else have the background blue. So for example the following would not make the paragraph blue because the style specifically states divs.
div#item {background: blue;}
<p id="item">Hello world</p>
If you wanted to override the div#item to be pink instead of blue you might have to do something like the following.
div#item.item {background: pink}
This doesn't seem that bad but when you start building complex websites this can make your css really clunky.
My advice is to make your css as re-usable as possible e.g. the following can be easily overwritten and reused on any tag.
.item { background: blue;}
Hope that helps! Seriously read up on css specificity, it will really help you out.
From the CSS standard itself, a chart of selector syntaxes.
The one you're looking for is near the end:
E#myid Matches any E element with ID equal to "myid".
In other words, that selector will match <div id="container">.
Of course, id values must be unique, so you shouldn't need to specify an element name. You could use *#container or just #container, and many people do. Putting the element name in explicitly might be considered more self-documenting.
http://www.w3schools.com/css/css_selectors.asp
Try to look at this . This will teach you, how this works.
#abc {
text-align: center;
color: blue; }
now anywhere you use #abc text will be aligned center and text color will be blue.
You can also customize it as per your needs.
I am using input-group input-group-lg classes to add styles to textarea.
The border is not being applied to the textarea.
Default value for the border is 0.
in bootstrap.css if we modify
.input-group .form-control:first-child{
border:1;
}
Then i am getting border. How can i apply this style to my_styles.css which is in my project.
I pasted above selector in my css file and used !important also and not getting border.
Thanks in advance.
You defined border: 1, what 1? One apple, one meter, one pixel?
Complete border definition is border: 1px solid #000 (width type color), if you only want to change border width, use border-width: 1px;.
Do not use !important unless you really really have to.
To override the existing styles, make sure you load your CSS files after the bootstrap one. Then, make sure your rules are at least as specific as those in the original CSS file, only like that you can override them.
Here is a nice tool for comparing specificity: http://specificity.keegan.st/
Also, make sure you follow the proper syntax for each CSS rule. The example you've shown is not valid CSS therefore it should not work, ever. Look at #panther's answer for detailed explanation.
I have a design for a bullet list that has two things:
a. A blue arrow image replacing the list icon
b. A very light dotted border atop and below each list item.
I'm wanting to build this into CKEditor via (CKEDITOR.stylesSet) so that the user can select this particular style of list from a dropdown and not have to write any code to do so.
I have had success to the point where I can create a list with a particular class (and now have that themed), however, am running into issues given that it seems the only way to apply both the dotted line and the blue arrow is to use multiple backgrounds via CSS3, which, SURPRISE, doesn't work in IE8 or below.
If I added some DOM pollution (I.e., surrounded the list item text in a span) I could theme that; however, it seems CKEDITOR.stylesSet only allows for setting one element per style (I.e., I can set ul as an element or li as an element, but there's no way I can use one style to set a class on the UL and surround the text of the child li elements with a span).
Or is there? I'm thinking of falling back to JavaScript for this, but I'm also open to other suggestions to accomplish what I'm doing.
Thanks!
There's no need to use background images for either the arrow or the dotted line. You can do both via CSS. All you need CKEditor to do is apply a class to the (which it sounds like you already are) and then use CSS similar to this:
.styled li {
border-top: dotted 1px black;
border-bottom: dotted 1px black;
}
.styled
{
list-style: square url('http://www.wcb.ny.gov/site_images/blueArrow.gif')
}
Full working example: http://jsfiddle.net/jwynveen/ZhjCK/
I'm trying to be more modular in my CSS style sheets and was wondering if there is some feature like an include or apply that allows the author to apply a set of styles dynamically.
Since I am having a hard time wording the question, perhaps an example will make more sense.
Let's say, for example, I have the following CSS:
.red {color:#e00b0b}
#footer a {font-size:0.8em}
h2 {font-size:1.4em; font-weight:bold;}
In my page, let's say that I want both the footer links and h2 elements to use the special red color (there may be other locations I would like to use it as well). Ideally, I would like to do something like the following:
.red {color:#e00b0b}
#footer a {font-size:0.8em; apply-class:".red";}
h2 {font-size:1.4em; font-weight:bold; apply-class:".red";}
To me, this feels "modular" in a way because I can make modifications to the .red class without having to worry so much about where it is used, and other locations can use the styles in that class without worrying about, specifically, what they are.
I understand that I have the following options and have included why, in my fairly inexperienced opinion, they are less-than-perfect:
Add the color property to every element I want to be that color. Not ideal because, if I change the color, I have to update every rule to match the new color.
Add the red class to every element I want to be red. Not ideal because it means that my HTML is dictating presentation.
Create an additional rule that selects every element I want to be red and apply the color property to that. Not ideal because it is harder to find all of the rules that style a specific element, making maintenance more of a challenge
Maybe I'm just being an ass and the following options are the only options and I should stick with them. I'm wondering, however, if the "ideal" (well, my ideal) method exists and, if so, what is the proper syntax?
If it doesn't exist, option 3 above seems like my best bet. However, I would like to get confirmation.
First of all you cannot do apply-class:".red";
to perform this type of action i will suggest you to use this method
.red {color:#e00b0b;}
h2 {font-size:1.4em; font-weight:bold;}
.mymargin{margin:5px;}
<h2 class="red mymargin">This is h2</h2>
and to use in div
<div id="div1" class="red mymargin"></div>
In this case if you will change in .red class.it will be changed everywhere
Short answer: There's no way to do this in pure CSS.
Longer answer: Sass solves this problem via the #extend directive.
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
#extend .error;
border-width: 3px;
}
This lets you keep your CSS modular in development, though it does require a precompilation step before you use it. It works very nicely though.
You can use the DOM in javascript to edit the id and/or class attributes of HTML tags dynamically.
I agree with DarthCaesar and jhonraymos. To update a class using JavaScript, all you would need is a simple:
function toggleColorClass(e){
var redClass = document.getElementsByClassName('red');
redClass.removeAttribute('class', 'red');
/*Set the class to some other color class*/
redClass.setAttribute('class', 'blue');
}
Of course, to make this work, you would need to include the above function in your document somewhere... if this is all the JS you're using you can probably stick it in the head or even use it inline. You would probably also want to write it so that the toggle goes in both directions, i.e. turning red on and off. Furthermore, jhonray's snippet is probably how you would want to mark up your CSS.
I have a website created by a designer entirely in a table format. I am embedding another table within its cell, the thing is my table has its own stylesheet. When I link mine externally, the entire site get warped. All I want is my Stylesheet to work on my table.
How do I include this stylesheet without causing a conflict or override on the entire site?
If there's no better option, then give your table an id or specific class. Then use this in all your CSS declarations, ensuring the styles within will apply to only your new table. This article explains the idea of pseudo-namespacing further, which is worth considering.
So instead of:
td { border: 1px solid black; }
You would have, e.g.:
.myClass td { border: 1px solid black; }
There are two kinds of things to take care of: 1) preventing your style sheet from affecting the table used for formatting the entire table, and 2) preventing the formatting of that table from affecting your table. Your style sheet must be modified for this.
Start from assigning a unique id to your table and then using the corresponding selector in all rules of your stylesheet (see Rob W’s answer). This suffices for 1). It mostly suffices for 2), too, but not always. You should test it and have a look at the overall style sheet. There is no quick way here.
To illustrate the problematic point, suppose that you want your table to have borders around cells. For this you could have table#foo td { border: solid; }. But if the overall style sheet has td { border: none !important; }. That’s not good practice, but such things are used; authors often use !important for no good reason. In this case, if the overall style sheet cannot be changed, you would need to use !important in your style sheet, too. In extreme cases, you might even need to use !important and write selectors so that they are more specific.