I would like to have extra space before a header in the middle of my
document but not the first header at the top of the page.
That seems like it would be a common situation but I have to
manually specify it.
In other words. I want this
but if I specify
h1 {
margin-top: 1.83em;
}
Then I get this ugly extra space at the top
I get that I can fix it by manually specifying the top header. For example
h1 {
margin-top: 1.83em;
}
h1:first-child {
margin-top: 0.66em;
}
But I'm wondering if there is some other way(s) and what the tradeoffs are. I can certainly add a class or an id to the first header and change the CSS to use that class or header but I'm assuming this is a common pattern so I'm wondering if there are common solutions.
Use the :not pseudo class to define the style for all h1, but the first:
h1:not(:first-child) {
margin-top: 1.83em;
}
<h1>first</h1>
<h1>second</h1>
<h1>third</h1>
I am looking to present a set of properties. key: val type-of-thing. Not knowing any better, I am laying it out in a table.
The following css:
table.properties td:first-child {
text-align: right;
}
table.properties td:first-child::after {
content: ":";
}
aligns the text in the 1st column (the keys) to the right, then appends a semicolon.
Is there a way to express that in a more concise way? Like in a single rule? Or maybe such presentation is better done in another manner altogether?
Appreciate a tip!
I was working on an example for md-datatable found on Git Hub It worked well but when I tried to adjust thw column size as it consumes extra space in table th styling codes where overirdden by md-data-table.min.css file. Please help me to reduce the spacing between columns of table.
Have a look at the less file https://github.com/daniel-nagy/md-data-table/blob/master/app/styles/app.less and try to alter everything under following selector (line 41):
md-toolbar.md-table-toolbar.alternate {
color: #1e88e5;
background-color: #e3f2fd;
.md-toolbar-tools {
font-size: 16px;
}
}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Should css class names like 'floatleft' that directly describe the attached style be avoided?
I was wondering what the best practices were for the naming and usage of CSS classes.
For instance, in a scenario where you want to center the text of both the button text and the header text, is it better to repeat this style in both classes like
.button-text {
text-align: center;
/*some properties*/
}
.header-text {
text-align: center;
/*other properties*/
}
Or is it better practice to move that style out into a separate class like
.center {
text-align: center;
}
.button-text {
/*some properties*/
}
.header-text {
/*other properties*/
}
and have the class of "center" applied to elements that have the classes of "button-text" and "header-text".
What it comes down to, is, should CSS class names represent what an element is "button-text" or "state, what an element looks like "center"?
Thanks!
A CSS class should represent what you use the element for, not what the element looks like.
Consider that you have headers that are red and bold, and change the design to large blue letters instead. If you named your classes after the look of the headers, you end up with:
.RedBold {
color: blue;
font-size: 200%;
}
Having a class named center is definitely the wrong approach - this class name already implies the presentation, that's not the point of defining presentation in a separate file. A better way to avoid code duplication would be:
.button-text, .header-text {
text-align: center;
}
.button-text {
/*some properties*/
}
.header-text {
/*other properties*/
}
Another option is specifying multiple classes, e.g. class="button text" instead of class="button-text". This gives you:
.text {
text-align: center;
}
.button.text {
/*some properties*/
}
.header.text {
/*other properties*/
}
Unfortunately, this approach has to be ruled out if you need to support MSIE 6.0, all other browsers (including newer MSIE versions) deal with multiple classes correctly. As other people already noted which solution you choose is mainly a question of maintenance - choose the one that will be easier to change and adapt to new requirements.
Maintainability is king. Whatever you find most easy to maintain - in my opinion, this is your second example.
It depends how much you will center text, the issue with the second point is that you could then end up with a long list of classes added to each element in your HTML which isn't so clean.
If these happen in, for example, a p tag a lot, then you'd possibly be better off putting one class in the parent so the children can inherit it.
i tend to group items together example like
.button-text, .header-text{
text-align:center
}
then if they need something unique add that to another
ie
.button-text{
font-size:22px;
}
.header-text{
font-size:44px;
}
class name's should be usefull but its not a biggie, just ensure they are unique. Often i name things based on their hierarchy within a page or section, as to prevent any accidental duplication.
I have <select multiple="multiple">..</select> select and I also have select{heigth: 30px;} in some stylesheet that I cannot edit. Now my multiple select have 1-row heigth - "size" attribute cannot be applied. How can I solve the problem?
I like the clean solution.
select[multiple] {
height: 100px;
}
Well, first off - I'm assuming that you're using the height property, not the misspelled heigth property. There's two ways you could solve this.
The first (which I don't recommend) is by simply appending the style to the HTML element, like below:
<select multiple="multiple" style="height:100px">..</select>
Or, instead, my suggestion would be making a second style sheet, that uses the following property, including the "!important", which follows the attribute value:
select {
height: 100px !important;
}
Doing it like such will override the original style, and replace it. This isn't the only method that you can use to override it - you can read here on CSS specificity.
I think the right way should be adding a class to the specific <select> and giving it the right size, like:
<select multiple="multiple" class="multiple">
select.multiple {
height: 100px;
}