Home

Using Various Languages: CSS
 

Using Cascading Style Sheet
 

Using Inline CSS

You can also use Cascading Stype Sheet in your ASP.NET web pages. In its simplest form, you can create inline CSS code, which is a formatting you include as an attribute of an HTML tag. Here are examples: 

<%@ Page Language="C#" %>
<html>
<head>

<title>Grier Summer Camp</title>
</head>
<body style="font-family: Verdana, Helvetica, Arial, 'Sans Serif';
             color: #000000;	
             font-size: 10pt;
             background-color: #99CCFF">

<p>Grier Summer Camp</p>

<p>Coolfront Island</p>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<hr style="color:#000080">
<% Response.Write("Copyright &copy; 2007 Grier Summer Camp"); %>
<hr style="color:#000080">

</body>
</html>

This would produce:

If you are using Response.Write() and you want to include inline CSS in a tag, start the HTML in the <% %> combination but, for the style attribute, include the value in single-quotes. Here is an example: 

<%@ Page Language="C#" %>
<html>
<head>

<title>Grier Summer Camp</title>
</head>
<body style="font-family: Verdana, Helvetica, Arial, 'Sans Serif';
    color: #000000;	
    font-size: 10pt;
    background-color: #99CCFF">

<p>Grier Summer Camp</p>

<% Response.Write("<p style='color: #FF0000; font-size: 14pt'>"); %>
<% Response.Write("Coolfront Island</p>"); %>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<hr style="color:#000080">
<% Response.Write("Copyright &copy; 2007 Grier Summer Camp"); %>
<hr style="color:#000080">

</body>
</html>

Instead of manually writing your CSS code, if you don't know much Cascading Style Sheet, Microsoft Visual Studio 2005 can assist you with creating the necessary styles. In Microsoft Visual Studio 2005, to create inline CSS, you can various options. In the Design view of the page, click the word or paragraph where you want to apply CSS formatting. On the Formatting toolbar, you can use one of the options. The best way to create inline CSS is through the Properties window. To do this, in the Design view of the page, click the word or paragraph where you want to apply the formatting. In the Properties window, click Style and click its browse button . This would bring up the Style Builder dialog box:

Style Builder

 

Practical Learning: Creating Inline CSS
  1. Click the index.aspx tab to access its file and click its Source button to access its code
  2. Change the contents of the index.aspx file as follows:
      
    <%@ Page Language="C#"
         AutoEventWireup="true"  
         CodeFile="index.aspx.cs" 
         Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

<title>Geometry</title>
</head>
<body>

<table border="0">
  <tr>
    <td>
      <p>Geometry</p>
    </td>
  </tr>
</table>

&nbsp;

<table border="0" width="660">
  <tr>
    <td>
      <p>Geometry is the study of shapes and figures, including 
      how they are made up or constituted, and what to get from 
      them. To make the study a little easier, there are some 
      relatively simple figures that have already been 
      established and fairly documented.</p>
                    
      <p>Geometry is not just about recognizing some shapes, it 
      is also about their related calculations. In our lessons, 
      we will study some of these shapes and we intend to 
      perform their calculations.</p>
    </td>
  </tr>
</table>

&nbsp;

<table border="0" width="660">
  <tr>
    <td>
      <p>Available Shapes:</p></td>
  </tr>
  <tr>
    <td><a href="rectangle.aspx">Rectangle</a>
    </td>
  </tr>
  <tr>
    <td><a href="square.aspx">Square</a>
    </td>
  </tr>
</table>

&nbsp;

<table border="0" width="660">
  <tr>
    <td colspan="2">
      <hr color="#0000ff" />
    </td>
  </tr>
  <tr>
    <td align="center">
      <p>Copyright © 2007 Netconsulting, Inc.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr color="#0000ff" />
    </td>
  </tr>
</table>

</body>
</html>
  3. To manually create inline CSS formatting, change the code in the first table as follows:
      
    <table border="0" style="width:660px">
  <tr>
    <td style="text-align: center">
      <p>Geometry</p>
    </td>
  </tr>
</table>
  4. In the lower-left section of the window, click the Design button
  5. On the web page, click Geometry
  6. On the main menu, click Format -> Style...
  7. In the left frame, click Font if necessary.
    On the right side of the Family radio button, click the browse button
  8. In the Installed Fonts list box, click something and press G. In the list, click Garamond
  9. In the middle of dialog box, click the top Select Font button
  10. In the Installed Fonts list box, find and double-click Georgia
  11. In the Generic Fonts combo box, select Serif and click the Select Font button in  the middle-center >>
     
  12. Click OK
  13. Click the browse button on the right side of the Color combo box
  14. In the Web Palette tab, select a red color
     
  15. Click OK
  16. In the Size section, on the right side of Specific, type 24 and accept the unit as pt
  17. In the Bold section, click the arrow of the Absolute combo box and select Bold
     
  18. Click OK
  19. In the lower-left section of the window, click Source
  20. Select and copy the whole style code that was created for the Geometry title
  21. Locate the Available Shapes line and copy the stype to its <p> tag
  22. Change it as follows:
      
    <table border="0" width="660">
  <tr>
    <td>
      <p style="font-family: Verdana, Arial, Sans-Serif;
                font-weight: bold;
                font-size: 10pt;
                color: #000080">Available lessons:</p></td>
  </tr>
  <tr>
    <td><a href="rectangle.aspx">Perimeter</a>
    </td>
  </tr>
  <tr>
    <td><a href="square.aspx">Square</a>
    </td>
  </tr>
</table>
  23. In the lower-left section of the window, click Design
  24. In the first paragraph, click the word shapes
  25. In the Properties window, click Style and click its ellipsis button
  26. In the left frame, make sure Font is selected.
    Click the text box on the right side of Family and type:
      
    Helvetica, Verdana, Arial, 'Sans-Serif'
  27. Click the text box on the right side of Specific and type 10
  28. In the left frame, click Text
  29. In the Horizontal combo box of the Alignment section, select Justified and click OK
  30. In the lower-left section of the window, click Source
  31. Copy the whole style code that was applied from the first paragraph to the next box, click the top Select Font button
  32. In the Installed Fonts list box, find and double-click Georgia
  33. In the Generic Fonts combo box, select Serif and click the Select Font button in  the middle-center >>
     
  34. Click OK
  35. Click the browse button on the right side of the Color combo box
  36. In the Web Palette tab, select a red color
     
  37. Click OK
  38. In the Size section, on the right side of Specific, type 24 and accept the unit as pt
  39. In the Bold section, click the arrow of the Absolute combo box and select Bold
     
  40. Click OK
  41. On the main menu, click Debug -> Start Without Debugging
  42. Return to your programming environment

Browser

Creating Local CSS Code

Besides the inline formatting, you can also create CSS code in the head section and apply its formatting to the necessary HTML tags. We saw already that you could add HTML tags to the parentheses of Response.Write(). If you create your CSS code in the head section of the same file, the browser would make sure it applies the formatting to the appropriate HTML tag. Here are examples: 

<%@ Page Language="C#" %>
<html>
<head>

<style>

body {
    font-family: Helvetica, Verdana, Arial, 'Sans Serif';
    color: #000000;	
    font-size: 10pt;
    background-color: #FFDCA5 }

h6 {
    font-family: Verdana, Tahoma, 'Sans Serif';
    color:       #CC3300;
    font-size:   10pt;
    text-align:  center }

hr { color=#CC3300 }

</style>

<title>Grier Summer Camp</title>
</head>
<body>

<p>Grier Summer Camp</p>

<p>Coolfront Island</p>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<hr>
<% Response.Write("<h6>Copyright &copy; 2007 Grier Summer Camp</h6>"); %>
<hr>

</body>
</html>

This would produce:

Preview

You can also create custom tags, referred to as custom classes in your CSS code. If you create a custom class as part of your CSS, to use it in the <% %> section, include the name of the class in single-quotes. Here are examples: 

<%@ Page Language="C#" %>
<html>
<head>

<style>

body {
    font-family: Helvetica, Verdana, Arial, 'Sans Serif';
    color: #000000;	
    font-size: 10pt;
    background-color: #FFDCA5 }


hr { color=#CC3300 }

.toptitle {
  color: #800000;
  font-family: 'Times New Roman', Garamond, Georgia, Serif;
  text-align:  center;
  font-size:   24pt;
  font-weight: bold;
  text-decoration: none }

.housetitle {
  color: #CC3300;
  font-family: Georgia, Times New Roman, Courier New;
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none }

.copyright {
  font-family: Verdana, Tahoma, 'Sans Serif';
  color:       #CC3300;
  font-size:   10pt;
  text-align:  center }

</style>

<title>Grier Summer Camp</title>
</head>
<body>

<% Response.Write("<p class='toptitle'>Grier Summer Camp</p>"); %>

<% Response.Write("<p class='housetitle'>Coolfront Island</p>"); %>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<hr>
<% Response.Write("<p class='copyright'>
	Copyright &copy; 2007 Grier Summer Camp</p>"); %>
<hr>

</body>
</html>

This would produce:

Preview

 

Using an External CSS File

As mentioned earlier, you can also create a CSS file. To do this, you can use Notepad and enter the necessary code. You should then save the file with a .css extension. Microsoft Visual Studio 2005 provides its own means of creating a CSS file you can use in any application or to create and add a CSS file to the current project.

To create an independent CSS file, on the main menu, you can click File -> New -> File..., select General in the Categories list, select Style Sheet in the Templates list, give a name to the file, and click OK. After creating the file, you must save it and add it to any folder of your choice.

To create a CSS file and add it to the current project, on the main menu, you can click Web Site -> Add New Item... In the Templates section, click Style Sheet, accept the suggested name or give a name of your choice (recommended) and click Add.

When you start a new Style Sheet, you get a screen divided in two sections. The left section displays the already created tags or classes of your files. The right frame displays the formats (tags, classes) that have already been created in the file.

After creating and saving the file with .css extension, you can reference it by its name. For example if you create a file named Example.css, to use its formats in your web page, in the head section of the page, you would type:

<link rel="stylesheet" type="text/css" href="Example.css">

The advantage of this application-level style is that the same style can be applied to different pages of your web site, as long as you remember to reference the CSS file.

Practical Learning: Using CSS
  1. On the main menu, click Web Site -> Add New Item...
  2. In the Templates list, click Style Sheet
  3. Change the name of the file to geometry and click Add
  4. In the middle frame, right-click body and click Build Style
    On the right side of the Family radio button, click the browse button
  5. In the Installed Fonts list box, click something and press V. In the list, click Verdana
  6. In the middle of dialog box, click the top Select Font button
  7. Again, in the Installed Fonts list box, find and double-click Tahoma
  8. Once again, in the Installed Fonts list box, find and double-click Arial
  9. In the Generic Fonts combo box, select Sans-Serif and click the Select Font button in  the middle-center >>
     
  10. Click OK
  11. In the Color combo box, select Black
  12. In the Size section, on the right side of Specific, type 11
     
    Style Builder
  13. Click OK
  14. In the left frame, right-click Classes and click Add Style Rule...
  15. the word body and click Build Style...
  16. Click the Class Name radio button and click in the text box under it
  17. Type maintitle and click the select button Select
  18. Again, click in the text box under Class Name, type parajust and click the select button Select
  19. Once again, click in the text box under Class Name, type pictcentered and click the select button Select
  20. Click OK
  21. In the file, right-click maintitle and click Build Style...
  22. Click the text box on the right side of Family and type
    'Times New Roman' , Garamond, Georgia, Serif
  23. Click OK
  24. Complete the file as follows:
      
    body
{
	font-size: 11pt;
	color: black;
	font-family: Verdana, Tahoma, Arial, Sans-Serif;
}

.maintitle
{
	color: blue;
	font-family: 'Times New Roman' , Garamond, Georgia, Serif;
	text-align: center;
	font-size: 24pt;
	font-weight: bold;
	text-decoration: none;
}

.parajust
{
	font-family: Verdana, Tahoma, Arial, Sans-Serif;
	font-size: 10pt;
	font-weight: normal;
	text-align: justify;
}

.pictcentered
{
	text-align: center;
}

.formula
{
	font-weight: bold;
	font-size: 10pt;
	color: blue;
	font-family: Verdana, Helvetica, Tahoma, Sans-Serif;
}

a:link       {
  font-family: Verdana, Helvetica, Arial, Sans Serif;
  color: #0000FF;
  font-size: 10pt;
  font-weight: bold;
  text-decoration: none }

a:alink {
  font-family: Verdana, Helvetica, Arial, Sans Serif;
  color: #FF00FF;
  font-size: 10pt;
  font-weight: bold;
  text-decoration: none }

a:visited
{
	font-family: Verdana, Helvetica, Arial, Sans Serif;
	color: Green;
	font-size: 10pt;
	font-weight: bold;
	text-decoration: none;
}

a:hover
{
	font-family: Verdana, Helvetica, Arial, Sans Serif;
	color: #FF0000;
	font-size: 10pt;
	font-weight: Bold;
	text-decoration: none;
}
  25. Click the rectangle.aspx tab and change its file as follows:
      
    <%@ Page Language="C#" 
         AutoEventWireup="true" 
         CodeFile="rectangle.aspx.cs" 
         Inherits="rectangle" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

<link rel="Stylesheet" type="text/css" href="geometry.css" />
<title>Geometry: Rectangle</title>

</head>
<body>

<table border="0" style="width: 660px">
  <tr>
    <td style="width: 100%">
      <p class="maintitle">Geometry: Rectangle</p>
    </td>
  </tr>
</table>
    
 &nbsp;
 
<table border="0" width="660">
  <tr>
    <td>
      <p class="parajust">A rectangle is a geometric figure made 
      of 4 sides connected to produce four right angles. The 
      horizontal measurement of the rectangle, the base, is its 
      length. The vertical measurement of the figure is referred 
      to as its height. In geometry, a rectangle can be 
      represented as follows:</p>
        
      <p class="centered">
        <img src="images/rectangle1.gif" alt="Rectangle" />
      </p>        

      <p class="parajust">To process a rectangle, you usually 
      must provide, or must be given, the length and the height. 
      You can then calculate the perimeter and the area. To 
      assist you with these calculations, you can use some 
      pre-established formulas. Suppose the values are 
      represented as follows:</p>
    </td>
  </tr>
</table>
    
&nbsp;
        
<table style="width: 660px">
  <tr>
    <td style="width: 660px">
      <strong>L: length</strong>
    </td>
  </tr>
  <tr>
    <td style="width: 660px">
      <strong>H: height</strong>
    </td>
  </tr>
  <tr>
    <td style="width: 660px">
      <strong>P: perimeter</strong>
    </td>
  </tr>
  <tr>
    <td style="width: 660px">
      <strong>A: area</strong>
    </td>
  </tr>
</table>
            
&nbsp;

<table border="0" style="width: 660px">
  <tr>
    <td style="width: 100%">
      <p class="parajust">Based on these, the following 
      calculations can be made</p>
    </td>
  </tr>
  <tr>
    <td style="width: 100%">
      <p class="formula">P = (L + H) * 2</p>
    </td>
  </tr>
  <tr>
    <td style="width: 100%">
      <p class="formula">A = L * H</p>
    </td>
  </tr>
</table>

&nbsp;
            
<table border="0" style="width: 660px">
  <tr>
    <td style="width: 100%">
      <p class="parajust">A rectangle can also be represented on a 
      Cartesian coordinate system by four points A(x1, y1), 
      B(x2, y2), C(x3, y3), and D(x4, y4). In this case, the 
      perimeter can be calculated by adding the distances among 
      the adjacent points. The area can be calculated by 
      multiplying the two adjacent distances of three points.</p>
    </td>
  </tr>
</table>

&nbsp;

<table border="0" width="660">
  <tr>
    <td colspan="2">
      <hr color="#0000FF" />
    </td>
  </tr>
  <tr>
    <td align="center" style="height: 18px">
      <a href="index.aspx">Home</a>
    </td>
    <td align="center" style="height: 18px">
      <p class="centered">Copyright © 2007 NetConsulting, Inc.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr color="#0000FF" />
    </td>
  </tr>
</table>

</body>
</html>
  26. Click the rectangle.aspx tab and change its file as follows:
      
    <%@ Page Language="C#"
         AutoEventWireup="true" 
         CodeFile="square.aspx.cs" 
         Inherits="square" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

<link rel="Stylesheet" type="text/css" href="geometry.css" />

<title>Geometry: Square</title>
</head>
<body>

<table border="0" style="width: 660px">
  <tr>
    <td style="width: 100%">
      <p class="maintitle">Geometry: Square</p>
    </td>
  </tr>
</table>

&nbsp;

<table border="0" width="660">
  <tr>
    <td>
      <p class="parajust">A square is a type of 
      <a href="rectangle.aspx">rectangle</a> 
      for which all 4 sides are equal. This means that the horizontal 
      measurement, the base or length and the height are equal. The 
      length of each side is then called the side of the square. A 
      square can be represented as follows:</p>
                
      <p class="centered"><img src="images/square1.gif" /></p>
                
      <p class="parajust">To process a square, you must have the 
      measure of the side. This would allow you to calculate the 
      perimeter and the area. To do this, you can use simple 
      geometric formulas. Consider the following:</p>
      </td>
  </tr>
</table>

&nbsp;

<table>
  <tr>
    <td style="width: 660px">
      <strong>S: side</strong>
    </td>
  </tr>
  <tr>
    <td style="width: 660px">
      <strong>P: perimeter</strong>
    </td>
  </tr>
  <tr>
    <td style="width: 660px">
      <strong>A: area</strong>
    </td>
  </tr>
</table>

&nbsp;

<table border="0" style="width: 660px">
  <tr>
    <td style="width: 100%">
      <p class="parajust">To calculate the values of a square, you can 
      use the following formulas:</p></td>
  </tr>
  <tr>
    <td style="width: 100%">
      <p class="formula">P = S * 4</p>
    </td>
  </tr>
  <tr>
    <td style="width: 100%">
      <p class="formula">A = S * S</p>
    </td>
  </tr>
</table>

&nbsp;

<table border="0" width="660">
  <tr>
    <td colspan="2">
      <hr color="#0000ff" />
    </td>
  </tr>
  <tr>
    <td align="center">
      <a href="index.aspx">
        <strong><span style="font-size: 10pt">Home</span></strong>
      </a>
    </td>
    <td align="center">
      <p class="centered">Copyright © 2007 NetConsulting, Inc.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr color="#0000ff" />
    </td>
  </tr>
</table>

</body>
</html>
  27. Click the index.aspx tab to access its file and click the Source button
  28. Change the HTML code of the last table as follows:
      
    <table border="0" width="660">
  <tr>
    <td colspan="2">
      <hr color="#0000ff" />
    </td>
  </tr>
  <tr>
    <td align="center">
      <p style="font-family: Verdana, Tahoma, Arial, Sans-Serif;
                font-size: 11pt;
                font-weight: normal;
                text-align: center">
                Copyright © 2007 NetConsulting, Inc.
       </p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr color="#0000ff" />
    </td>
  </tr>
</table>
  29. On the main menu, click Debug -> Start Without Debugging

Using JavaScript
 

Introduction

Although you can do many things using HTML, CSS, and C#, every language has its own shortcomings. To complement them, you combine them with additional languages. As an example, you can use or insert JavaScript to your ASP.NET code. There are certainly various rules you must follow but you should know that it is available.

Integrating JavaScript to Your Code

One of the objects you can borrow from JavaScript is its message box, which you can display in response to a user clicking something on a web page. To support message boxes, the JavaScript language provides the alert() function. To call this function in your ASP.NET code, you must qualify it from javascript.

The syntax of the alert() function is:

javascript:alert(Message);

This function takes one argument, passed as a string. To call it, you can create it as part of a hyperlink. Here is an example:

<a href="javascript:alert('Your time sheet has been received');">Submit</a>

When the alert() function is called, it displays a a rectangular window with a message, an icon, and an OK button:

In JavaScript, the alert() function is a member of the window object. Based on this, to call the function, you can qualify it from that object. Here is an example:

<a href="javascript:window:alert('Your time sheet has been received');">Good</a>
 
Previous Copyright © 2005-2007 FunctionX, Inc. Next