I have a div, and I want to change the selection style.
It works fine like this:
<div>Text text</div>
<style>
div::selection {
background: #FFF;
color: #000;
}
</style>
The problem is that I want to send it in the email, so it has to be inline code.
(<div style=""></div>)
Is there any way to do that?
The easiest way to do this is as follows. Inside the "head" tag of your email, simply include your style
<head>
<style>
div::selection {
background: #FFF;
color: #000;
}
</style>
</head>
<body>
//your email body
I should also note here that Pseudo elements, such as div::selection, are selectors, and cannot be styled inline.
Inline styles pertain to elements, not pseudo-elements, so you cannot do this with an inline style.
I'm not entirely sure which non-webmail clients support ::selection (other than Thunderbird with ::-moz-selection) anyway. But you should be able to get away with using an internal stylesheet, as you already are doing (except move the <style> element to <head> instead), depending on which clients you're supporting.
Personally I wouldn't bother with ::selection in an email at all. There's virtually no need for it, especially when you consider the poor CSS support that email clients are often known for.
Related
I don't want to link a separate CSS stylesheet. Is there a way to have CSS and HTML in one file?
I am a beginner developer and I just started web dev. I want to have everything in one file so I can transfer it easily without having multiple files.
Yes, there is!
In HTML, there is a tag, which you can put your CSS code into. This is known as internal CSS because it is in the HTML file itself. The tag goes in the tag. So any CSS you have from, you can directly paste in into the style tag and it will render it.
For example:
<head>
<style>
p {
color:red;
}
</style>
</head>
Another option is to style every tag separately. I would recommend doing this for EVERY SINGLE tag, but when you only have to style one thing, this is really useful. Basically, you can do this by taking any tag and adding a style="" into it.
For example, lets style a p tag. It would look something like this:<p style="font-size:sans-serif; ">. And you can add any styling in the quotations.
I, personally like to have my CSS in one file because, it helps with easy transfer of files and you can easily look back change the CSS, which looking at your HTML.
you can use internal css and inline css
Internal CSS
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
An inline CSS uses the style attribute of an HTML element.
<h1 style="color:blue;">A Blue Heading</h1>
When I add such CSS into <style> tags:
* {
display:block;
}
It is never interpreted correctly. Instead, what do I see? Somehow everything inside <style> becomes the part of html body. E.g.:
* {
display:block;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
This happens anywhere. For the first time, I thought this is the problem with StackSnippets. (i.e. the live demo for Stack Overflow, the one I've provided above), but then I checked with code pen. Then with jsfiddle. Then I've gone ahead and made a file on my server, giving it all contents I inserted in the snippet above.
The outcome is always the same. The CSS gets included in the html, though it is applied. (the only fix is to create a stylesheet and include it using <link>)
The most interesting thing, is, that it seem to happen only with display:*. E.g., the following works:
* {
color:green;
background:red;
border:2px solid orange;
border-radius:5px;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
But once I put in the styles of the last snippet display:*, the styles are, again, magically included in HTML.
* {
color:green;
background:red;
border:2px solid orange;
border-radius:5px;
display:inline-block;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
Why does it happen?
It's styling the <head> element and everything in it, including the very <style> element your CSS resides in, because the CSS appears as character data within the <style> element. A <link> element on the other hand doesn't have any content — it points to a separate resource altogether, so there is nothing inside the element itself to be displayed.
Most browsers implement <head> as display: none (and some propagate that value to every descendant), which you are able to override by targeting them with a display style. The rest of the properties are still applied to <head> and its descendants regardless of whether you do this, but without it, they simply won't show up in your page so you don't really see it happening. That's really all there is to it — there isn't anything else that's special about <head> or its related elements.
In other words, as far as CSS is concerned, the following (yes, a <style> element with a style attribute...):
<style style="display: block; font-family: monospace">
p { color: red; }
</style>
Is no different from this:
<code style="display: block; font-family: monospace">
p { color: red; }
</code>
How can I create a single-line text with different colors in it in HTML? Like inner div tags with different style attributes in it. Is it possible?
Thanks in advance.
Try to separate parts with the same color to the span tags with different styles. Span is more suitable than div here, because span is only considering line formatting, not the whole block of code.
Otherwise, using pure HTML for styling text is not recommended and it's generally considered to be a very bad practise.
Example:
HTML
<html>
<head>
<title>Colors</title>
</head>
<body>
This text will be <span class="g">green</span> and <span class="b">blue</span>.
</body>
</html>
CSS
.g {
color: green;
}
.b {
color: blue;
}
The W3C Recommendations defines the ability to select any anchor which has a defined class by using A[CLASS]{/*Code*/}, but is there an antecedent?
Can I select all anchors that do NOT have a class?
My instinct is to use A[~CLASS]{/*Code*/}, but that isn't documented, and A[CLASS=]{/*Code*/} selects all anchors which have a class name which is an empty string (for instance, <A CLASS="" HREF="http://example.com/">This anchor has a class, but it's empty.</A>).
Example usage
In this code, I only want classless links to be green.
<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="http://example.com/externalUneditableStyles.CSS" />
<STYLE>
A.deadLink{
color:#FF0000 !important;
}
A{
color:#00FF00;
}
</STYLE>
</HEAD>
<BODY>
This link is red, as specified by the CSS above.
This link is green, as specified by the CSS above.
This is a link to a child page, and is styled by external uneditable CSS. That CSS doesn't specify a color, so it is green, even though that might not be the intended effect.
</BODY>
</HTML>
Use something like this:
a:not([class]) {
/*some styling here*/
}
Little demo: little link.
That's exactly what cascading is for, if you do:
a { color: #000; } /* this targets all anchors */
Then after this in your stylesheet you can do
a.classname { color: #ffcc00; } /* to override the color for the once with the classname class defined. */
I hope that's clarifies your question.
Try to play with the .foo:not(.bar)-pseudo selector. I also advise you not to code tags in caps. I believe it is allowed in HTML5, but not in XHTML. Even so, the practice is frowned upon.
I'm using a template and the titles are inside a div. I want to apply h1 to the title but it goes bad (the div is styled with css, and there is no styling for h1)
Normally this is what it is:
<div class="content-pagetitle">Title</div>
I'm changing to:
<div class="content-pagetitle"><h1>Title</h1></div>
But it goes bad.
I tryed to use the same styling content-pagetitle for h1. It didn't worked
<h1>Title</h1>
(It does not become same as content-pagetitle)
Is there a css code that says "do not apply any styling to h1"?
Might try removing margins and padding on the H1
h1 { margin:0; padding:0 }
I would encourage you to explore you dom (via firebug or any equivalent) and see which styles are being applied to the H1. You may need a more specified selector to apply the aforementioned rules to a particular h1 element only.
Browsers have default styles that attempt to reasonably display a valid HTML document, even when it has no accompanying css. This generally means that h1 elements will get extra padding, a large font size, bold font-weight, etc.
One way to deal with these is to use a reset stylesheet. That may be overkill here, so you might just want to use firebug or something to identify the specific styles you want to kill, and override them.
If you're having trouble getting your styles to override, stack more selectors to add more specificity.
Is there a css code to say "do not apply any styling to h1"?
Not as such, no. But...
What you could do is specify 'inherit' as the value of the h1's attributes. This is unlikely to work in all situations, though. Assuming:
div#content-pagetitle {
background-color: #fff;
color: #000;
font-size: 2em;
font-weight: bold;
}
h1 {
background-color: inherit; /* background-color would be #fff */
color: inherit; /* color would be #000 */
font-size: inherit; /* font-size would be 2*2em (so 4* the page's base font-size) */
font-weight: inherit; /* font-weight would be bold */
}
It might be possible to increase the specificity of the selector, by using:
div#content-pagetitle > h1
or
div#content-pagetitle > h1#element_id_name
I know this is an old post, but here is what I would do...
define all your h tags as usual, then for the specific style, do something like
<h1 class="specialH1"> ... </h1>
and in your css
h1.specialH1 (
/* style attributes */
)
I think thats a clean solution, and gives you full control, whilst not having to alter or reset your default h tags.
It also avoids using any selector increasing type black magic witchcraft xD
Anyways... Just my opinion... Hope this helps anybody