ASP.NET Web Forms Styles

## Web Building

HOME Web Empty Site Web Database

## PHP Demo

PHP Demo PHP Website PHP Styles PHP Database PHP Navigation PHP Ajax

## ASP Demo

ASP Demo ASP Website ASP Styles ASP Database ASP Login ASP Security ASP Navigation ASP Ajax

## .NET Web Pages

WebPages Demo WebPages Website WebPages Styles WebPages Database WebPages Login WebPages Security WebPages Navigation WebPages Ajax

## .NET Web Forms

WebForms Demo WebForms Website WebForms Styles WebForms Database WebForms Navigation WebForms Ajax

## Web Building

Web Design Web Quality Web WAI Web Validation Web SEO Web TCP/IP

## Web Hosting

Host Intro Host Providers Host Domains Host Capacity Host Email Host Technologies Host Databases Host Types Host E-commerce

# ASP.NET Web Forms - Adding Style

« Previous
Next Chapter »

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".

| 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".

| 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

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE