Override child css-property - html

How do I override a child css-property.
Example, the text should be black:
<div style="color: Black;">
<div style="color: Red;">Red text that should be black.</div>
</div>
Since I got some answers that suggest that I should not use inline styles, I should tell you that this is not an option, at least not for the inner div.

don't use inline styles. control them from your CSS in the tags or CSS file. Then you can use inheritance, specificty and !important to override. You can't do it with inline styles as you have it in your code.

You should use css classes and ids and use internal or external stylesheets do not use inline style for anything as far as possible. As far as making the text black you cant do it because you have it inline and that has preference over all and will be applied last. It is usually follows this order so the styles are applied starting from left to right-
External Stylesheet -> Internal
Stylesheet -> Inline Styling
Look here to know more information on how to use stylesheets.

Related

External CSS not working for span tag in HTML

When I use external CSS for underlining the word "pro", I'm unable to do so, whereas when I use inline CSS in <span> tag, it works perfectly fine. I have been trying to debug this code since past 2 hours. I'm still unable to do so. Please reply as soon as possible.
The inline-style has higher specificity than the external CSS selector. That's why it always takes precedence in the code when both are used.
However, if you are using only the external CSS and your CSS not being applied, you need to check few things.
Whether your external CSS is correctly linked to your HTML page.
And if so Are you using the Selector correctly.
Thanks
You have to mark important in your external css file to apply any overlay css on your html
like if you are tring to apply background color for span tag from external css
your css must be like this
span{
background-color:#000 !important; /*EDIT: important to !important
}
Use !important css property between style rule property value and semicolon in the external style sheet to increase its priority like following :
Selector {property :property-value !important;}

I want to change color in a Style tag HTML5, syntax is correct but it doesn't work, text is gray

So basicly what is happening is that:
I have and H3 tag, inside I have a Style tag, which contain multiple properties:
The H3 tag is the one im having problems
As for syntax, its ok, but it still doesnt cahnge the color of the h3.
Please help!
i think other classes from your css applied , so what you need to do is either you need to remove that class or Simply Write
<h3 style="color: black !important;">Any text</h3>
but !important is highly not recommended . for better practice make it class base.
If you inspect the particular Tag (i.e. h3), you should be able to see that the current property of color which you are applying is getting overridden.
To overcome this issue, you can do two things:
Improve the Code Specificity
use !important next to the property as follows:
<h3 style="color: black !important"> Header 3 </h3>
Note: It is never recommended to use !important
Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
MDN Docs

How do I override css with html to float inline pull-quote left?

I am trying to format an article hosted by a third-party blogging website where I do not have access to the css style sheet.
I would like to float a pull-quote to the left, instead of the automatic right as predefined in the pull-quote class. Since I cannot edit the style sheet, I was hoping for an inline style tag in html that I may use to override the css.
Currently I have: <div class="pullquote">insert pullquote here</div>
I am extremely new with html and css, so anything is much appreciated.
For your case you can just use inline css.ie specifying style as an attribute of the div.
For your information the order of invocation of css is as follows
Inline CSS
Embedded CSS
External CSS
More details can be found at W3Schools
If that doesnt solve your problem,
You can override any css using !important.It means, essentially, what it says; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'
According to the docs
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets.
So try this to override the float right
<div class="pullquote" style="float:left !important;">insert pullquote here</div>
The above example is what is called the inline css which uses !important also.
As #j0861 mentioned in his comments Using !important is bad practice because it makes debugging hard
you can use:
<div class="pullquote" style="float:left">insert pullquote here</div>
You can apply inline-styling to any HTML element.
Where you may have a stylesheet that looks like this:
p {
color: #000;
font-weight:bold;
text-decoration:underline
}
You can directly apply this, and any other combination of styling attributes to an element (for this example a single paragraph line) by using the style attribute like this:
<p style="color:#000;font-weight:bold;text-decoration:underline">Some text here</p>
In your case you would just need to add:
<div class="pullquote" style="float:left;">insert pullquote here</div>

How to make css !important property work for all elements new style in only one declaration?

I'm making my blog design responsive on small screen sizes but when i want to change the style of a pre-styled element it changes only when !important is added to its css style. This is css example -
.post {margin-left:10px!important;height:300px!important;}
.post img {width:200px!important;height:200px!important;}
a:link {color:green!important;}
HTML-
<div class='post'>
<img src='photo.gif'> Here is the link of a very informative aricle Link
</div>
This is only a example, my css and html code is very long . Here in css style you can see each style contains !important property. Almost in every element's css i have to add !important otherwise element style becomes inherited. Is there any way in css to declare !important property only once and element's new style will work without adding !important to it.
First of all don't use !important like that unless it's only needed. !Importatn forces teh browser to render something as you require. Using it carelessly is going to cause messy code and real headaches for anyone that's maintaining the site.
You should either make the appropriate fixes where it is needed. Keep in mind that:
inline css + !important > css file !important > inline css > css file.
Also if you declare something twice for example a class .some-class{} the properties of the later one will overwrite the properties of the previous classes. But keep in mind the !important thingy...
I would suggest you do it once as you should and save your self from future headaches...
And for further reference: http://www.w3schools.com/css/ & http://www.w3schools.com/css/css_mediatypes.asp
There is no way !important can be used to apply for whole of the CSS file. However you can change the order of your CSS files the way they are called. For example for iphone web pages you can use the meta tag and your CSS will be applied accordingly.
<meta name="viewport" content="width=320"> // iphone
//CSS Rules for iphones
<meta name="viewport" content="width=768"> //tablets
//CSS Rules for tablets
I can think of no reason to use important in this way, if your styles inherit something you don't want chances are you have a selector issue.
If you need to override default styles for a particular reason try using an ID.
I suggest to you reading on selectors best ways to use them. !important should not be used for reasons other than not having access to original css.

override definition in css file

I have a css file that defines style for all <p> tags.
like this
p { ......... }
How can I write a <p> in a page where the stylesheet is included that has default styling?
There's no easy way to do this.
There a some common tricks to simulate that behavior though. The best one to use would vary based on how complex the overridden region is, and how often you want to do this.
Method 1 (for simple overrides):
Add an extra class definition in the statement similar to the one where you clear the default styling (such as is discussed at http://www.wordpress.darfuria.com/blog/clear-css-defaults). You might have to arrange the declarations carefully to prevent the 'normal' style from taking precedence.
.override {/*Your default style overrides, color: white;
margin: 0; background:none; etc */}
<p class="override">foo</p>
Method 2 (clunky, but good for complex regions):
Use an iframe to pull the whole region from a separate .html file hosted elsewhere on your site. The content inside iframes respects the CSS of the page inside the frame, and generally ignores the CSS from the surrounding page.
Method 3 (good for one-shot overrides):
Use inline styles, as others have described here.
Edit:
Not Really a Method, But Probably The Most Correct Way
Also probably not what you want to hear
Re-think your how you've arranged your classes.
For example:
If the overridden <p> is special in some way, it probably deserves it's own class that describes what it's purpose is. <p class='override'> doesn't help people who will be looking at your design after you're done, since it doesn't tell them what the overridden text is for or why it's styled that way.
Are the overrides coming in a specific region? If so, them a style definition like div.left_nav p {/*styles*/} might be a better fit.
Lastly, Is your default <p> styling not really default? Maybe a more loosely specified p style might be in order, with additional p.foo and p.bar definitions later on.
This doesn't fix your immediate problem, but it might be worth chewing on before you start your next project.
You can use inline styling to override the default styling.
<p style="background-color: #ffffff">white bg</p>
Inline styles have the highest precedence. The only styles that have higher precedence than inline styles are user styles applied by the readers themselves.
Just to check. For all the talk of "default styles", if you set the style for a type of element in a CSS file, e.g.:-
li {...}
Then you also include a css file that contains a class definition and apply that class to an individual instance of that element type, e.g.:-
<li class="myLiClass">Some Text</li>
From what I understand it is impossible to get the class myLiClass to override any attribute of the style specification "li {...}" for the element by providing that overriding style in a css class.
Therefore I assert that this means:-
"If you specify a style attribute for any html element type (element type, not a class) in a css file, then all pages that use that css file cannot show that element type attribute using any different styling, where that different styling is stated as a css class."
Can anyone confirm this with an absolute yes, or a working example of why this assertion is not true.
You can apply the style for your tag from your stylesheet like this:
CSS
p.first{ color: blue; }
p.second{ color: red; }
HTML
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
</body>
</html>
I would agree that there isn't really a "Default" style for a tag since each browser has significant freedom on how to display it.
I think the easiest answer is to rethink the problem - define a class that you use for all P tags and then if you fail to use the class it will give you the default styling.
<style>
p.all {margin.top:9px;}
</style>
<p>This would be default style</p>
<p class="all">This would have your style</p>
Alternately, if you wrapped all of your stylized content in a div or some other tag, you could nest the styles like this:
<style>
div.foo p{border:1px solid black;}
</style>
<p>normal</p>
<div class="foo">
<p>abnormal</p>
</div>
Hope this helps.
What makes this impossible is that there is no "default style".
Default styles come from the browser's internal style sheet and the user's preferences. So different browsers and different users have different defaults.
You could assume that white/transparent background, black foreground and Arial font were going to be most people's default styles, but you couldn't be sure.
So, like other people are saying, you have a fundamental problem because you've got a style for all P elements, and there's no way to code a P which doesn't inherit from that style, you can only over-ride it using CSS of greater specificity.