Would it be possible to create a css class/id that would add a value(say, padding for example) to another class's same attrib value?
Let me try to put it down more clearly.
.someClass{
padding: 20px;
}
.thickenMe{
padding: 5px;
}
And when i apply these classes as follows,
<div class='someClass thickenMe'>
<!--planning to beef up this div-->
</div>
This div's net padding should become 25px.
Would it be possible using css only? Its just a thought!
This is not possible using pure CSS.
You could, however, write a CSS clause for each element that can be "thickened" like so:
.someClass{
padding: 20px;
}
.someClass.thickenMe{
padding: 25px;
}
Another alternative would be to use margin as well as padding, like so:
.someClass{
padding: 20px;
}
.thickenMe{
margin: 5px;
}
That might not be possible though, depending on your other CSS.
The easiest solution, although not pure CSS, would be to use JavaScript. Here is an example using JQuery:
var prevPad = $('.thickenMe').css('padding').replace("px", "");
prevPad = parseInt(prevPad);
$('.thickenMe').css('padding', prevPad + 5 + "px");
No. You need to use client-side scripting (i.e. JavaScript) if you want to change attributes dynamically. Or, if you just want to define styles by compiling from some dynamic sources, try LESS or SASS.
Unfortunately, no. You could get this sort of functionality by using a CSS-processor like LESS, which gives you variables, or you could handle it through client-side scripting (easiest with jQuery), but native CSS simply doesn't work that way. Classes override each other when they specify the same attribute; they don't supplement each other.
Related
I am using a stylesheet in my code to stylize proprietary widgets, therefore I don't have access to alter the base stylesheet (nor is that really good practice anyway). One of the styles is causing problems in my application and I determined that the margin: 0 property needs to be removed entirely from this CSS rule:
.esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail {
border: 2px solid #F99;
margin: 0;
}
Is there a way to do this? Since I cannot view the stylesheet in a formatted way, I cannot get the index of this rule. The styles aren't in-line so I don't think I can use the .css() method. If I can't remove it, the only alternative I can think of is setting it to 1px (which I tested and it removed the problem that's occurring) but I'm not a big fan of that solution.
You will need to expand the specificity of your element if you do not wish to override css rules. The easiest way to do this is to add an id on an element and then write a css rule for that element using the id instead of the classes.
Read more here:
https://css-tricks.com/specifics-on-css-specificity/
I'm afraid this won't be possible at all but I couldn't find a question for this nor a reference on if it was possible so I'm asking it here...
If you are familiar with AngularJS or Polymer, you'll know that you can have custom elements with dashes in the element name like special-element. My problem is, how do I style all these elements without having to use a class for them?
The thing is, I have something like this on my code:
<special-element></special-element>
<special-element></special-element>
<special-element></special-element>
They are inline-block elements and I want them to be separated with a specific margin (but no margin after or before the last/first element). For that, I was thinking of something like:
special-element + special-element {
margin-left: 10px;
}
But this does not work... Any ideas on can I achieve this without using a class for the special-element?
You simply need to escape the dash.
special\-element {
padding: 10px;
background: red;
display: block;
}
<special-element></special-element>
Is it a good practice to keep adding
style="padding: 0; margin: 0; display: block;"
to each and every image?
No, it's better practice to use external stylesheets to do the same thing:
img {
padding: 0;
margin: 0;
display: block;
}
This will target all images in which the stylesheet is loaded. This can be overridden by the use of more specific selectors, such as id-based (img#theImageID or, more simply, #theImageID will target an <img id="theImageID" src="path/to/image.png" />), or class-based (img.imageClass or, again more simply, .imageClass. The former will select: <img class="imageClass" src="path/to/image.png" /> the latter will select the same element, but also any other element that has the same class-name).
Edited due to response/question from OP:
[Even] in case of html emails?
HTML emails are the one special case for this rule, HTML emails typically don't load, or can't load, external stylesheets. And seem to have trouble with style blocks, so in that case, yes. You still have to use in-line styles. Unfortunately.
Further reading:
W3.org.
SitePoint.
It's surely better to create a class with the style properties, like the following:
img.imageclass {
border: none;
margin: 20px;
padding: 10px;
}
Why it is not recommended to use inline styles. Because if you use an in-line style, you'll not be able to affect on that element from browser specific style-sheets. For example, if you create an element and see that it needs some "tweak" to look good in IE6, for example, the IE6 specific style-sheet will not work if you explicitly put an inline style for that element since the in-line style will be "lower" and thus will have higher priority.
it is good practice, but like #David Thomas said, it's better to do it in an external CSS file to keep from inline clutters.
I'm not sure what to call this, but basically let's say I have a style that I use a lot,
.somepattern{
font-size:16px;
font-weight:bold;
border:2px solid red;
}
but sometime I want to change the font-size and the color for border. Is it possible to treat this code as a library, where I can set the style to a div
<div class="somepattern">Text</div>
but still control the 16px and red like we do with functions?
I know I'm late to the party but the selected answer IS NOT the right answer since it's deferring it to CSS preprocessors.
To answer the specific question "Do CSS functions exist?", the answer is: Yes.
However, CSS functions work completely different than the OP's concept initially is.
cuixiping's answer seems the most correct answer.
Examples of CSS functions are:
url()
attr()
calc()
rotate()
scale()
linear-gradient()
sepia()
grayscale()
translate()
A detailed, comprehensive list can be found here:
CSS functions on MDN Updated link 18/9/20
You can't programatically control CSS from your markup, but you can use one of the many CSS extensions to make CSS work more like a compiled language.
http://lesscss.org/
http://sass-lang.com/
If we wrote your example in LESS, we'd get something like this:
.somepattern(#color: red, #size: 16px) {
font-size:#size;
font-weight:bold;
border:2px solid #color;
}
And then you could use it in your LESS file like so:
.myclass {
.somepattern(green, 20px);
}
Nope. No CSS functionality like you require. At least not directly.
But there are at least two rather generic ways for you to use to accomplish what you need:
Class combining
You can of course combine as many classes as you like in any element like:
<div class="heading run-in">
Some heading
</div>
Lorem ipsum dolor sit amet...
and you'd have CSS defined as:
.heading {
color: #999;
font-size: 16pt;
font-weight: bold;
border-bottom: 2px solid red;
display: block;
margin: 1.5em 0 .5em;
}
.run-in {
display: inline;
margin: 0;
font-size: 1em;
}
LESS CSS
And there is of course LESS CSS project that lets you define variables (and has other sugars as well) and use them in other classes.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
If your server platform is .net there's a project DotLessCSS with a library in .net as well. And there's also T4 template by Phil Haack.
Mind that there are many CSS preprocessors/enhancers like LESS CSS as well:
SASS
xCSS
HSS
CleverCSS
And probably some others that I didn't mention. Some support nesting CSS3 selectors as well others don't. Some are aimed at particular server-side technology some don't. So choose wisely.
you can redefine style by adding the style tag to your HTML:
<div class="somepattern" style="font-size:5px">Text</div>
or by applying multiple classes like class="somepattern small".
HTML
<div class="somepattern small"> Text </div>
CSS
.small {
font-size:5px;
}
the small class will be applied after the somepattern class and will therefore override any properties set in the some pattern class.
Even later to the party!
You can now do this with css custom variables.
In our css using the var() function:
.some-pattern {
font-size: var(--font-size);
font-weight: bold;
border: var(--border);
}
Then in our html defining the custom variables inline:
<div
class="some-pattern"
style="--border: 3px double red; --font-size: 16px;"
>
test
</div>
What you described is actually done with style attribute.
<div class="somepattern" style="font-size:10px;">Text</div>
I think this is exactly what you want. And it is not recommended, because it breaks the usual (good) pattern of spitting content and its visual style. (Although, honestly, I do use it a lot. ;-))
its a css class. It cannot be used like functions if that's what you are asking. There is no code library as its not a compiled. CSS is just presentation semantics (formatting) of a document written in a markup language. You can include all css classes in a .css file and use it where ever you want instead.
I've come to realize through the comments of others that this solution overcomplicates the problem at hand. This solution works but there are easier and better alternatives that do not depend on server-side scripting.
You can actually control your stylesheet if you make it a php file stylesheet.php?fontsize=16 and then inside your stylesheet you can retrieve the variable
<?php
header("Content-type: text/css");
$fontsize=16;
?>
.somepattern{
font-size: $fontsize;
font-weight:bold;
border:2px solid red;
}
Yes, it's possible. But you have to make it on your own with the help of Recatjs(u don't have to go deeper, basic is enough for this). Actually, think like that If bootstrap can make such things where we just have to define the class name and it automatically designes HTML files, then why we cannot do it.
Here's the image of my code(https://i.stack.imgur.com/hyePO.png)
and this is how I used it in my jsx code (https://i.stack.imgur.com/yK6VD.jpg)
Do you mean inline styles ? <div class="somepattern" style="border-color:green">Text</div>
We're using a template for joomla where creators defined the rule in constant.css
table
{
border-collapse:collapse;
border:0px;
width:100%;
}
When I need my own table with a custom params (width, border and so on), a nightmare begins. If I use general html params, they don't work since css rules are more important (CMIIW). If I use style= param, I suppose I can't control how the table looks for IE up to 7 inclusive.
So is there a general approach to work around this or I just need to comment the rule (as I already did).
And also, am I right if I say that creators of joomla templates should not define such general rules as width:100% by default? I mean if they don't want users of their template to complain.
Method 1
Put a class on all tables that you create, and create a selector like table.classname that overrides the properties. Since you should only use tables for tabular data, adding a class name makes sense because it's easier to apply additional styles (colours, borders) to all your tables.
To override border-collapse: collapse, use border-collapse: separate along with border-spacing: 4px (or whatever value). This doesn't work in IE6 and may not work in IE7 either.
For a border round the table just add a border rule. If you want borders on individual cells, target table.classname td and put the border rule there.
To reset the width, use width: auto or put an explicit width.
Method 2
An alternate method would be to find all the tables used in the template, add a class to them instead, and change the original rule to use that class. Then, any tables without that class will use the default table properties.
This is probably going to be quite difficult to implement because Joomla templates often have module and component overrides, meaning there will be many tables in many places. Good luck! :p
You're correct, setting those styles (well, width at least) on a generic table element is a bad idea for a template. Although the fact they're probably using tables for layout isn't a good sign anyway.
table{
border-collapse:collapse;
border:0px;
width:100%;
}
The following should override the above css rule:
.classofyourtable
{
width:50%;
}
#idofyourtable
{
border:1px;
width:20px;
}
Please note also of the following CSS cascading precedence(1 being the highest):
inline
ids
class
tagname
Rules with less precedence will be overriden by the higher ones.
Applying the style to a class or id both override the style in the general tag style.
There's a number of ways to do it. As Marius says, a class or ID will help.
Lets say you put an id on the body element (<body id="foo">), then you could override the built-in table style using
#foo table {
width: auto;
}
Or if you only want to restyle certain tables, try using a class (<table class="foo">):
table.foo {
width: 25em;
}
But yeah, why not just edit the template's CSS to do what you want?
Apply another rule below the existing one:
table
{
background-color: Navy;
width: 100%;
}
/* override existing rule: */
table
{
width: 960px;
}
When a CSS rule is specified twice, the browser will use the last one.
And yes, you are correct--The proper way for Joomla go about this is to implement namespacing using classes. Overriding default CSS rules is bad practice.