Add width and height attr's to images and or css - xhtml

I'm working with wordpress and have been removing the width and height attr's when adding images as they are added automatically, however I have been sizing the images via stylesheet:
.foo img {
max-width:500px;
width:100%;
}
After doing a little reading it seems the inline attr's help with page loading times so I was wondering:
Should I use one or the other or both?
Will the inline attr override the css?

They should be added inline to help with page loading times, as you mentioned. Inline styles will win against external style sheets, but style sheets will override height and width attributes.
In other words, <img height='300' width='300'> can be overridden in an external style sheet, but not <img style='height:300;width:300'>.

You should use the external sheet if you want all images class foo width the same attributes. The width pixels determine the resolution, the width percentage determines the stretch. Inline will override the external sheet.

External style sheets are used to organize your design and can be cascaded. The advantage of using external style sheets is that you can make changes to one or more independent style sheet files without having to modify inline attributes in the main markup. In this way, you can easily change style properties.
You can use inline styling that will override style sheet properties in most cases but the syntax and format should be correct.
It really depends on what you want to do but I usually prefer external styling as this allows a designer to design (via external style sheets) independent of the developer.
Please refer to http://www.w3schools.com/css/css_howto.asp

Related

Does the web browser stylesheet override all other CSS styles?

I just wanted to know, does the web browser style sheet override all other CSS styles or is that not true?
There is a specific hierarchy in css stylesheets. Normally your custom styles.css should override all the webbrowser styles.
Yes it does,as long as you use the correct path's
Or specify for which one are you talking about e.g. the one that you will use to edit or something else?
That is false. You can have outside style sheets linked and have inner style code and they will both work. But if there is content that is styled in both outer and inner CSS, then inner CSS will override outer CSS linked pages.

bootstrap css how to resolve conflict

I saved and am using the bootstrap css but it conflicts with my main css.
it has tags body, html, a, img, p... and my css loses configuration
how can I use the bootstrap css without colliding?
thank you
Try importing your custom CSS after Bootstrap CSS.
In CSS, the “!important” suffix was originally intended to provide a method of overriding author stylesheets. Users could define their own “user stylesheets” and could use this suffix to give their rules precedence over the author’s (website creator’s) styles.
Unfortunately, and quite predictably, its usage has spread massively, but not in the right direction. Nowadays, it’s used to counteract the pain of having to deal with CSS specificity, otherwise known as the set of rules which dictate that “div h1 a” is more specific selector than “div a”. Most people that use CSS on a daily basis don’t know enough about CSS specificity to solve their problems without using the “!important” suffix.
1.over ride those styles in your css file by using !important property. bootsrtap css either override or extend your css with bootstrap css so if you want to override entire css of some class best to use !important property.
2.if your are using script in your code so its very easy to differentiate the css styles.
Try combining into one CSS, multiple CSS slows down the sites.
Even, Bootstrap has its own body,html, etc tags. You have to edit them or delete/comment them. So it avoids conflicts.
Generally, the last CSS property will be applied, so if you put your body, html etc at the end of Bootstrap.css, that might work, but not recommended.

Apply media queries in a style attribute (not tag, but attribute)?

I'm experimenting with responsive SVG files, and really want to select the appropriate image independently from the HTML page.
I want to have a setup, where I can pass in an SVG to an img tag, without any further dependency. Then have the SVG rendered before it gets returned in order to display.
As far as I noticed, if I put a style tag into the SVG, then it gets evaluated after the page has loaded, and can access page's DOM elements only, not encapsulated "in-SVG-only" elements. The only way to evaluate styles before loading the page is to put CSS into a style attribute of the entire svg tag. And having media queries there would be awesome.
Does this make sense to you? Is it possible at all?
Inline style attributes don't support media queries.

inline css problem

I have the following script:
http://jsfiddle.net/oshirowanen/8mQ7x/1/
Which works fine, but as soon as I change to external css to add the background image using inline css methods, it stops working, as demonstrated here:
http://jsfiddle.net/oshirowanen/8mQ7x/
I need part of it to be inline css because the html is dynamically generated. I am trying to create many generic icons using different images for each icon, but using a generic css external file to cause the mouse over effect.
Why does this stop working when inline css is used to add the image and how can I get this to work?
Because elements style CSS rule has higher priority than other CSS rules. By background in element style you are rewriting not only default background, but :hover too.
You should rewrite only background-image. Example: http://jsfiddle.net/8mQ7x/3/

How do I change the CSS style for a YUI tooltip?

I see on the YUI page an example about changing the style for panels in general. But I'd like to change the style for all the tooltips (and not other panels) on my website. All my tooltips are not in one certain DIV, so changing the YUI panel styles within a div won't work for me.
Any tips?
It looks like YUI Tooltips add the class yui-tt to all tooltips. You could style just your tooltips by using that as a common ancestor, i.e.
.yui-tt .bd {
/* Styles here... */
}
I load the configurator's style sheet (with the default skin (sam.css) already included) in the head of my app followed by my own styles, so they are ready for immediate rendering. However as you mentioned, the YUI loader will subsequently override your styles.
If you load a lot of modules or make a lot of style declarations and don't want to write !important after every one, add the option
skin : {defaultSkin: ''}
to your loader configuration. This will also save a little bit of bandwidth for your users and lead to faster rendering.
Also note, that IE6 doesn't recognize !important so it won't work for that browser.
Hope that helps.

Resources