I implement the Eric Meyer's reset.css in my website, and works great, but it was a little problem. As this a CMS users are free to format the content of their articles as they want and the reset CSS resets the formatting of their text.
Any ideas how we can prevent reset.css inheritance to propagate to the dynamic content?
All you input is more than welcome.
It will always propagate (that's kind of the point of reset.css :)), but if you're not already doing so, you should of course make sure that reset.css is the first stylesheet linked in your pages - any custom styles will then override the reset styles.
If the problem is that the styles are "too reset" and you'd like a more sensible set of defaults (e.g. weighted font sizes, margins, line-height etc.) for your dynamic content you could create your own baseline CSS styles and apply them only to the dynamic content area using an ID selector for example.
As Eric Meyer himself says on his CSS Reset page:
The reset styles given here are
intentionally very generic. There
isn't any default color or background
set for the body element, for example.
I don't particularly recommend that
you just use this in its unaltered
state in your own projects. It should
be tweaked, edited, extended, and
otherwise tuned to match your specific
reset baseline. Fill in your preferred
colors for the page, links, and so on.
In other words, this is a starting
point, not a self-contained black box
of no-touchiness.
By the looks of it, you're finding that the CSS Reset is doing a bit too much for you. I would therefore tweak it for the items you're experiencing problems with. For example, as you're experiencing problems with tables, I would either remove the parts of the CSS reset that target tables, thus leaving it at the browser default, or add extra CSS of your own after the reset to specifically style tables your own way.
I've had problems like that, my solution for that was to wrap the dynamic content generated by WYSIWYG editors, into a div with a unique class, where to that class I've created a reset style sheet with standard attributes!
Ex.:
div.wrap_to_prevent {style, style,
style}
div.wrap_to_prevent input,
div.wrap_to_prevent textarea,
div.wrap_to_prevent h1 {style, style,
style}
.
.
etc
Basically, I've used a reset style sheet, but preceded all css style's with the class of my div, that way, it just affects the code inside that div, thus creating a brand new set of rules for that content.
Since 90% of my projects use WYSIWYG editors, with this solution I was able to work around that same problem...
Can't tell if this works for you, but give it a try!!
Does the CMS create inline styles? If so these should override the styles from the reset.css file.
If the CMS includes it's own .css file, make sure that it appears after the reset.css file in your generated html output.
If you need to use the css reset, the only reliable way to work around this is to use an iframe element for the dynamic content. The main problem with iframe s is that they can't be automatically adjusted in height according to the inlying document's size. If you can work around that, I'd say this is the most hassle-free approach.
Related
I have a piece of HTML that I need to modify and I need to keep the changes minimal (out of CSS). All I need to do is to hide a table cell until something happens. So I went ahead and added the style tag as shown below:
<td style="display:none;">
However, this causes the style class to reset, e.g. the cell which used to be vertically center-aligned is now top-aligned, and so on. My understanding is that this is because the style attribute overrides the default CSS stuff. Is that correct? If yes, how can I prevent it? I just need to add the display attribute, not reset the rest of style attributes.
I spend some time searching online and noticed that HTML5 has introduced something called scoped style. Is there an HTML4 easy-to-do equivalent for it?
It might be because doing display:none remove the node from the DOM display calculation. You no longer have a placeholder for that cell in your table. You might try visibility:hidden, which will have the DOM element keep its place in the document rendering but just not be visible.
Try visibility:hidden; instead of display:none;
Let me know if that does the trick.
What is the preferred method for setting CSS properties?
Inline style properties:
<div style="width:20px;height:20px;background-color:#ffcc00;"></div>
Style properties in <style>...</style> tags:
<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>
Style rules can be attached using:
External Files
In-page Style Tags
Inline Style Attribute
Generally, I prefer to use linked style sheets because they:
can be cached by browsers for performance; and
are a lot easier to maintain for a development perspective.
However, your question is asking specifically about the style tag versus inline styles. Prefer to use the style tag, in this case, because it:
provides a clear separation of markup from styling;
produces cleaner HTML markup; and
is more efficient with selectors to apply rules to multiple elements on a page improving management as well as making your page size smaller.
Inline elements only affect their respective element.
An important difference between the style tag and the inline attribute is specificity. Specificity determines when one style overrides another. Generally, inline styles have a higher specificity.
Read CSS: Specificity Wars for an entertaining look at this subject.
Here's one aspect that could rule the difference:
If you change an element's style in JavaScript, you are affecting the inline style. If there's already a style there, you overwrite it permanently. But, if the style were defined in an external sheet or in a <style> tag, then setting the inline one to "" restores the style from that source.
It depends.
The main point is to avoid repeated code.
If the same code need to be re-used 2 times or more, and should be in sync when change, use external style sheet.
If you only use it once, I think inline is ok.
To answer your direct question: neither of these is the preferred method. Use a separate file.
Inline styles should only be used as a last resort, or set by Javascript code. Inline styles have the highest level of specificity, so override your actual stylesheets. This can make them hard to control (you should avoid !important as well for the same reason).
An embedded <style> block is not recommended, because you lose the browser's ability to cache the stylesheet across multiple pages on your site.
So in short, wherever possible, you should put your styles into a separate CSS file.
From a maintainability standpoint, it's much simpler to manage one item in one file, than it is to manage multiple items in possibly multiple files.
Separating your styling will help make your life much easier, especially when job duties are distributed amongst different individuals. Reusability and portability will save you plenty of time down the road.
When using an inline style, that will override any external properties that are set.
I agree with the majority view that external stylesheets are the prefered method.
However, here are some practical exceptions:
Dynamic background images. CSS stylesheets are static files so you need to use an inline style to add a dynamic (from a database, CMS etc...) background-image style.
If an element needs to be hidden when the page loads, using an external stylesheet for this is not practical, since there will always be some delay before the stylesheet is processed and the element will be visible until that happens. style="display: none;" is the best way to achieve this.
If an application is going to give the user fine control over a particular CSS value, e.g. text color, then it may be necessary to add this to inline style elements or in-page <style></style> blocks. E.g. style="color:#{{ page.color }}", or <style> p.themed { color: #{{ page.color }}; }</style>
Whenever is possible is preferable to use class .myclass{} and identifier #myclass{}, so use a dedicated css file or tag <style></style> within an html.
Inline style is good to change css option dynamically with javascript.
There can be different reasons for choosing one way over the other.
If you need to specify css to elements that are generated programmatically (for example modifying css for images of different sizes), it can be more maintainable to use inline css.
If some css is valid only for the current page, you should rather use the script tag than a separate .css file. It is good if the browser doesn't have to do too many http requests.
Otherwise, as stated, it is better to use a separate css file.
You can set CSS using three different ways as mentioned below :-
1.External style sheet
2.Internal style sheet
3.Inline style
Preferred / ideal way of setting the css style is using as external style sheets when the style is applied to many pages.
With an external style sheet, you can change the look of an entire Web site by changing one file.
sample usage can be :-
<head>
<link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>
If you want to apply a unique style to a single document then you can use Internal style sheet.
Don't use inline style sheet,as it mixes content with presentation and looses many advantages.
Inline CSS have more precedence than CSS within tag.
There are three ways to add CSS.
Read this article on w3school, very informative.
I'm trying to style a post on an internet forum that doesn't allow stylesheets, only inline styles. But it seems that inline styles don't get inherited by children, only the text immediately below (for instance using <h1> will remove the background color from the text). Is there any way to make it pass the styles down without having to add them to every node?
although #SimeVidas is right, I think his response was a bit quick. Some caution do is required. I updated his fiddle http://jsfiddle.net/fRpQ2/4/ to demonstrate.
If a specific property is declared in the stylesheet for a given tag, that value will NOT be inherited from the parent with the inline style. I guess this is what you are encountering on the forum post you try to style. Nothing to do about this without using style-tags or linked stylesheets. Just a lot of copying required in your case I'm afraid. You could also inspect the site and apply existing classes to your post, but that is only if you want to copy the styling they already apply wich i doubt is the case.
I would advice you to do some reading on the cascading order of styles if you want to learn more.
couldn't you just also define a <style> block if the forum parses html?
I want to know all the common practices in CSS, those things that you automatically put without really thinking on the Final website deisgn
Example:
body {margin:0;padding:0;}
ul {list-style:none;}
img {vertical-align:middle;border:0;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
table {border-collapse:collapse;}
td {vertical-align:top;}
Does anyone know where I can find a complete list of this kind of things?
The best thing to usually start with is a CSS reset. The one I usually use is http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.
The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.
In other words, this is a starting point, not a self-contained black box of no-touchiness.
Adding onto #Speed...
This is my favorite CSS reset to start most websites with: Eric Meyer Reset CSS.
Everyone suggests CSS resets, but they seem redundant to me.
I'd suggest Normalize.css, as it attempts to normalize CSS across browsers without getting rid of useful properties attached by default to elements like h1, h2, h3, ul, etc.
Yahoo have a nice selection: http://yuilibrary.com/yui/css/
Yahoo Reset
The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to built upon. With CSS Reset loaded, write explicit CSS your project needs.
CSS Base can complement CSS Reset by applying a style foundation for common HTML elements that is consistent for our browser baseline.
Yahoo base
CSS Base is an optional CSS file that complements YUI's core CSS foundation (CSS Reset and CSS Fonts). CSS Base applies a style foundation for HTML elements that is consistent for baseline browsers.
CSS Base may also be useful as a template for your own base file, or a snippets library for styling HTML elements.
I'm trying to add some Social share buttons (facebook, twitter, etc.) to a blog without using a plugin, and am having an extremely hard time getting them to align vertically, and I know it's because the Wordpress styles are interfering because I was able to get the buttons to work on non-WP pages.
Is there some way to create a div that tells the browser "don't apply ANY styles to this div other than the ones I declare specifically for it, and if I don't declare any, don't apply any."
Give the div its own class, something like socialButtons and then start by removing the margin, padding, border, and float
div.socialButtons{
margin:0;
padding:0;
border:0;
float:none;
}
In most instances, that should be enough. If not, you can progressively remove other styles.
Make sure you place this at the bottom of your stylesheet so that your rules take precedence over other rules.
You should use firebug (an addon for firefox) which will tell you every style applied to the div. then use inline css to set every value to its default. to find default values use the w3schools tutorial and look at the different attribute's pages. if you dont want to use inline css, you can make a class or id at the bottom of your linked css file (make sure it is at the bottom so it taks precedent over other styles).
You can reset the styles for that div to their default by specifying every key and its default value, and then restyle it to your liking (kind of like how the reset.css works if you've heard of it)