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.
Related
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.
This question already has answers here:
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed 5 years ago.
In Css we can genrally style all elements but I noticed that we can not style option element of a select using CSS. As far as I know Option is child element of select then what is possible causes that it don't let you style this element?
I've had reffered various answers on stackoverflow stating that You just can't style option. but I want to know exact reason behind it.
I've had reffered this link which says that option tag is rendered by OS and not by html. If so then why we need to specify option ? why it don't automattically render options.
Here is another link which shows how to style Select tag. But i want to know that why we can't style option? I don't want to know how to style select tag using CSS.
You cannot style the option element because it is rendered by the OS, not HTML. That is why it can't be styled via CSS.
You can of course use some plug-in that replaces select with regular HTML elements that can be styled.
There a duplicate method for this... its correct dropdown not accept the styling so you can make the thing which look like dropdown and give styling to that thing..
Here is the link of this explaination check Answer7
css style on select option
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:
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.
This question already has answers here:
Closed 11 years ago.
Possible Duplicates:
Is adding CSS rules outside the Header possible?
Declare CSS style outside the “HEAD” element of an “HTML” page ?
I'm working on a CMS which doesn't permit me to edit the CSS, nor do I have access to the head to add a link to my own CSS file.
I do however have access to certain html zones of the website and would like to declare my CSS link inline with the HTML for each element.
The reason: I'm building a "garage door" with CSS3 Transitions and therefore it's important that I can declare the ID and style in my html directly.
So how would one declare a CSS file inline with the html? Here's what I've come up with, but I'm clearly missing something.
"ul id="garagedoor": href="http://linktothefile/garagedoor.css"
I realize it's entirely counter-intuitive to declare the css inline with the html, but I see no other way of getting this to work.
Thanks guys
I'm working on a CMS which doesn't permit me to edit the CSS
Then either:
It is a really awful CMS and should be replaced or
You don't have the authority to add CSS to the site (but someone else does and you need to talk to them)
Can one declare a css file directly in an html element?
The only place that <link> or <style> elements are allowed is the <head>, although browsers will error recover from them being elsewhere.
style attributes are allowed on most elements, but are bad practise.
"ul id="garagedoor": href="http://linktothefile/garagedoor.css"
That doesn't even resemble HTML.