a[href^="mailto:"]
{
color: blue;
}
I am using the above code and it's getting applied to both mailto links. Is there any way that we can have two different colors for mailto link? tried SPAN class but not working in Outlook.
try like this
HTML
<body>
232322232
232322232
</body>
css
body{
background-color:#000;
}
a.blue{
color:blue;
}
a.white{
color:white;
}
The recommended way is to have the styles in-lined. This way you are sure that your link colours will work the same across every email clients.
Note: Some answers on this question are either using jquery or CSS in the head. jQuery doesn't work in emails and some email clients strip off <head> ... </head> from your document.
<div style="background-color:#000000;padding:20px 10px;">
Send Mail 1
Send Mail 2
</div>
By default all links are blue. If you wish to change it to a different shade of blue you can use the code similar to the second link.
i use body background image different page different background image
Example
<body class="home">
<body class="contact">
but w3 validator error:
"Start tag body seen but an element of the same type was already open." , "Cannot recover after last error. Any further errors will be ignored."
i can use with Jquery
<script>
$('body').addClass("home");
</script>
<script>
$('body').addClass("contact");
</script>
But i want use Html Css no Jquery please help me
All right, you open one element body and then want to open another. One html page must contain one body element. It's a standart.
You are wanting a different background image for EACH page home.html, and contact.html.
home should look like this.
<body class="home">
contact
<body class="contact">
then put the appropriate css with each for different backgrounds
I have a piece of text that I am trying to change the font color for on my site. The code is showing up correctly and I have read some other forums and tried to modify the code myself using HTML font color and PHP style but I can't seem to get it to work.
I am not a programmer myself, so I am most likely making some kind of rookie mistake. The code currently installed on the site is below:
<div style='text-align:center'>
<?php
ini_set('default_socket_timeout', 3);
echo file_get_contents('https://www.mysamplesite.com');
?>
</div>
I actually do not care if it is center aligned or not if I can get it to show up in white font, but I can't seem to be able to get it to show in white font.
When the sample code loads it brings back certain text that displays on the front of my my site. Can someone please tell me how to format this code properly to get it to show in a color of font of my choice? Your help would be greatly appreciated. Thanks!
All you need to do is a add a color declaration:
<div style='text-align:center; color: #FFFFFF;'>
Keep in mind that any inline style tags may overwrite the parent's style properties.
Try this code.
<div class="code">
<?php
ini_set('default_socket_timeout', 3);
echo file_get_contents('https://www.mysamplesite.com');
?>
</div>
<style>
.code, .code *
{
color: #FFFFFF!important;
}
</style>
For practice and training CSS im trying to do something like:
In other words, I'm trying something like this: when I hover over third paragraph, second paragraph needs to get color like on picture.
I'm trying with pseudo-classes :hover and :before (or :after) with content attribute set to "", setting background to #E7A51B and opacity to 0.3 but It doesn't work.
HTML need to be like this:
<body>
<div class="app">
<p> First paragraph </p>
<div class="active">
<p> Second paragraph </p>
</div>
<br>
<div>
<p> Third paragraph </p>
</div>
</div>
</body>
EDIT: Thanks everyone on comments. Reading your comments I get idea to ask that is it possible some more generic approach, something like:
If I hover over element with class="foo1" background of element with class="foo2" get changed?
current CSS (Selectors Level 3)
With the current CSS standard, unfortunately what you are trying is not possible. However, what is possible at the moment?
Given the following markup:
<div class="app">
<p> First paragraph </p>
<p> Second paragraph </p>
<p> Third paragraph </p>
</div>
You can target elements that are on the same level (same parent) and follow your initial element you interact with (e.g. :hover). → Demo
/* targeting the direct descending sibling of the 3rd paragraph*/
p:nth-of-type(3):hover + p{
color:red;
}
/* targets the 4th paragraph when hovering the second */
p:nth-of-type(2):hover ~ p:nth-of-type(4){
color:blue;
}
/* targets all paragraphs being siblings of the first paragraph */
p:first-of-type:hover ~ p{
color:green;
}
the future (Selectors Level 4)
Selectors Level 4 will (most likely) bring two exciting new feature which can achieve, what you actually try to do:
1) The - what I would call it - subject indicator - it let's you determine, which element of the compound selector you want to target.
!OL > LI:only-child
would target all ordered lists with only have one list element (looks simple, but is not possible with current css).
2) the reference combinator:
label:hover /for/ input
would target an input element, when the label which is referencing it via it's for attribute is hovered.
At the moment this is not supported by any browser yet, but you see, we can be excited what awaits us in the near future of css;)
The :hover method in CSS will only work if you want to hover over an element and change the color of that specific element, it will not work to change a separate one. In other words, you will need to do some simple JQuery. If you're not familiar with JQuery, don't worry, I'll walk you through the steps you'll need. If you're familiar with Jquery and already have the library, skip to step 3 and I'll provide you with the exact code that will make it work. This looks extremely long and painful but that's just because I'm trying to be as thorough as possible. It is actually very simple
Step 1: If you don't know what JQuery is, it is JavaScript that has been rewritten in an easier (in my opinion) syntax. In order for the JQuery to work however, you will need to download the library (syntax) for free at jquery.com. When you get to the website, click the download tab and then download the compressed, production version of JQuery. When you click that to download it, a page opens up with all the code. Copy it all and paste it into your text editor and save it with a .js extension. ex: jquery-library.js.
Tip: make sure it is in the same folder as all of your other html and css documents that you're using.
Step 2: Link your html with the Jquery library you downloaded like this:
<head>
<script type="text/javascript" src="the name of your jquery library file.js"></script>
</head>
Step 3: Create a new file in your text editor with a .js extension. ex: background-color.js. You will also need to link this with your html page. Go to your html page and in the < head > section right underneath the first < script > tag, type:
<script type="text/javascript" src="the name of your javascript file.js"></script>
Your < head > section in the html should now look like this:
<script src="the name of your jquery library file.js"></script>
<script src="the name of your javascript file.js"></script>
Step 4: You will need to make a few simple changes to your html first. The second and third < p > elements both need classes so that the JQuery can identify them:
<div class="app">
<p> First paragraph </p>
<div class="active">
<p class="second"> Second paragraph </p>
</div>
<br>
<div>
<p class="third"> Third paragraph </p>
</div>
Step 5: Now for the JQuery. It is okay if you don't understand the syntax, just copy and paste this into your .js document:
Tip: I added comments to explain each string as much as possible. Anything on a line after a // is a comment.
$(document).ready(function(){ // <-- this string tells the browser to perform the following action once the page has fully loaded
$(".third").mouseenter(function(){
$(".second").css("background-color", "#9CF"); // change this css color to whatever background color you want
}); // when the mouse enters the class "third", the background color of the class "second"
// changes to #9CF
$(".third").mouseleave(function(){
$(".second").css("background-color", "#FFF"); //change this css color to whatever your default background is
}); // when the mouse leaves the class "third", the background color of the class "second"
// changes back to default
});
I hope this helped. Let me know if something doesn't work, but I tested it in safari and firefox and it is extremely basic JQuery so it should work anywhere. Keep in mind that on a mobile device, you can't hover, so try not to make it an essential part of your website.
Here is my solution
My goal was to create a solution that wouldn't require any work on the HTML of the page. I was also trying to create a solution that would be applicable in various scenarios. To do this, I have to use the .prev() method.
$("div p").on("mouseenter", function () {
$(this).prev().css("background-color", "red");
});
$("div p").on("mouseleave", function () {
$(this).prev().css("background-color", "inherit");
});
here is my new code with some jquery
in your html I added class last
http://jsfiddle.net/K4RFX/1/
$('.last').mouseover(function() {
$('.active p').css('background','#f00');
});
$('.last').mouseout(function() {
$('.active p').css('background','none');
});
<body>
<div class="app">
<p> First paragraf </p>
<div class="active">
<p> Second paragraf </p>
</div>
<br>
<div class="last">
<p> Third paragraf </p>
</div>
</div>
</body>
Unfortunately, the modern CSS doesn't have a selector like 'previous element'. We can only use some combinations of hover effects on parent and children elements, like in this demo:
CSS
.wrapper:hover p:first-child {
background: red;
}
.wrapper p:first-child:hover {
background: none;
}
HTML
<div class="wrapper">
<p>The 2nd parapraph</p>
<p>The 3rd parapraph</p>
</div>
I have a background color of #efefef (greyish), color loads just fine in every browser.
Problem is that when I copy the whole file from the browser and paste it in an e-mail, then the background color changes to white.
How do I keep it the same color?
<body bgcolor="#efefef" link="#ff6633" alink="#ff6633" vlink="#ff6633">
Try
<div style="background-color:#EFEFEF">
<p>EMAIL TEXT</p>
</div>
in your email.
You can not use <body> tags in html email. All email clients will strip out any <body> <head> tags etc.
You need to rebuild the email using tables and use inline styles to style the elements.
HTML emails are notoriously difficult to code. The way you are trying to do it simply will not work i'm afraid.
Here is a brief introduction to coding html email: http://www.sitepoint.com/code-html-email-newsletters/