Using CSS Styles in C# ASP .NET Web Applications

Introduction

CSS has become a fundamental part of designing C# ASP .NET web applications. All web applications designed by Primary Objects include CSS styles and inner-html effects for a professional polished look. With the importance of cross-browser compatibility, neatness, and world wide web standards, CSS effectively brings your site up to date.

The Great Font Tags

What ever happened to the good old days of using font tags? Some web developers will state that using font tags is actually a crime. The problem with font tags is that you don’t exactly get the size and look of what you really want. Instead, you are confined within the limits of the defined font. Further, a user’s web browser may change the font size by using the View menu option.

Along Comes CSS

CSS styles often retain their set font sizes, although this depends on the web browser. Possibly, one of the most powerful feature of CSS is using CSS style sheets. With a style sheet, you can define specific styles using CSS, which will affect all HTML objects throughout your site. For example, you could set a style to draw a blue border around all tables. Now, when you create a table, you need not worry about drawing the borders manually and specifying sides, color, width, etc. You simply give the table a class name and the style is instantly applied.

Example setting blue border around all tables, courtesy of the CSS Table Border Style Wizard

<style type="text/css">table.sample { border-width: 1px; border-spacing: ; border-style: dotted; border-color: blue; border-collapse: separate; background-color: white; } table.sample th { border-width: 1px; padding: 1px; border-style: none; border-color: gray; background-color: white; -moz-border-radius: ; } table.sample td { border-width: 1px; padding: 1px; border-style: none; border-color: gray; background-color: white; -moz-border-radius: ; }</style>

<style type="text/css">
    table.sample {
     border-width: 1px;
     border-spacing: ;
     border-style: dotted;
     border-color: blue;
     border-collapse: separate;
     background-color: white;
    }
    table.sample th {
     border-width: 1px;
     padding: 1px;
     border-style: none;
     border-color: gray;
     background-color: white;
     -moz-border-radius: ;
    }
    table.sample td {
     border-width: 1px;
     padding: 1px;
     border-style: none;
     border-color: gray;
     background-color: white;
     -moz-border-radius: ;
    }
</style>

<table class="sample">
<tr>
 <th>Header</th>
 <td>Content</td>
</tr>
</table>

The Hidden DIV Tag

CSS styles come in particular handy when dealing with status messages upon submitting forms. By including a hidden DIV tag with an applied style, one can add JavaScript validation to the submission form to notify the user of missing fields. Instead of displaying a JavaScript messagebox, the div tag’s innerHTML property can be set with a CSS style to display the message within the page and set focus to the control.

Example validating form with hidden DIV tag:

<script language="javascript">
function Validate()
{
   if (document.forms[0].name.value.length < 1)
   {
      m_Status.innerHTML = "<span class='errortext'>Please enter your name.</span>";
      document.forms[0].name.focus();
      return false;
   }

   return true;
}
</script>

<DIV id="m_Status" name="m_Status">&nbsp;</DIV>
<p>
    <form>
        Your Name: <input id="name" name="name" value="" type="text">
        <input type="button" onclick="if (Validate()) m_Status.innerHTML='the form has been submitted.';" value="Submit">
    </form>
</p>

If you paste the above example into Notepad and save it as an HTML file, you can see how using hidden DIV tags and the innerHTML property can greatly enhance the functionality of a web application. Note the CSS style on the error message enclosed within a span tag. An example of this running is shown below.

<script language="javascript">function Validate() { if (document.forms[0].name.value.length < 1) { m_Status.innerHTML = "<span class='errortext'>Please enter your name.</span>"; document.forms[0].name.focus(); return false; } return true; }</script>

Your Name: <input id="name" name="name"> <input onclick="if (Validate()) m_Status.innerHTML='the form has been submitted.';" type="button" value="Submit">

Linking CSS Style Sheets in a .NET ASCX Master Page Template

Including CSS style code within a web page can often become messy. This is especially the case when dealing with ASP .NET master page templates or ascx files. A better approach is to save the CSS styles within a stylesheet file, such as style.css, and linking to the style sheet from the master page template ascx file. To link the CSS file within a template, use the following code:

<LINK href="style.css" type="text/css" rel="stylesheet">

CSS styles can greatly enhance the appearance of ASP .NET web applications when used correctly. Experiment with designs and colors to achieve the perfect effects and don’t forget those hidden DIV tags.

About the Author

This article was written by Kory Becker, software developer and architect, skilled in a range of technologies, including web application development, machine learning, artificial intelligence, and data science.

Sponsor Me