Home

Using Cascading Style Sheet
 

CSS Fundamentals
 

Using Inline Style Sheet

Besides HTML and JavaScript, you can use Cascading Style 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; 2009 Grier Summer Camp"); %>
<hr style="color:#000080">

</body>
</html>

This would produce:

Browser

If you are using Response.Write(); and you want to include inline CSS in a tag, start the HTML tag 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; 2009 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 Web Developer 2008 Express Edition (or Microsoft Visual Studio 2008) can assist you with creating the necessary styles. In Microsoft Visual Web Developer 2008 Express Edition, 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 Browse. This would bring up the Style Builder dialog box:

Style Builder

Practical Learning: Creating Inline CSS
  1. Start Microsoft Visual Web Developer 2008 Express Edition or Microsoft Visual Studio
  2. To create a web site, on the main menu, click File and click New Web Site...
  3. Make sure ASP.NET Web Site is selected.
    Set the Language combo box to Visual C#
  4. Click the combo box on the left side of Browse, press End, and press Delete a few times (8), and change it to geometry2
  5. Click OK
  6. In the Solution Explorer, right-click C:\...\geometry2\ and click New Folder
  7. Type images as the name of the new folder and press Enter
  8. Copy each of the following pictures to your My Documents folder:
     
    Rectangle Square
  9. In the Solution Explorer, right-click images and click Add Existing Item...
  10. Locate the the above images, select them, and click Open
  11. In the Solution Explorer, right-click Default.aspx and click Rename
  12. Change the name to index.aspx and press Enter
  13. In the Solution Explorer, click C:\..\geometry2\
  14. To add a new web page, on the main menu, click Website -> Add New Item...
  15. Make sure Web Form is selected.
    Set the Name to rectangle
  16. Click Add
  17.  Locate the <title> tag and change it to <title>Geometry: Rectangle</title>
  18. To add a new web page, on the main menu, click Website -> Add New Item...
  19. Make sure Web Form is selected.
    Set the Name to square and click Add
  20. Change the 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">
<title>Geometry: Square</title>
</head>
<body>

<p>A square is a geometric figure made of 4 equal sides 
  connected to produce four right angles.</p>
  
&nbsp;
<table border="0" width="660">
  <tr>
    <td colspan="2">
      <hr color="#0000FF" />
    </td>
  </tr>
  <tr>
    <td align="center"><a href="index.aspx">Home</a></td>
    <td align="center">Copyright © 2009-2016, FunctionX, Inc.</td>
  </tr>
  <tr>
    <td colspan="2">
      <hr color="#0000FF" />
    </td>
  </tr>
</table>
  
</body>
</html>
  21. Click the index.aspx tab to access the first file
  22. Change it 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>

<h1 style="text-align:center">Geometric Figures</h1>
  
<p>This application is used to perform geometric calculations.</p>
  
<a href="square.aspx">Square</a>

</body>
</html>
  23. On the main menu, click Debug -> Start Without Debugging
    Access the browser to see the result:
     
    Real Estate
  24. Return to your programming environment
  25. Click the index.aspx tab to access its file and click its Source button to access its code
  26. 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 © 2009 Netconsulting, Inc.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr color="#0000ff" />
    </td>
  </tr>
</table>

</body>
</html>
  27. 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>
  28. In the lower-left section of the window, click the Design button
  29. On the web page, click the title Geometry
  30. On the main menu, click Format -> New Style...
  31. In the top section, click the arrow of the Selector combo box and select (inline style)
  32. In the left frame, click Font if necessary.
    Click the Font-Family combo box and select Times New Roman, Times, serif
  33. In the string, double-click the second Times to select it and replace it with Garamond, Georgia
  34. Click the arrow of the Font-Size combo box and select x-large
  35. Click the arrow of the Font-Weight combo box and select Bold
  36. Click the arrow button of the Font-Color combo box and select Red
     
    New Style
  37. Click OK
  38. Locate the Available Shapes line and change its <p> tag 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 Shapes:</p></td>
  </tr>
  <tr>
    <td><a href="rectangle.aspx">Perimeter</a>
    </td>
  </tr>
  <tr>
    <td><a href="square.aspx">Square</a>
    </td>
  </tr>
</table>
  39. In the lower-left section of the window, click Design
  40. In the first paragraph, click the word shapes
  41. In the Properties window, click Style and click its ellipsis button Browse
  42. In the left frame, make sure Font is selected.
    Click the combo box on the right side of Font-Family and type:
      
    Helvetica, Verdana, Arial, sans-serif
  43. Click the combo box on the right side of Font-Size and type 12
     
    Modify Style
  44. In the left frame, click Block
  45. In the Text-Align combo box, select Justified
     
    Modify Style
  46. Click OK
  47. In the lower-left section of the window, click Source
  48. Copy the whole style code that was applied from the first paragraph to the next block
  49. 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 © 2009 NetConsulting, Inc.
       </p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr color="#0000ff" />
    </td>
  </tr>
</table>
  50. On the main menu, click Debug -> Start Without Debugging
     
    Browser
  51. Return to your programming environment
  
 
 
 

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 Web Developer 2008 Express Edition 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 Style Sheet in the Templates list, and accept or give a name to the file:

Add New Item 

Click Add. 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.

PracticalPractical Learning: Using CSS
  1. On the main menu, click Website -> 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
  5. Click the Font-Family combo box and type Verdana, Tahoma, Arial, sans-serif
  6. Click the Font-Size combo box and type 11
  7. Click the arrow of the Color combo box and select Black
     
    Style Builder
  8. Click OK
  9. In the left frame, right-click Classes and click Add Style Rule...
  10. Click the Class Name radio button and click in the text box under it
  11. Type maintitle
     
    Add Style Rule
  12. Click the select button Select
  13. Click OK
  14. Again, in the left frame, right-click Classes and click Add Style Rule...
  15. Click the Class Name radio button and click in the text box under it
  16. Type justifiedparagraph and click the select button Select
  17. Click OK
  18. Once again, right-click Classes and click Add Style Rule
  19. Click Class Name, click its text box and type centered
  20. Click the select button Select and click OK
  21. In the file, right-click maintitle and click Build Style...
  22. Click the combo box on the right side of Font-Family and type
    Times New Roman , Garamond, Georgia, serif
  23. Click OK
  24. Complete the file as follows:
      
    body
{
	font-family: Verdana, Tahoma, Arial, Sans-Serif;
	font-size: 11pt;
	color: black;
}

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

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

.centered
{
	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 Source code 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="justifiedparagraph">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="justifiedparagraph">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="justifiedparagraph">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="justifiedparagraph">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 © 2009 NetConsulting, Inc.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr color="#0000FF" />
    </td>
  </tr>
</table>

</body>
</html>
  26. Save everything
  27. Return to the browser and refresh
  28. Access the Rectangle page
     
    Rectangle
 
 
   
 
Previous Copyright © 2009-2016, FunctionX, Inc. Next