Question

I have this .ascx page that contains this code :

<%=Morning%>
  <br />
<%=Sunrise%>
  <br />
<%=afternoon%>

in the code behind .ascx.cs

XmlNodeList _morning= _doc.GetElementsByTagName("morning");
  morning= "morning" + _morning[0].InnerText.ToString();

XmlNodeList _sunrise = _doc.GetElementsByTagName("sunrise");
  Sunrise = "Sunrise" + _sunrise[0].InnerText.ToString();

so the result would look like :

morning  12:00 PM
Sunrise  5:00 AM

What I want to do is to add styles on each element; I need to have morning with one style and 12:00 PM with a different one. How do I do it using CSS? I mean, how could I specify to each have their own class?

Answer 1

morning = "<span style='color: Red;'>morning</span><span style='color: Yellow;'>" + _morning[0].InnerText.ToString() + "</span>";

This will alter the colour of morning to Red and the colour of time to Yellow. However, this is inline styles and you could use a class instead.

morning = "<span class='morning'>morning</span><span class='time'>" + _morning[0].InnerText.ToString() + "</span">";

and in your css file:

.morning
{
    color: Red;
}

.time
{
    color: Yellow;
}