I want to apply some different styles to HTML elements giving them custom classes for which I will write different CSS style rules.
I'd like to do like:
<p class="padding-top-15">
And then have CSS rules where top and 15 are just identifiers.
For example I'd like my CSS to be like:
.padding-$identifier1-$identifier2 {
padding-$identifier1: $identifier2 px;
}
Is this even possible with CSS3?
No, you cannot. There is nothing even remotely like that in CSS.
Try asking a new question where you explain what you wish to accomplish, instead of presenting an invented syntax to solve an unspecified problem. Note that if it occurred to you use a class name like padding-top-15, you have probably misunderstood some basic ideas of CSS. Think how confusing things will be if you later decide to change the top padding of that class to a top margin of 10px.
Related
So, I was looking at a tut on youtube the other day, and this guy kept defining css rules with classes really weirdly, and I wondered if one of u guys could explain the necessity of it: here is the code:
ul.class li{
color:#fff
}
Why can't he just do:
.class{
color:#fff
}
Thank you for reading my question, I hope you understand what I am asking for.
Video: https://youtu.be/2wCpkOk2uCg
P.S - Sorry for the giganticly large title 😏
When you put the element before the class, CSS only applies the styles to the members of that class that are of that specific element.
For example, if you had .class applied to 3 headers and 3 paragraphs, writing p.class would only affect the paragraphs.
With ul.class you're saying "Apply this styles to all the ul's with this class. If you only use .class you're saying "Apply this styles to ANYTHING that has this class". It's very different. :)
I can think of at least two reasons to include the element name as well as the class:
Specificity, i.e., which CSS rule takes effect on a target element when multiple rules apply to to it. There is a specificity algorithm that determines which rule is applied when multiple rules are in competition. This awesome Specificity Calculator is a great tool to help you understand the algorithm. So, in short, including the element name and the class gives it additional weight.
Documentation in your CSS. I tend to include the element as well as the class, e.g. h1.customer-name, to self-document what type of element the rule is being applied to. When I see .customer-name without the element name, I am not totally confident in what type of HTML element it is. Doing this means I don't have to keep the HTML structure in my head or consult the HTML repeatedly while I work on CSS. But this is pretty dependent on one's approach to CSS as well as the tools used, so I'm not sure I would consider it a good idea across the board.
And one more, but not least important thing. If you adding the tag name before the class name (such as span.class{}), so you got more specific rule and it's have bigger priority (no matter in which order that rules writter in css file). For example, if you write two rules:
.class { color: red }
and
span.class { color: blue }
you will get a blue text as a result.
I need to create a div with specific background-color depending on variable object.
My options are:
Create an infinite css for each color.
Style in-line.
I know style should be separated from html. But, in this case, what is more efficient?
Do you need a different color based on dynamic content ("variable object")? In that case you should go for an inline-style. It would be easy for php/whatever backend you have to serve it conditionally.
While it's best to keep most styles on a stylesheet, there are exceptions to that rule. If your particular case asks for it, feel free to add your styles inline. For example, you need a gallery of things and you need the elements with a background-image instead of an img.
No, you cannot. The options you provided are the only way... You can do a complex/advance JavaScript/jQuery but it will always boil down to on how you will provide the selectors.
After googling quite a bit I haven't been able to find documentation that was specific, to be honest, I don't know how to phrase this question without getting an irrelevant response because I have no idea what the name of the item I am looking for is called. In my mind I'd call it a element/class selector.
When targeting specific elements to style I do not always get the result that I want due to the style not applying. For example in something like this:
<div class=box>
<div class=smallerbox>
<div class=something>It has some text in it</div>
<div>
</div>
Now I would like to just be able to edit with CSS to look like this:
.something {color:#FFF}
But instead sometimes it doesn't work and I have to do this:
.box .smallerbox .something {color:#FFF}
Now the problem is I am not always sure how far back to go and I end up adding in extra stuff that I don't need or wasting time because I do not fully understand what I am doing. Adding !important doesn't always work either.
The reason I think I have to do this is because I am using bootstrap.css and this way I have to specifically target the class or it gets overridden by the parent class styles.
Am I correct for thinking this way?
Any tips or methods to save me from madness of learning HTML/CSS/Javascript/PHP through random guides and documentation would be gladly appreciated.
What you are referring to is class/CSS specificity. This is a good start in understanding: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
But there are plenty of other articles online you can look at.
Basically a rule of thumb is not to over qualify your selectors (i.e. use the minimum needed). This way if you need to override a style later on you can be slightly more specific or add an extra class to add/override styles to the existing style.
When you nest your style references too much it soon becomes a nightmare to manage and you MUST try to avoid !important at all costs. If CSS is done correctly it shouldn't be needed.
Some libraries can set styles with certain class names and some do use long chains, so naming your classes becomes a difficult task too. But most shouldn't interfere too much as long as you load their CSS first and yours after.
.box .smallerbox .something {color:#FFF}
means, give color : #FFF to something inside smallerbox which is kept inside box, so, this would be applied only to div named something for below
<!-- box
|
|
|-------smallerbox
|
|
|-------something <= make this white -->
but when you say :
.something {color:#FFF}
it means, any something which has no css defined for it...check this fiddle for understanding better
Fiddle here
I have a specific css class "styled" which gives glass effect to the various divisions. The site is at http://www.rohanjain.in/. I have various html5 tags which use the glass effect from the css class defined.
Is there any way to define in the .css so that my header, footer, article tags use the class "glass" automatically, i.e. they inherit from this class. I am trying to do to decrease the size of css and html. Right now these tags are provided attribute class="stlyed" from html. But is there any way to do this only using css.
I really don't want to do something like this:
article, footer, header{
...css definations...
}
I want to use browser detection and define class glass in some other .css according to the features supported while keeping the size minimal.
Update 1:
This is the source of css http://www.rohanjain.in/media/css/style.src.css. The size of styled class is high because of multibrowser effect definations.
Update 2:
It seems there is no simple way to achieve inheritance of classes, so I am finally using class="stlyed" in the html elements to achive this.
Think about this from a CSS perspective. How is your CSS meant to know that you have some tags which are in some way special if you're not prepared to tell the CSS about them explicitly and you're not going to classify your markup implicitly?
The best solution I believe is to classify your markup (but not using something as unsemantic as "glass") but the explicit element based CSS is perfectly acceptable.
There is a tool called LESS that will do exactly that:
Can a CSS class inherit one or more other classes?
No, you either have to define them together:
article, footer, header, .glass {
...
}
so that those tags have the same styles as the "glass" class, or you have to use JavaScript to dynamically add the "glass" class to those elements.
If I understand you correctly, the way that you show
article, footer, header{
...css definations...
}
really is the only, and most correct, way to do this. I don't understand why you don't want to use it, or what other kind of definition you are looking for?
I can imagine it can get complicated fast trying to debug style issues when there are multiple classes associated with elements. Currently I'm using multiple classes but in a way that one type of class is for jQuery manipulation and the other is for style. So I can have an element
<div id='myDiv' class'ActionControl SearchBox'></div>
where the .ActionControl is used by jQuery and the .SearchBox has a style associated in the CSS file. Is this right or wrong? What do people more experienced with this think?
What issues have other people come up against? How have they been resolved?
As long as your code is comprehensible, maintainable and clear to others, your system is good.
There is no standard I am aware of in how to give CSS classes, except one:
If you need to target a single element in the page using JS or CSS you should use an ID and not CLASS.
This is definitely a good practice...
What you have to keep in mind always is not to remove the class attribute, instead you will be removing the classes you exactly want to remove.
Also, another problem (not for me) is that multiple classes are not supported for OLDER browsers.
Keep in mind to code your CSS in a way it prevent code duplication so a float:left class can be used in many different elements, this is to keep code clear.
I can't see anything wrong with that. Probably, you could prefix the jQuery classes with e.g. jActionControl, so you have a better overview over who uses what classe if it gets really ugly with many classes.
Of course, you can assign as many classes as you want so there is nothing wrong with your approach in my eyes.
Another way to use multiple classes is to get a kind of inheritance.
.thing { ..blah.. }
.thing.subthing { ..tweaks.. }
<div class="thing"></div>
<div class="thing"></div>
<div class="thing subthing"></div>
Here all the things get "blah" applied to them, but only the subthing div gets the tweaks.
Yes, it can get complicated. As with any power tool, you need to apply it judiciously and with discipline.