I have an HTML table with columns of different colours. This is done by assigning to each table cell 'td' element a CSS class defined with the appropriate colour.
Any table row background colour changes when it is subject to a mouse hover. This is done by the following CSS declaration in the style block of my HTML document:
table tr:hover td { background-color: pink; }
That's all very well. But I need to make this work using inline style strings. Such as: <table style="...">.
How can this be done?
I need to drop the table into a content management system that does not accommodate custom CSS style block interventions well.
Workaround suggested here won't work because it defines a before and after highlight colour. This would have to be defined for the whole row, so that the whole row would highlight upon hover. But when the hover is removed, the whole row would then have to return to its prior colours, and those are defined at the level not of row but cell.
First thing, you mustn't use inline css, it's a bad practice and makes the code longer and harder to read. Just make an external file named style.css and link it in the head of your html OR use <style> </style> tags within the head of your html, but the external file one is more recommended because it separates the markup and the styling and you can use the same css file in another project too.
Anyways, here is the answer to your question
There is no solution to your question as inline css cannot use selectors or pseudo classes, for instance..
<div class="div1" style="div2 {background-color: red;}"></div>
<div class="div2" style=""></div>
something like this is not possible , because the style="" attribute only applies to the element that is the holder of the attribute, it cannot make the use of css selectors such as div2{} or pseudo classes such as div1:hover
so the only solution to your problem is that you use <style></style> tags in the header or use an external style sheet.
If you want then you can use inline Javascript that will check for hover to execute a function that will change the background for you.
Also, kindly refer to this answer too.
CSS Pseudo-classes with inline styles
Okay - the scenario: using inline styles in an html table, to make the table portable and entirely self-contained.
(So that the table can be used situations where you do not have access to the html page's header block -- as is the case, for example, with content management systems such as those used by Blogger, where you can insert html into the body of a blog post, but can't define a style block for a given page without opening a can of worms).
The challenge: define a mouseover event that changes the background colour of a table row.
This is a challenge because each table column has a different colour, and each cell defines its own colour. Yet inline styles take precedence over other styles, and an inline onmouseover instruction seems not to work.
Solution 1.
Define inline styles for each cell, to make table portable.
Override inline style with <style> block defined within body.
Where the only statement inside the style block is that implementing
the mouseover.
Note: it is necessary to use the !important declaration in any mouseover style attribute, because otherwise it would not be able to claim precedence over the inline styles, and would have no effect.
<body>
<!-- style block defined in HTML body
to define CSS elements that could not be used inline.
!important declaration necessary
to override inline styles -->
<style type="text/css">
table tr:hover td
{
background-color: #0ABC1F !important;
}
</style>
<table>
<thead><tr><th scope="col">one</th>
<th scope="col">two</th>
<th scope="col">three</th></tr>
</thead>
<!-- define inline styles for each table cell
to make table portable -->
<tr>
<td style="background-color: #ABCDEF;color:#000000;"
>1000</td>
<td style="background-color: #FEDCBA;color:#000000;"
>W</td>
<td style="background-color: #ABABAB;color:#000000;"
>1</td>
</tr>
</body>
Solution 2.
Define classes for each cell, using CSS classes defined in style block.
Put style block within html body.
Put in style block all classes, as well as mouseover instruction.
<!-- define CSS style class for each table cell
in style block inside HTML body
to make table portable -->
<style type="text/css">
table tr:hover td
{
background-color: #0ABC1F !important;
}
.one { background-color: #ABCDEF;color:#000000; }
.two { background-color: #FEDCBA;color:#000000; }
.three { background-color: #ABABAB;color:#000000; }
</style>
<table>
<thead><tr><th scope="col">one</th>
<th scope="col">two</th>
<th scope="col">three</th></tr>
</thead>
<tr>
<td class="one">1000</td>
<td class="two">W</td>
<td class="three">1</td>
</tr>
Option 1 seems wiser because of what is said about the potential for <style> blocks inside<body> blocks to go-unrecognised. It puts all essential styling inline, and keeps only the nice-to-have mouseover in the` block - as that is the only place, it seems, where it could possibly be.
You can't.
Use CSS Stylesheet or <style></style>
Related
changed "div" tags into more semantic html tags to make a webpage more user friendly but unsure how to change CSS to make these new semantic tags inline on the webpage as well as change other styling aspects of the code. How do i make sure the right elements in my html is linked to the right css code. Sorry if im not using the terms correctly new to coding.
I tried changing the class names to the corresponding more semantic tags so that i could change the webpage style
In HTML we can link css to the html file in the header like so:
<link rel="stylesheet" href="styles.css">
Where styles.css is the stylesheet file.
On your html tags for example
<div></div>
You are able to add classes which links these tags/containers to a specific style in your style sheet.
For example In HTML:
<div class="myclass"></div>
the class "myclass" is the linker towards this in your stylesheet:
.myclass:
color: red;
the full stop signifies that you are linking this to a class in the html, you can also do this with id="myid" and using a # instead of full stop, however i prefer to keep my ID purely for scripting use and classes for styling
Read more and learn a bit more about this at w3: https://www.w3schools.com/html/html_css.asp
Html elements and class attributes are two different things. Both can be targeted using CSS.
For example:
<html>
<body>
<div class=“name-of-class”></div
</body
</html>
There are three html elements (html, body and a div). And the div has a class attribute of “name-of-class”.
You can target the elements as well as the classes with css:
body {
background-color: black;
}
.name-of-class {
width: 200px;
height: 200px;
background-color: yellow;
}
To target the elements simply write the name of the tag without brackets. And to target the element with the class add a period before name of the class.
If you change an element or class name on your HTML, make sure to update your CSS styles or file to match.
Hope this helps, if you still have doubts paste some of your code to give it a check out.
I'm trying to recreate this table in HTML5. It doesn't have to look perfectly like this, just close enough. I don't have access to the CSS file. Grateful for any advice on best practice.
Thank you.
Options you have:
Three options, from worst to best:
Style all HTML <table> elements manually using inline styles such as
<table style='width:80%;margin:auto;'>
This is not at all recommended but will overwrite almost all CSS defined styles.
Use a <style> tag to set styles in the header of your HTML file, which in effect is having an inline-CSS stylesheet within your HTML document.
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
table tr th {
color: orange;
font-weight: bold;
}
</style>
You should note that the <style> markup should come after the styles sheets have been defined (see example above) otherwise the external stylesheets will overwrite your <style> elements (because they're loaded after it).
Use another style sheet for this specific table element. In order to minimise overwrite and maximise focus you can define the table with an id and your style sheet will simply use that id reference.
HTML Body:
<table id='mytable'>....</table>
CSS Stylesheet file:
#mytable tr td{
background-color:#ccc;
}
etc. etc.
HTML Head:
<link rel="stylesheet" type="text/css" href="existingStyleSheet.css">
<link rel="stylesheet" type="text/css" href="myTableStyle.css">
As long as your own style sheet is applied last, (as exampled) after the current style sheets, it's rules will usually overwrite the already set inherited rules. More so if the styles are applied via an id reference (rather than a class).
Recommended: Make a new Style sheet and attach it last to your HTML document.
Best practise is NOT to use inline styles and to use external style sheets uniformally, referencing elements as specifically as possible.
Response to Question comments:
If you can't access the <head> of the HTML document then you have to use style inline tags. If these tag effects are being overwritten then you should check the exact rules that are over writing them, check for the !important marker and apply this same marker to your own inline CSS styles:
<table style='border: 1px solid #000 !important;'></table>
The above should not be able to be overwritten by anything, but other CSS rules can interfere, such as !important border declarations for <tr> or <td> elements can look like they're messing up the table border, etc.
This may also be a very useful read for you
Use <style> tag to write CSS inside your HTML, or use inline CSS (paragraph 'Inline Styles')
I have a div located on a page. The issue is that it inherits global styles form a style sheet (Stylesheet A) such as global ul and table styles however, I would like this single div not to do so. I require the div in question to only obtain its styles from another stylesheet (stylesheet B). Currently they are clashing.
Is there any way to do this without having to touch stylesheet A in any way? This is because stylesheet A controls all the major styles of my site and the site is big enough that a change is likely to break something. The div in question holds unrelated data to the site and therefore does not require stylesheet A.
I am using javascript Prototype if that helps? No Jquery please :)
What about using an iframe? is this a valid solution and how would it work?
All help is greatly appreciated.
Perhaps the easiest way to do this would be to simply figure out every style attribute that div inherits from stylesheet A, then manually override those styles with stylesheet B.
If you wanted to put the div into an iframe, that should work as well. You'd need that div to have its own HTML file, hosted on the same domain as the main page (otherwise you'll run into security issues). Link to stylesheetB in the div page, and it would work. You'd run into a few problems, though, in styling the iframe. Since you can't read CSS properties in child documents from a parent document, you'd have to make the iframe a fixed width and height, which is limiting in many scenarios. I guess you could let the iframe scroll, but that might not be want you want either.
I think the best way to do this is to use Chrome Inspect Element, or Firebug in Firefox to look at the CSS inheritances the div is receiving, then
Any repeated styles will always apply the last one read.
Suppose you have this style: .class { background-color: red; } in your stylesheet A, and this one in B: .class { background-color: blue; } .
So, if you are calling your stylesheet A before B:
<link href="sheet_a.css" rel="stylesheet" type="text/css" />
<link href="sheet_b.css" rel="stylesheet" type="text/css" />
Then the style applied will be .class { background-color: blue; }, because it's the last one the browser read.
Now, if this is not working (if your stylesheets are being called in a different order, or the style in A is more specific than the one in B, so A is still being applied), you can use the !important tag.
.class { background-color: blue !important; } will overwrite the style in A, as long as it doesn't have !important also in the original one.
If it's only one element you want to change, you don't necessarily need a new stylesheet. You can have the new style between <style></style> tags in the html head, or inline in the element ( <div style="background-color: blue;"></div> ). Inline elements have more relevance than those on external sheets.
You can use inline styles on the html structure or you can add !important on the rules that you want on stylesheet b to override styles on stylesheet a.
For example on stylesheet b you would do the following:
.element {background:red !important}
This is the problem in a nutshell:
I want to apply the style vertical-align: top to every <tr> in a table, without manually applying the style to every row.
I have to use inline CSS because I'm on a wiki, so I can't edit
the external style sheet, or edit the <head> to embed a style.
When I add a style attribute to a <table> tag, it appears this style is not passed on to its child elements. (I can see how this is nearly always a good thing.)
I can't use <style><!--...--></style>, because that is not a permitted tag on MediaWiki pages.
Should I resign myself to adding style="vertical-align: top to every <tr>, or is still a solution I am overlooking?
EDIT: Removed a lump of background info, in order to limit the question to what the question title suggests it is about.
Can inline CSS apply to child elements nested in the styled element?
Not directly.
Indirectly, only if the child element has that-property: inherit set in its existing stylesheet.
I was interested in this question from a different context, specifically for styling html emails. Since css can't be added to the head of an email in gmail (believe it or not) the only way to consistently apply email styles is inline.
The answer to this question is no, there is no acceptable way to circumvent the problem in this or any other context that I'm aware of. When approaching a problem like this it is helpful to think about whether the style that you are trying to apply should be an "exception" or a "rule", i.e. if 90% of your tds are vertically-aligned top, you should just apply the style as a rule and go through and correct the 10%. When doing this it's important that you clearly specify your exceptions, preferably with a comment block that references the "rule".
For full reference on what css is supported and where this is very helpful: http://www.campaignmonitor.com/css/
Im not familiar with Wiki's but can you create a class and apply a style to all child nodes in that class?
So ...
<style type="text/CSS"><!-- SomeClass tr { vertical-align: top } --></style>
<table class="SomeClass">
</table>
Worth a try?
Use following :
<style type="text/css">
table tr td {
vertical-align:top;
}
</style>
So I'm working on a project that accepts HTMLs as inputs and returns them as outputs. All of the HTMLs I get as inputs have all of their text in divs and style sheets that dictate the style for each div based on the class attribute.
To better visualize things, and to see how my project is coming along, I would love to output the input HTMLs color coded to specifications I give them. It's really easy for me to modify the body of the HTML, but difficult to deal with the style sheet. All I'm looking for is something simple to override the color property of the style sheet. It can be hacky, as this is just internal code for temporary use. I just want something simple that works. Is there an easy way to override aspects of CSS classes in the body of a file?
[EDIT] I want to provide an example to better explain what I'm looking for. An example of the style sheets I have at the top of my page (that I want to override) is:
.style21{vertical-align:top;font-size:13px;font-family:Helvetica;color:#000000;}
An example of a div whose color I'd like to change is:
<div style="position:absolute;top:432;left:422;color:#ff0000;"><span class="style21">relating to</span></div>
My problem is that I can't override the color specified in the css. As you can see in the above example, I'm trying to do it in the specific style within the div, but that isn't working. [/EDIT]
Either use the style attribute to add CSS inline on your divs, e.g.:
<div style="color:red"> ... </div>
... or create your own style sheet and reference it after the existing stylesheet then your style sheet should take precedence.
... or add a <style> element in the <head> of your HTML with the CSS you need, this will take precedence over an external style sheet.
You can also add !important after your style values to override other styles on the same element.
Update
Use one of my suggestions above and target the span of class style21, rather than the containing div. The style you are applying on the containing div will not be inherited by the span as it's color is set in the style sheet.
Id's are prior to classnames.
Tag attribue 'style=' is prior to CSS selectors.
!important word is prior to first two rules.
More specific CSS selectors are prior to less specific.
More specific will be applied.
for example:
.divclass .spanclass is more specific than .spanclass
.divclass.divclass is more specific than .divclass
#divId .spanclass has ID that's why it is more specific than .divClass .spanClass
<div id="someDiv" style="color:red;"> has attribute and beats #someDiv{color:blue}
style: #someDiv{color:blue!important} will be applied over attribute style="color:red"
you can test a color by writing the CSS inline like <div style="color:red";>...</div>
You can put CSS in the head of the HTML file, and it will take precedent over a class in an included style sheet.
<style>
.thing{
color: #f00;
}
</style>
Have you tried using the !important flag on the style? !important allows you to decide which style will win out. Also note !important will override inline styles as well.
#example p {
color: blue !important;
}
...
#example p {
color: red;
}
Another couple suggestions:
Add a span inside of the current. The inner most will win out. Although this could get pretty ugly.
<span class="style21">
<span style="position:absolute;top:432px;left:422px; color:Red" >relating to</span>
</span>
jQuery is also an option. The jQuery library will inject the style attribute in the targeted element.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("span").css("color", "#ff0000");
});
</script>
Hope this helps. CSS can be pretty frustrating at times.
if you can access the head add
<style>
/*...some style */
</style>
the way Hussein showed you
and the ultra hacky
<style>
</style>
in the html it will work but its ugly.
or javascript it the best way if you can use it in you case
Eli,
it is important to remember that in css specificity goes a long way. If your inline css is using the !important and isn't overriding the imported stylesheet rules then closely observe the code using a tool such as 'firebug' for firefox. It will show you the css being applied to your element. If there is a syntax error firebug will show you in the warning panel that it has thrown out the declaration.
Also remember that in general an id is more specific than a class is more specific than an element.
Hope that helps.
-Rick