I'm trying to port code over from using inline css to using a stylesheet and as I'm pretty much a total css noob I'm having trouble.
Most of the things I've moved over to external have worked fine, but I can't seem to get TD elements to use styles defined in the stylesheet. Here's an example:
<td class="text_right">...</td>
.text_right {
text-align: right;
}
Why doesn't that work?
That should work, however bear in mind that your <td> element should have some dimensions, otherwise it will be as wide as the content.
Check this for a demo
<td class="text_right"><a>...</a></td>
.text_right {
text-align: right;
width: 300px;
}
that should work , put you text in <a> tags
Try using !important . Like this ;
.text_right {
text-align: right !important;
}
if you still see it not aligned please check css for that element overridden rules (with chrome or opera) by right click and investigate
Related
I am looking to improve the style of a Wordpress site.
I have a div with the group-input class which has this style:
.group-input {
display: inline-block;
margin-bottom: 0px;
float: right;
padding-left: 10px;
text-align: right;
}
I would like that below 572 px of screen we switch to float : left so I wrote this below the previous code, in my theme's CSS file, like this:
.group-input {
display: inline-block;
margin-bottom: 0px;
float: right;
padding-left: 10px;
text-align: right;
}
#media (max-width: 572px) {
.group-input {
float: left !important;
}
}
On the other hand it does not work, the new style does not apply to my div.
suddenly I don't know how to do it. Do you have an idea, a lead to advise me?
I want some explanations, something simple for you is not necessarily obvious to me suddenly I need to understand. Thanks for your time and help.
In general, that should overwrite the css rule you are trying to do, but it's probably another css rule that more specifically targets that element. A few reasons it may not be overwriting is because:
another css rule is more specific than yours
it's in a breakpoint more specific than yours
it uses !important
A combo of all of those will require you to be even more specific in targeting the element.
If you find you are unable to overwrite a rule, try and be more specific in your targeting of the element by targeting it's grandparent/parent and working down the html tree. If you notice that that isn't working either, then try using !important.
Check the html structure around it try that. Sometimes even body .group-input might be specific enough, but the closer you specify to the element, the better off you will be.
On my website, I added the following code which I had only intended to apply to my posts, like this.
#media screen and (min-width: 767px) {
p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
}
Obviously, it was applied to all the pages on the website. It's fine on some pages, but the homepage/frontpage is messed up on computers. If you scroll down, the excerpts (descriptions) below the posts have these margins applied to them.
How can I make the change above only apply to posts and not to the frontpage/homepage? To be clear, I want to remove these paddings from the homepage/frontpage. I want to keep them on my posts.
This is one of the suggestions people gave me that didn't work. If I decreased the number from 20%, nothing happened. The margins got bigger if I increased the padding, as if the minimum is set to 20%.
.home .posts-loop .entry-summary{
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
Welcome Ahmed.
The suggestion that people gave you that didn't work, is related to class names (note the point before the names: .home | .ports-loop | .entry-summary . This indicates that are classes).
In your first sample you only use p . This affect to all p html elements.
So, your solution is to add a class to the paragraphs where you want to aply the css rules:
<p id="xxxx" name="xxxx" class="SomeClass">
And then, in your css code, use .SomeClass {...} to set the rules to apply.
This rules should be applied only in the elements set as class="SomeClass", and not to other elements.
For home page/front page just give another custom class name and just give padding to 0 or else you want and write " !important ".For e.g .cstm_home { padding: 0 !important; } . I hope it will solve your issue.
An easy way I see around this is to create a different stylesheet for the homepage. I'm not sure if you're using a global stylesheet, if you are, you should remove the line that links the CSS to this page.
A more prudent approach would be to use another type of selector instead of your paragraph tag, put an id in all the paragraphs you would like to style the aforementioned way and use this id or any other selector in your CSS.
Cheers!
I hope this helps....
What I would suggest is to add a class to the p tag on home page. The HTML should be like
<p class="homepagepara">blah blah blah.....</p>
And the css will be like.
p.homepagepara {
margin: 0;
padding:0;
}
After you have created the class you can style those pages any way you want. And it will target the home page paragraphs only. Hope this helps. Let me know if you have more questions
I wish you had shared your HTML as well. But a general answer is that you are selecting all the p elements in the html document to have the mentioned paddings. So of course it's applied everywhere on the page.
Solution 1: If they're separate html pages you can link separate stylesheets and include the paddings only in the desired pages.
Solution 2: Be more specific with the css selector. For example if the wrapper div for the posts has the class of .posts, write your css as following:
.posts p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
I don't know why, but for some or odd reason the specific style for a p tag inside does not style when using a custom style sheet css, but works perfectly fine when doing inline.
Obviously I'm trying to avoid using inline, because it's not the best practice.Using Bootstrap
<h1 class="page-header">Properties</h1>
<div class="col-lg-4 main_content">
<img class="img-responsive" src="images/home_image2.jpg" />
<p>CHATHAM<br />
London, Uk
</p>
</div>
The html.
The CSS:
.main_content p {
font-size:24px;
background:#262626;}
Both the font size as well as the background color doesn't seem to work
I have tried targeting it as a ID, but to no avail.
use this
.main_content p {
font-size:24px !important;
background:#262626 !important;}
Try using
.main_content p {
font-size:24px !important;
background:#262626 !important;
}
Working fiddle
http://jsfiddle.net/52VtD/9080/
But it works without !important, i dont think !important is not godd to use, please check you other css maybe you are overriding some more classes, if you can please make a working fiddle or send us a link
Or write with upper class.
.page-header .col-lg-4.main_content p {
font-size:24px;
background:#262626;
}
Okay.
The solution I came up with was to change the name of the class affecting the div.
Even though did a search to check if I might have been using it somewhere else, and nothing came up, this solution worked out perfectly fine.
This is the name change I used.
.main_content_home p {
font-size:20px;
background:#262626;
color:#FFF;
padding: 12px;
}
I have an HTML table with numerous columns. I want to set text-align: center on all columns except one.
I've heard that both using !important and unnecessary nesting is frowned upon. What is the "best" way to achieve this?
Using !important:
#my-table td {
padding: 5px;
text-align: center;
}
.my-table-special-td {
text-align: left !important;
}
Unnecessary nesting:
#my-table td {
padding: 5px;
text-align: center;
}
#my-table .my-table-special-td {
text-align: left;
}
Or some other method?
By "best" I mean:
* Conformance to CSS best practices
* Good performance
For performance wise, use inline styling for all your css. This is the technique used in google mail (Gmail) and I think Yahoo! mail as well. So if it's speed you want. Use inline style for everything. Honestly I wouldn't go that route because it does not offer clean and re-usable code.
So I would go with the cleanest solution which is giving the element a class name and avoid using !important. It is definitely frowned upon and it does not have to be used to be honest. The table will respect your class name on your table element. This offers a more clean CSS in the end that works on all browsers. If you are overriding classes in General, it means you might want to rethink the architecture of your CSS. I do not mean you are doing it the wrong way, but we are talking about the best way of doing things aren't we? :)
Happy coding!
Do not use !important, unless you do not have any other choice.
#my-table td {
padding: 5px;
text-align: center;
}
td#my-table-special-td {
text-align: left;
}
you do not have to do any nesting. just use id istead of class and add tag name in front of it as you can see in the above code.
here is an example of it jsFiddle
Personally, I use !important for "overriding" classes. Things like:
.center {text-align:center !important}
.right {text-align:right !important}
And so on - if I specify class="right" on an element, it's because I specifically want it right-aligned and !important helps reflect that.
However in more general cases, you should avoid !important - mostly because once you've used !important, there's no way to override it any more!
You should do it like this:
.tableAll td{
padding: 5px;
text-align: center;
}
and you just want to center only so why define class. Inline style will work in this case and will override matching style of .tableAll.
<table class="tableAll">
<tr>
<td style="text-align: center;"></td>
<td >other all</td>
</tr>
</table>
I don't recommentd using !important.
Actually, both solutions are fine using !important and nesting,
You should not use !important too often, because once it spreads and you use it over and over again, you will be back at the beginning (difficulty in specifying elements specific to override other styles, applied),
but in that particular case you are fine since the !important rule only affects 1 element.
Nesting also works good, as long as you use it for special cases and not for every single element, because once you do so, your code will be unreadable and you will have a very hard time in improving and re factoring.
#my-table td {
padding: 5px;
text-align: center;
}
#my-table td.my-special-td {
text-align:left;
}
Arguably you don't need the #my-table selector as you stated you wanted to all td elements to be aligned to the center.
A more reuseable approach would be to remove the id and just have:
td { text-align:center; }
td.left-align { text-align:left;}
td.right-align {text-align:right;}
Then you can apply the alignment to any td anywhere, as well as override if you need to by adding an id to the table later on.
I won't recommend to use !important . In your case using text-align: center you can center the text and if you want for any column text should be left-align you could make a particular class for that column or better use some advance level CSS3.
In this example I want to change the Last Column of Last row and want to apply class.
I can do this by adding this style.
table tr:last-child td:nth-child(5) {background:red;}
Or better check this example. http://jsbin.com/mizotofe/1/
My first post here and unfortunately it won't be that exciting and I need an answer that includes IE6.
To get space between paragraphs, I'm styling my <p> tags like this:
div.content_cms p {
margin-top: 0px;
margin-bottom: 15px;
padding: 0px 15px 0px 0px;
}
The margin bottom to space the paragraphs. This of course works fine. But then I also need to style a link with html is this:
<p>Text </p>
When there is a link as in the example above, I don't want the margin-bottom to be applied. I tried to fix it with this:
div.content_cms p a {
margin-bottom: 0px !important;
}
Which of course doesn't work.
I'm adding a class to the <a> tags with jQuery so I can automatically add an icon to links. I tried adding
margin-bottom: 0px !important;
to the class I'm adding with jQuery but that didn't work either.
What's the best way to style spacing between <p>paragraphs</p> with text but not paragraphs with links?
Thank you.
You can easily do this with jQuery:
$('p').has('a').css('margin-bottom', 0);
Live demo: http://jsfiddle.net/NyjvT/
If you need to set multiple styles, then consider this:
$('p').has('a').addClass('whatever');
CSS:
p.whatever { margin-botttom:0; font-size:20px; ... }
I don't think you can.
Your best bet is to add a class to those particular <p> elements, and override the margin on those:
div.content_cms p.nomargin {
margin-bottom: 0px;
}
<p class="nomargin">Text</p>
If this is not possible on the server side, you could do some jQuery hackery to take care of it.
Maybe there's some CSS3 magic that could be used, but I'm not sure of that; and since you want IE6 support, it's out of the question anyway.
This is not possible using only CSS.
CSS (Cascading Style Sheets) works only down the document tree.
The reason for this is performance.
For more info read this:
http://snook.ca/archives/html_and_css/css-parent-selectors
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3940
You need to use javascript for that to work.