Search w3schools.com:

SHARE THIS PAGE

ASP.NET Web Forms - Adding Style

Learn ASP.NET Web Forms by building a web site from scratch.

Part II: Adding CSS and a Standard Layout.

What We Will Do

In this chapter we will:

  • Create a standard style sheet for the site
  • Create a standard master page for the site

Create a Style Sheet

In your web folder (DemoWebForms), create a new CSS file named "Site.css".

lamp To create a CSS file, right-click the root folder and select "New File". Then select a CSS file.

Put the following code inside the CSS file:

Site.css

body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}

#main
{
padding: 30px;
background-color: #ffffff;
border-radius: 0 0 4px 4px;
}

h1
{
font: Georgia, serif;
border-bottom: 3px solid #cc9900;
color: #996600;
}

The CSS file above defines the styles to be used used for

  • The HTML body element <body>
  • The HTML element with id="main"
  • The HTML heading element <h1>

Create a Master Page

In your web folder (DemoWebForms), create a new master page named "Site.master".

lamp To create a Master file, right-click the root folder and select "New File". Then select "Master Page (VB)".

Put the following code inside the master file:

Site.master

<%@ Master Language="VB" %>

<!DOCTYPE html>

<html>
<head id="head" runat="server">
  <title></title>
  <link href="Site.css" rel="stylesheet">
</head>

<body>
<form id="form1" runat="server">
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
<p>&copy; <%=DateTime.Now.Year%> W3Schools. All rights reserved.</p>
</div>
</form>
</body>
</html>

The master file above defines the layout of your web pages. It has a link to your style sheet file (Site.css), and an asp control (asp:ContentPlaceHolder), where your page content should be displayed.

Edit the Home Page

In your "DemoWebForms" folder, edit the file named "Default.aspx".

Change the content to the following:

Default.aspx

<%@ Page Title="Home" MasterPageFile="Site.master" %>

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
  <h1>Welcome to W3Schools</h1>
  <h2>Web Site Main Ingredients</h2>
  <p>A Home Page (Default.aspx)</p>
  <p>A Style Sheet (Site.css)</p>
  <p>A Layout File (Site.master)</p>
</asp:Content>

Run example »

The file starts with a reference to the layout file, otherwise it contains an asp control and a normal HTML markup.

Edit the About Page

In your "DemoWebForms" folder, edit the file named "About.aspx".

Change the content to the following:

About.aspx

<%@ Page Title="Home" MasterPageFile="Site.master" %>

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
 <h1>About Us</h1>
 <p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</asp:Content>


Congratulations

You have created your first ASP.NET Web Forms site, with a main page (Default.aspx), a common template for all your pages (Site.master), and a common style sheet (Site.css).

In the next chapters of this tutorial, we will add a database to the web site. And finally we will add navigation.

Web Forms File Types

Below is a list of ASP.NET Web Forms most common file types.

Extension Description
.htm / .html HTML Pages
Web pages to be viewed directly by the browser
.css Style Sheets
Defines styles and formatting for the web site
.js JavaScripts
Contains JavaScripts to be executed in the browser
.aspx Web Forms
The core of ASP.NET. Web pages with ASP.NET code.
.ascx Web User Controls
Contains code fragments to be used by multiple pages
.asax Global Class
Global code (like startup code)
.asmx Web Service
Contains callable web services
.cs Class Files
Contains code in C#
.vb Class Files
Contains code in Vb (Visual Basic)
.config Web Configuration
Contains configuration information for the web site
.master Master Pages
Define the global structure (look) of the web site
.sitemap XML Sitemap
.xml Data stored in XML format
.sdf SQL Server Compact Databases
.mdf SQL Server Express (Access) Databases


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]