Creating a CSS file to change emphasized text in an html file

Question

Sorry if this is an extremely basic/noob question, but I just dipped into html/css and seem to have run into a little problem. Below is the code I have tried for my css file

h3{
font-family: Times, Times New Roman, serif;
font-size: 1.3em;
text-transform: uppercase;
text-align: right;
color: maroon;
}
p{
text-emphasis: green;
}
body {
background-color: #e6e6fa;
font-family: Arial, sans-serif;
font-size: 1.2em;
text-emphasis: green;
}

Ignore the header and body stuff, that is just other (working) parts of the css. I tried sticking "text-emphasis" into other sections (header and body) but nothing seems to change the emphasized text to green (I also need to make it bold, which I'm not sure which command can do that)

Again, sorry for the very nooby and vague question. Basically what I need to do is make emphasized text (that appears in 2 paragraphs in my html file) green and bold, instead of it just being italicized. I know this is very spoon-feedy but i've tried different attempts to no avail. thank you all!

`font-weight; bold` for bold. `text-emphasis` is not supported by any major browser. http://www.w3schools.com/cssref/css3_pr_text-emphasis.asp. Provide an image that examples what you are trying to do. — theblindprophet, Jul 13 '16 at 19:09
thank you very much for this! is there any specific section that "font-weight; bold" and "text-emphasis-color: green;" should go in? or does it not matter much — daniel, Jul 13 '16 at 19:10
You need to style em not p unless you're just using p tags to wrap emphasized text, in which case you just need to use color: green; — ivywit, Jul 13 '16 at 19:13
A better reference is https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis. Scroll to the bottom to see supporting browsers; it seems all except IE support it, but aside from Firefox, they require the `-webkit-` prefix. — Reinstate Monica -- notmaynard, Jul 13 '16 at 19:13
Got it perfectly just like the example asked for!! thank you guys very much. — daniel, Jul 13 '16 at 19:16
You can add your own answer and mark it as accepted for the benefit of others — blurfus, Jul 13 '16 at 20:34

coderodour · Answer 1 · 2016-07-13T19:14:40.573

2

If the text is emphasized using the <i> tag, your css selector should be as follows:

p i{
    color: green;
}

If it is em then "p em", etc.

edited Jul 13 '16 at 19:14

answered Jul 13 '16 at 19:11

coderodour

1,072
8
16

score 2 · Answer 2 · answered Jul 13 '16 at 19:25

Looks like you need to use the -webkit- prefix for most browsers to support it (source)

Following the docs, you can see several takes of this in action below

.p1 em {
  -webkit-text-emphasis: filled sesame red;
  color: red;
}
.p2 em {
  -webkit-text-emphasis: open circle blue;
  color: blue;
}
.p3 em {
  -webkit-text-emphasis: double-circle green;
  color: green;
}

.p4 em {
  -webkit-text-emphasis: purple;
  color: purple;
}

<p class="p1">
  This is my text. When I want to <em>emphasize</em> something, I change its colour;
</p>

<p class="p2">
  This is my text. When I want to <em>emphasize</em> something, I change its colour;
</p>

<p class="p3">
  This is my text. When I want to <em>emphasize</em> something, I change its colour;
</p>

<p class="p4">
  This is my text. When I want to <em>emphasize</em> something, I change its colour;
</p>

what a strange CSS property. :/ anyway, +1 for directly answering OP's question, even if it isn't the way OP probably should be approaching the problem. — Woodrow Barlow, Jul 13 '16 at 19:28

Creating a CSS file to change emphasized text in an html file

2 Answers2