I Want to apply multiple values to css property. I need to apply like this as i mentioned below.
.class{align-content: flex-start;
align-content: space-around;
}
Both of them Css Values i want to apply at a same time. So I Need like this.
No, you can't do that. The second rule will just override the first rule.
What you can do is wrap an element in a container and set up different rules to the container element.
One exception to this that I can think of, is the background property - where multiple value are acceptable in CSS3.
Here's a mozilla article about that
In this particular case, the answer is no. Not all CSS properties accept multiple values. However few properties do. E.g- box-shadow
.my-element{
box-shadow:0 0 10px 0 #000, 1px 1px 10px 0 #666;
}
Here, multiple values are separated by comma (,)
align-content is not one of those properties. So no!
Related
I have several CSS classes with elements that always use the same combo.
Is there a way in CSS (Not LESS or similar systems) to bundle several classes into one rule?
Pseudo code:
.a{
margin 30px 0;
}
.b{
padding:0 4px;
}
#bob{
.a;
.b;
}
...
...
<div class='bob'>...</div>
No, CSS does not allow for this (which is one of the reasons why LESS and Sass were created in the first place).
I am having a HTML content like this.
It has a padding of 70. I tried to reduce the padding by adding using another css rule like this
padding-top: -20px !important
All I want to do is, already existing property value 70px should be added with the additional rule -20px so the result should be 50px.
I am able to accomplish this by doing padding-top: 50px !important
But still I want to do this mathematical calculations in the css as I asked. Please help.
Note: The already existing value is in separate css rule and this added one is in separate rule.
Unfortunately, you can't do cross class calculations in CSS
If you want to do mathematical calculations of any kind, check out the calc() function
It allows you to do things like: padding-top: calc(10em - 60px)
As long as you're not using it for background-position; calc should be backwards compatible to IE9 and work on pretty much any other browser bar Opera Mini
I am trying to remove the space between the different tables but not able to do so.
If I were you I would seperate your css out into another file. Inline css can be very hard to find sometime.
To get all the tables next to each other, you need to change all of the inline css on .row elements to the following:
<div class="row" style="margin-left: 40px; margin-right: 20px; padding: 0 10px;">
I would also probably add margin-top: 10px depending on how much vertical space you want between each table.
Specifying margin-top, margin-left, and margin-right is the same as margin: top, right, 0, left if you want a shortcut.
Each table element seems to have the class time so you can just apply a negative margin to that class. Something like this should work:
.time {
margin-bottom: -30px;
}
http://jsfiddle.net/nJa45/4/
Now, that being said, if you are trying to eliminate the spacing all together, you might have better luck restructuring your table. Rather than having multiple tables, make the entire thing one nested table. This will provide a more consistent removal of white space.
I am using Bootstrap 3 to build my personal website and have been searching for a way to do the following:
I would like to assign unique gutter widths to specific rows in my layout.
The rest of the website will make use of the underlying gutter width.
Is it possible? Any help would be much appreciated. Thanks in Advance / Trev
The simplest way to change the spacing between columns (gutter) is to use CSS to override the default padding (15px)..
.row .col:not(:first-child),.row .col:not(:last-child) {
padding-right:5px;
padding-left:5px;
}
Demo: http://bootply.com/94849
Yes. Add a unique CSS class, say my-personalized-row to the row you want to edit. Then in your CSS, add a section for this as following:
.my-personalized-row {
margin-bottom: 5px !important; //If you want 5px of gutter width.
}
Now, whatever you put between the two braces will apply only to this row and the rest of the site will use the underlying gutter width.
UPDATE:
I have added the style rule you would want to use to reduce the gutter width for a specific row to 5px. The !important is to ensure that specificity rules will not interfere with your declaration. Note that it is not mandatory to use !important since Bootstrap declares styles with a single class as well.
I'd like to remove the css from a single table in a page where all other tables are defined with css (and need to be). How can i circumvent the css rules for a specific single table for an html/php page?
Given your defaults:
table {
margin: 0,
padding: 0,
border: 1px solid
}
When you want to have one table that goes against that rule, you could just add a css class to that instance and override the defaults:
<table><tr><td>Default Style</td></tr></table>
<table class="i-am-special"><tr><td>Special Style</td></tr></table>
Just use this css:
table.i-am-special {
margin: 5px;
border: 2px dotted;
}
You can reset/adjust as many or as little properties as you like in your "i-am-special" class.
Note also that it doesn't have to be "table.i-am-special" if the style can be applied to other things, that's just an example.
you can check out how the css rules define in your page
if the rule defined like: '.targetTable'{} (by class) or '#tableId'{} (by id)
it would be easy to remove the css rule by changing the table class/id on html code
else if it defined like: 'table{}' (by object)
Method 1:use jquery to reset the table(which you want to use other style) css
Method 2:change the css rule by using class or id selector