SHARE THIS PAGE

ASP.NET Web Pages - Adding Style

« Previous

Next Chapter »

Learn ASP.NET Web Pages 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 layout file for the site
Create a new home page for the site

Create a Style Sheet

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

Put the following code inside the CSS file:

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 Layout Page

In your web folder (DemoWebPages), create a new CSHTML file named "Layout.cshtml".

Put the following code inside the layout file:

Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Site.css">
</head>
<body>

<div id="main">
@RenderBody()
<p>© 2013 W3Schools. All rights reserved.</p>
</div>

</body>
</html>

The layout file above defines the layout of your web pages. It has a link to your style sheet file (Site.css), and a call to the @RenderBody() function, where your page content should be displayed.

Edit the Home Page

In your "DemoWebPages" folder, edit the file named "Default.cshtml".

Change the content to the following:

Default.cshtml

@{Layout="Layout.cshtml";}

<h1>Welcome to W3Schools</h1>

<h2>Web Site Main Ingredients</h2>

<p>A Home Page (Default.cshtml)</p>
<p>A Layout File (Layout.cshtml)</p>
<p>A Style Sheet (Site.css)</p>

Run example »

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

Congratulations

You have created your first web site, with a main page (Default.cshtml), a common template for all your pages (Layout.cshtml), and a common style sheet (Sire.css).

In the next chapters of this tutorial, we will add a database to the web site. Then we will add login and security, and finally add navigation.

« Previous

Next Chapter »