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')
Related
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>
I am building a pagination from NG-Bootstrap pagination component. In that I want to change (actually remove) some CSS which is declared in NG-Bootstrap library. How can I do that without changing the NG-Bootstrap style sheet.
As shown in the above picture I want to ignore padding-left:0 which is declared in .pagination. I don't need to add another value for it.I just want to ignore it. Is it possible ... ?
To answer your question, no, you can't ignore a CSS styling rule. But you can override it without altering the NG-Bootstrap style sheet.
You can attach CSS rules to HTML documents in a few different ways, here are the most common:
Link to an external stylesheet by adding a <link> tag to the <head> section of your HTML document:
<head>
<link rel="stylesheet" href="mystylesheet.css" />
</head>
Embed the CSS into your HTML document with a <style> tag:
<style>
background-color: blue;
</style>
Add the CSS inline to individual HTML elements directly with the style attribute:
<div style="background-color:gray;"></div>
And depending on which way you do it, different styles will be applied depending on their precedence. Inline takes precedence over embedded, and embedded takes precedence over a linked stylesheet.
For example, if you specify a gray background on a particular element inline, and specify a blue background on that same element in the embedded style section, inline wins and the background will be gray.
So for your situation you could either embed the CSS or put it inline on the elements you want to change. Doing either of those will override what's in the NG-Bootstrap style sheet without altering it.
I have a CSS cascade, of course all the components use the last one, but there's a specific component that I don't want it to use the latter CSS rules (business-frontpage.css), instead use the rules from the bootstrap.css stylesheet.
Is this possible? How can I do it?
These are my CSS styles:
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme/business-frontpage.css">
I want the following element to use only styles from the bootstrap.css, not the ones from the theme (business-frontpage.css).
<datepicker></datepicker>
After reading the comments, it looks like you have two options. You can take the styles from the bootstrap.css and either:
Create a custom style sheet
Copy the datepicker CSS
Paste it into the new stylesheet
Then place the external stylesheet after business-frontpage.css
Or
Copy datepicker CSS
Paste the CSS into a <style></style> in the <head></head> of your page
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}
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