---
title: Creating the site layout
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
> **Info:** This page is a part of a tutorial, which you should follow sequentially from beginning to end. [Go to the first page: Using the Xperience interface](https://docs.kentico.com/13tutorial/using-the-xperience-interface.md).
## You will learn about:
Your tutorial website is coming up nicely! In the previous steps, you have created all the resources you'll need to build your live site application.
To achieve a consistent experience on your website, create a layout view. The view will contain the website's header, navigation menu, and footer content, and ensure a uniform look across all pages on the website. You will also add a _\_ViewStart_ file that assigns the default layout to all views in your project.
## Adding CSS resources
The basic design of the _Medio clinic_ website relies on CSS styles from the _styles.css_ file in the tutorial resources (you can download the resources here: [TutorialWebsite.zip](https://docs.kentico.com/docsassets/13tutorial/creating-the-site-layout/TutorialWebsite.zip)).
Add the CSS resources by following these steps:
1. Open the live site project in **Visual Studio**.
2. Create a [_wwwroot_ folder](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files) in the project's root directory.
3. Inside the _wwwroot_ folder, create a **css** subfolder.
4. Add the **styles.css** file from the tutorial resources to the _css_folder.
Your project now contains the stylesheet you will use to define the website's design.
## Creating the site layout
In this step, we'll create the layout view.
1. In Visual Studio, create a **Views** folder in the project's root directory.
2. Inside the _Views_ folder, create a **Shared** subfolder.
3. Under the _Views/Shared_ folder, create a **Razor Layout** named **\_Layout.cshtml**.
4. Replace the code in _\_Layout.cshtml_ with the sample code in the **index.html** file from the tutorial resources (you can download the resources here: [TutorialWebsite.zip](https://docs.kentico.com/docsassets/13tutorial/creating-the-site-layout/TutorialWebsite.zip)).
5. Locate the _..._ tags, and replace the hardcoded page title _Tutorial website_ with a _Medio Clinic -_ prefix and the Razor call **@ViewBag.Title**.
6. Link the file containing the site's CSS inside the __ tags.
```xml
```
7. Add a **styles** Razor section before the closing __ tag. The section will be used to add page-specific stylesheets for views that use the page builder.
```xml
@RenderSection("styles", required: false)
```
8. Delete the content between the closing __ andopening __ tags, and replace it with the Razor call **@RenderBody()**.
9. Add a **scripts** Razor section before the closing __ tag. The section will be used to add page-specific scripts for views that use the page builder.
```xml
@RenderSection("scripts", required: false)
```
10. Your **\_Layout.cshtml** code should now look like this:
```xml
@* Dynamically resolves the page's title *@
Medio Clinic - @ViewBag.Title
@* Links a stylesheet used by the website. ASP.NET Core automatically searches for static files inside the ~/wwwroot folder. *@
@* Razor section for additional page-specific styles *@
@RenderSection("styles", required: false)
@* Loads the content of your Tutorial's pages as sub views *@
@RenderBody()
@* Razor section for additional page-specific scripts *@
@RenderSection("scripts", required: false)
```
11. Save your changes
You now have a consistent layout for your website. You also have the option to change the common layout for all views in a single location, if you want to provide your site's visitors with a different experience.
## Adding the ViewStart file
A ViewStart file allows you to define common Razor code that executes at the start of each view’s rendering. We will use this to set _\_Layout.cshtml_ as the default layout for all views on your website.
1. Select the **Views** folder, and add a new **Empty** view named: _\_ViewStart_
2. Replace the default code with the following Razor markup:
```csharp
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
```
3. Save your changes.
All views in your project will now use the site's default layout unless the developer specifies otherwise.
You now have a consistent layout for your website. You also have the option to change the common layout for all views in a single location, if you want to provide your website's visitors with a different experience.
**Previous page:** [Working with the generated page type classes](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-core-development-tutorial/working-with-the-generated-page-type-classes.md) — **Next page:** [Displaying page content](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-core-development-tutorial/displaying-page-content.md)
**Completed pages:** 7 of 10