This question already has answers here:
Image width/height as an attribute or in CSS? [duplicate]
(12 answers)
Closed 4 years ago.
Fairly new at this, but what’s the benefit to defining image height/width in a linked Css over defining it inline attribute of the img tag? Everything I’m seeing points to defining the img size in Html as better since the browser will load the page faster with the proportions in mind without having to track them down elsewhere, but the whole point of separating the two is to keep things like sizes and colors outside the main html and clean up everything.
Thanks!
Using inline style is hardly ever a good approach.
Using classes allows other developers to modify your code much easier. Also managing properties via classes is a standard everyone uses. Nobody will look for them coded inline.
There are really many reasons why you should define your styles somewhere else than inline.
You should take a read here and search stackoverflow/google as this question has been asked many times before.
I would suggest:
1) Define the original size value in HTML om the img tag.
2) Add an "id" to your img tag in HTML
3) With the "id" tag, add it as reference in CSS and adjust the size based on %.
The benefit of doing it like this is that you will control the size from CSS but anyhow have a standard size defined in HTML.
Related
This question already has answers here:
How to apply CSS to iframe?
(28 answers)
Closed 6 years ago.
I tend to apply my own custom CSS documents to certain sites, since I prefer dark backgrounds with light text as opposed to the vice-versa standard, and very few sites have a "dark mode" or otherwise cater to that preference, this site itself being an excellent example.
However, I was recently stricken by something odd - an entire HTML document nested inside of another one. (I now understand this is achieved via use of an <iframe> and so it's nearly impossible to style without JS or something) I can only apply the custom stylesheet to the parent document, though.
So, long story short, I'm wondering what sort of selectors I would have to use to target elements of the nested document only - for example, selecting the <body> of the nested document. Would I refer to a body in a html in a !DOCTYPE that is also in a body? What about recursively nested documents?
Whether this nesting thing is poor practice or not does not immediately concern me -- there seems to be a valid use case for it and, regardless, I'm not building the site. What I DO care about is how to add styles to it externally.
Assuming you literally have a document that has been 'injected' into another document, you would simply target it with the expected identifiers:
To target elements unique to the sub-document:
body body [element] {
}
To target elements that exist within both documents, you would just use the standard:
[element] {
}
The above would apply the style to any desired element that is contained within either document.
Please be aware that you cannot style an iframe inside a document with CSS -- you'd either have to find a way to manipulate the iframe's CSS itself, or use JavaScript to target the desired elements with document.getElementById().
Hope this helps! :)
This question already has answers here:
What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?
(8 answers)
Differences between assigning attribute, style, and class in div
(3 answers)
Closed 7 years ago.
What is the difference between height="50" VS style="height:50px" ?
And height="50" VS style="height:50"?
I am always confused by this.
Presentation-related attributes such as height="50" where the original way to specify presentation details of HTML elements.
However, they have since been deprecated in favour of CSS, via the style, class and id attributes, which give a lot more flexibility that the original attributes (at the very least because CSS can be extended without touching the definition of HTML itself, but of course also because you get the "cascading" part, as well as multiple units, media-queries, and much more).
You should thus generally avoid such attributes in HTML.
The only exception is HTML in e-mail, as many clients support those attributes but not the CSS versions.
Note that you should generally avoid style attributes as well, in favour of separate CSS, and class and/or id attributes. This allows you to completely separate the HTML and CSS, and makes it easier to change the presentation of your page without touching the HTML (or the code that generates it).
Also, in CSS (and thus in style attributes), you must specify units (except for 0), so height: 50 is not valid, you should use height: 50px (or another unit).
Using style attribute you add rich CSS to the element. Some styling can not be added using HTML attributes. For example <div style="background-color: #ff00ff; float: right"> is impossible with plain HTML attributes.
This question already has answers here:
Are custom elements valid HTML5?
(12 answers)
Closed 7 years ago.
Is it possible to use custom tags in html such as <g></g> to group text? I then want to apply styling to these custom tags via CSS that accomplish the same thing as in the fiddle with the rounded rectangles and blue text.
The reason all of this is needed is because the first way I have it set up in the fiddle uses generated content - which isn't part of the DOM so the blue text can't be highlighted/selected so that you can copy/paste it.
The solution I came up with was to make the generated content not generated, but merely distinguish the tags from the actual content by a delimiter, in this case, the | character.
So I need a way to produce the same output as the original, but with the new syntax, so that way the text can be copyable.
http://jsfiddle.net/xa3apsdc/20/
Do <span class="g"></span> instead and problem solved.
On custom tags older browsers cant support it, but you can handle them as other not supported (ex. canvas) tags, so if you really need it, you can do it: http://jsfiddle.net/xa3apsdc/22/
You will encouter some problems anyway: custom tags not working in ie8
Key is to set display rule to element: display:block; or display:inline-block and you are set to go.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
So I was wondering what's better to use - HTML tags or CSS properties?
We have both HTML tags and CSS properties for same purpose in various cases, like in <img> tag one can use width and height html values to assign them or can use css properties for same purpose.
Then, to center some text, or some other contents too, one can use <center>Some text here</center> or css property text-align:center;
To make some text italic, one can use <i> or <em> html tag or use equivalent css properties. (Though <i> has a different meaning in HTML5, but still it's used.)
There are many similar cases. So, what's more acceptable and better to use?
If it's presentation - use CSS. If its structure/semantics - use HTML.
To take the italic example, there are lots of reasons for wanting text to be rendered in italics. Let the reason define the markup you use (which could be <em>, <cite>, <dfn> or many other elements), then add CSS as desired to get the presentation you want (taking common browser default styles for the elements you use into account).
In this age of HTML5, I would opt to not use any HTML attributes that were already marked deprecated for its predecessors HTML 4.01 and XHTML, such as width, border, height etc.
For layout, use CSS, for semantics, use HTML. The border attribute serves no other purpose nowadays than enable legacy IE5.5 sites to still work.
As for the questions about <i> and <b> I'd recommend reading up a bit on why you should only write semantic HTML, for example here.
More general reading about why HTML is not for layout/presentation can even be found on Wikipedia.
To give some concrete answers without the more general principles:
HTML5 says not to use <centre>. It is marked as obsolete and non-conforming. Here's a link to the full list of such features.
Use <i> for most inline italics. If you don't mind using both, use <em> where the italics indicate emphasis :). If that seems like too much effort, just use <i>. Most people do, and (because of this) in practice you're unlikely to see much difference in behaviour. It's good to use markup for inline italics, so it can degrade gracefully if CSS support breaks - this could be more common than you think, e.g. when copying+pasting from some browser.
The most obvious exception would be if your design used an italic font for headings. For that case you should use CSS.
<img width> is probably subject to argument... but in general much of the layout in your design should be in CSS. So you want to put the width of images in CSS rather than HTML, to keep these layout details together.
The benefit of CSS is that you can aply classes to various elements you wish have the same behaviour.
If for instance you suddenly want your images to be 10px bigger in width and height, in CSS you change those values in only one place, whereas in HTML you have to go through all your code changing the values! :)
This topic is quite debatable in my opinion. HTML tags and its attributes have a semantic meaning behind it where as CSS is entirely focused on the layout and styles. HTML5 adds a new brand semantic tags.
Tags like <strong> have much more meaning then font-weight:bold. The css property only makes the text appear bold, but the HTML tag <strong> strengthens the content (You can see the difference through a text reader).
However, new generation of web focuses more on the style than on the HTML structure, so there is not a fixed rule on how it should be followed. So I suggest concentrating one factor and that is manageability. Select the option which you can manage and maintain easily.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Should global css styles be set on the html element or the body element?
There's some really interesting discussion about applying CSS to <html> and <body> in order to get some cool effects — like two background images, one transparent (but CSS3 may render that useless).
However, for the standard cases, which element is most appropriate to use for appling page-wide CSS to?
Perhaps there's even some CSS properties that are better suited to one selector over the other? Thus, split among the two?
(This concerns things like cross-browser compatibility, as well as proper semantics according to spec.)
And we can also bring the wildcard * { } selector into this discussion.
Following Verandaguy's answer, http://www.w3.org/Style/Examples/011/firstcss.en.html applies the style to the body. It doesn't say why, but, that's what it says.
I believe that the W3C recommends that you apply any page-wide styles to the <body> element.
For creating a site with several pages it is best to use the CSS as an external linked page. That way each page can have access to it. But for a single page to page, it would be a "cool effect" on some browsers. But in the same effect other computers might see those effects in a different and less rendered method. Stick with uses the CSS mostly as an external link, and use style tags only as needed, or leave a note on the page of how and what browser they are supposed to view it on.