I want to include normalize.css in a HTML email. However various tutorials advise that all css should be inline, as some email clients ignore linked styles in the head. In such case how can I include normalize.css?
The only reason I want to use normalize.css is so that it takes out the padding around the edge of the browser.
The only reason I want to use normalize is so that it takes out the padding around the edge of the browser.
That's just:
body {
margin: 0;
}
Go read the source code for Normalize, line 19:
https://github.com/necolas/normalize.css/blob/master/normalize.css
You can just inline that one bit, where appropriate.
Put your css in <style> tags.
<style>
body {
padding: 0;
...etc;
}
</style>
Related
Okay So I made a template with some CSS & HTML. However, if you look between the menubar, there's a bunch of white space. Also the content and sidebar are weird. If you look at the top there's a bunch of padding at the top but I didn't apply any padding anywhere! Help!
Link to site http://techtubecentral.com/demo/
Try this, Hope it will work
<style type="text/css">
ul{
margin:0px;
}
</style>
Padding and margin is specified by default. It is part of what was originally generated by the W3C consortium. All you need is a CSS Reset sheet.
http://www.cssreset.com/
You can attach this to your site as a separate file, for example reset.css. Or you can jsut copy paste the reset code to the top of your styles.css file.
Naveen's solution is correct b/c there is default margin coming from the browser's style sheet. Add
* {margin:0; padding:0;}
as the first line in your style sheet - it's a simple reset of these properties on all elements, and you will have no more trouble with "phantom" paddings and margins cascading down from the browser stylesheets.
When using a tag you will find that the browser will automatically adding a margin and sometimes padding that may not be needed.
Try adding margin: 0px; and padding: 0px; just as good practice.
I am new to css and web design so please be gentle ;-)
I was wondering if it is possible to define the background of a page (i.e. what color the screen is) without referring to the tag. So not doing the typical:
body { background-color: #fff; }
I need to do this since I am writing css to stylize our login page, but only have access to the template html to be inserted into the page body. So my html looks something like this (very simplified):
<div id="loginpage">
<div id="title"/>
<div id="content"/>
</div>
I couldn't find any answers online since this seems to be an unusual way of doing it.
So: Is this possible, if yes - how?
How about:
<div style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #999;"> </div>
(put it above all your other html, and maybe use z-index: 1; if necessary)
You can use the :root selector if you don't mind about losing IE6-8 support.
But have you tried targeting body or html, in spite of the fact that they're not in the code? They still get inserted into the DOM.
In my opinion you need to discuss this with your team members and a superior. If you find a work around you may come to work tomorrow and find that someone has added
body {
background-color: #not-white !important;
}
after your code and your next question is how to override !important in css.
On a side note, whoever made the restriction of not giving you access to css/main template should really not do that. If you continue working like that you'd end up with a lot of workarounds that will likely bite you.
Regardless of the restiction you could add a style tag like so:
<style type="text/css">
body {background-color:#fff;}
</style>
which would take priority over the original body rule (assuming the body flow is not tampered with). This would be safer than setting background colour for * which would have unexpected side-effects. You may also want to set it through the shorthand background:#fff; which will reset any background image etc. previosly applied.
Update
I've just seen your comment
I did do that first (just target body) , but was friendly reminded by
my team members to only style elements that are actually on the page I
am working on... (which is not the case for body).
Assuming it's a valid argument and not some sort of petty tyranny going on, maybe it could be appropriate setting the background on the loginpage element? You could reference elements by ID like so:
<style type="text/css">
#loginpage {background-color:#fff;}
</style>
I am using a CMS that has been poorly configured with horrific CSS (e.g. H1 is about 12px). How can I load my content without it being infected by this diseased CSS?
I was considering an iframe, but I would want to keep it in the CMS if possible. Would frames work?
If you can keep your content within an element with a specific class or id (e.g. <div class="content">, then you could adapt a reset stylesheet (like Eric Meyer’s) to reset everything within that class:
.content div, .content span, /* ...and so on */
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Then write all your styles prefixed with that class too, e.g.
.content h1 {
font-size: 3em;
}
If you’d rather reset everything to the default browser styles (rather than the unstyled settings you get with a reset stylesheet), you could adapt Firefox’s built-in html.css stylesheet in a similar way (i.e. prefix all its selectors with the class/id on the element containing all your content).
Bit of a drag, but it might be less of a faff than frames. (I assume the CMS generates your HTML, so it’d be harder to change that to use frames than to work around their issues in your CSS file.)
You might consider changing your CMS — they’re meant to reduce the amount of work you have to do, not increase it.
Is there any possibility to load your custom css classes? You should load your CSS classes after CMS's CSS classes and override them.
I'm creating a snippet of HTML to allow others to add functionality to their web sites (it is a voting widget). I've created a snippet of HTML like this:
<div>
[implementation of my voting widget]
</div>
I spent a lot of time to get the formatting of this widget just right. It works great in a sample web page that does not import a style sheet.
When I add the widget to a page on a Drupal site, however, the imported CSS wreaks havoc with my careful formatting. I'd like my HTML snippet to ignore all CSS style sheets. Is this possible?
Regardless of whether it is possible, is there a better solution?
Instead of relying on your CSS styles not being overridden by any imported stylesheets, you should give your widget a unique id and make sure all of your styles are a derivative of that id making sure to implement any styles you don't want to be overriden (margin, padding, etc):
<div id="votify">
[implementation of my voting widget]
</div>
#votify {}
#votify ul {}
#votify div span {}
/* etc */
You could try using a reset stylesheet:
http://meyerweb.com/eric/tools/css/reset/
Of course, you don't want to overwrite the page's CSS but you can get an idea on how to reset the styles your widget uses and use your personal CSS. So something like...
#voting-widget * {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I hope this helps.
Without using a style sheet I think you'd have to explicitly set all margins, padding, fonts, etc in the style attribute so it takes precedence over any CSS sheets that there are.
Reset your widget CSS to default values, and THEN add your formatting code. This will clear out any page styles so you can work from a clean slate.
div#widget, div#widget * {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
/* ... whatever other reset code ... */
/* ... then add your own code ... */
color: red;
}
I wonder if there are any possibility to reset css in middle of page? I have main style, but in one area I would like to use style from tinyMCE generated source.
So in tinyMCE source are elements which in editor looks like default browsers style (or like user wants), but in other pages uses style from my main css and from it self inline style. So I get mix of both ant it looks crappy. And I have no idea how to reset main style,.. without iframes.
Thanks
You mean, have a set of CSS rules to apply to the top part of a page, and a reset set of rules apply to the rest? No way, can't be done, sorry.
My approach to stuff like this is usually to embed the problematic content in a wrapper <div class='wysiwyg_html'> and then to set specific styling instructions for that content:
.wysiwyg_html p { display: inline }
.wysiwyg_html a { text-decoration: underline }
.... and so on
If you want, you can apply a whole reset stylesheet to everything inside wysiwyg_html that way.
thats pretty easy, i will show this with the "poorman's" reset but the others (eric mayer's ect.) works the same way:
* {
padding: 0;
margin: 0;
}
div {
padding: 50px;
}
#content *{
padding: 0;
margin: 0;
}
now your div inside the #content should have the reseted padding: 0; again, because an id selector wins over an element selector, so the only thing you need to make sure is that your secound reset has a selector that outweighs the others (but dont use important!).