How to apply CSS to javascript variable

[r.h.i.a.n]

I've got an prompt box that asks the user their name.
I then have a heading that says hello, and their name, and welcomes them to my site.

I've managed to apply CSS to the entire string, but I want to use a different heading style for the name so it stands out. Using <h4> as it is now doesn't display right.

var name=prompt("Oh hello there! Have we met, what is your name?:","");
try
{ 
if(isNaN(name))
{
throw "isname";
}
else if((name))
{
throw "notname";
}
}
catch(err)
{
if(err=="isname")
{
document.write("<h2>Hello " +<h4> name </h4>+ ", and welcome to my webpage. /h2>");
}
if(err=="notname")
{
document.write("Names dont have numbers!");
}
}//-->

[shingokko]

Firstly, the line that renders "<h2>Hello <h4> name </h4>..." is not syntactically correct, it should be something like this:

document.write("<h2>Hello <h4> " + name + " </h4>, and welcome to my webpage.</h2>");

Secondly, you shouldn't have a block element h4 nested inside h2, you can use an em tag instead of h4. It italicize the textual content by default. So you should change the line in your JavaScript code to this:

document.write("<h2>Hello <em> " + name + " </em>, and welcome to my webpage.</h2>");

Lastly, if you want to change how the em tag look, you can do this by adding some rules to your style sheet, as follows:

h2 em
{
    color: Blue; /* make the text blue, this is just an example */
}

The code above applies the style to every single em that sits under an h2, so you might want to change it a little to suit your needs.

[felgall]

You can't nest headings inside one an other. Use an inline tag around the name instead.