ASP.NET Master Page Tutorial Part-10 (Moving Css To External Css File)

In previous post ASP.NET Master Page Tutorial Part-9 (Redifining Body Tag) Using Expression Web i told you how to redefine css body tag and how to redefine all of the text on the display area of page.

Microsoft Expression Web has a nasty habit of automatically creating CSS code for you.If you let it, it will create quite a CSS mess for you to work with.It's much easier to create your CSS code and then apply it to page elements as you add them to your page or you can move all css code to external file like myformate.css,main.css etc.. So let me show you how to move all css code to external files and how to create and use it in our ASP.NET website master page.


Moving Css to External css file

You can see all Css code inside page in Code view.

Moving Css to External css file

What is Page View in Microsoft Expression Web ?

Design View: This view is WYSIWYG. You can create and edit web pages using the design controls in this view.

Split View: In Split View you can review and edit web page content in a split screen format that offers you a simultaneous access to both the Code and Design views.

Code View: In Code View you can view, write and edit the HTML tags yourself with the optimize code features provided.

For switching between these three views you can use the keyboard shortcuts Ctrl+Page up or Ctrl+Page Down.

Now here we make new css file.

Go to File > New > Css

Moving Css to External css file

This will open new untitled.css file,again go to file save this css file in your current file location.

Moving Css to External css file

Or save this Css file in new folder called Css.Give this css file name "mylayout".

Moving Css to External css file

Again make make new css file by following same steps above,give this css file name "myformat"

Moving Css to External css file

If css file was saved in current folder not in css folder you can easily drag n drop css file in css folder in folder list pane as shown in picture.

Moving Css to External css file

Now again make new ss file called main in css folder.

Moving Css to External css file

Here we have three new css files in Editing window.

Moving Css to External css file


Editing window is the area in Microsoft Expression Web where you create and modify your Web Pages.
The top of the Editing Window shows the files that are open in the form of tabs. The file you are currently working on is highlighted. You can close the current page or file by clicking on the cross displayed on the extreme right corner of the Editing Window. You can switch between the tabs by keyboard shortcuts Ctrl+Tab or Ctrl+Shift+Tab.


Now Click on how_2_do.master,in manage Styles click on Attach Style sheet.

Moving Css to External css file

Browse the style sheet

Moving Css to External css file

file the current file location > css folder,select one style sheet as shown in picture.here i select myformat.css file.

Moving Css to External css file

Click ok.

Moving Css to External css file

Again attach another style sheet follow the same procedure above.here i select mylayout.css file.Click ok.

Moving Css to External css file

In manager styles you can see both css files myformat.css and mylayout.css added.

Moving Css to External css file

Now just drag n drop all format styles from current page to myformat.css and site layout styles in mylayout.css files.

Moving Css to External css file

Moving Css to External css file

Here you can see all format styles in myformat.css file.

Moving Css to External css file

And all layout style in mylayout.css file.

Moving Css to External css file

It is particularly useful to keep one Css file for the entire website rather than having individual CSS styles in every page, advantage of having a separate CSS file is, it is easy to update and maintain the look and feel of the entire website from a single file. That is why it is better to create an external CSS file.
We made two Css file myformat.css & mtlayout.css.you can also move both these files in one called "Main.CSS".

For moving both css file click on main.css in editing window,in manage style click on attach style sheet.

Moving Css to External css file

Brwose the myformat.css & mylayout.css from current file location from css folder.

Moving Css to External css file


Here you can see both css files moved in main.css.

Moving Css to External css file

Now how to apply this main.css file in our Asp.net website? to do so go to how_2_do.matser from editing window as shown in picture and remove both css files previously applied ie.. myformat & mylayout.

Moving Css to External css file
After removing both file our master page looks horrible don't worry about that.you have to attach main.css file.

Moving Css to External css file

browse the file from file location.

Moving Css to External css file

Ahh.. now its looks better.now we can handle all css file easily.

Moving Css to External css file

In masterpage code view you can see an external css file is added.

Moving Css to External css file

Next part i will show you in another ASP.NET Tutorial ASP.NET Master Page Tutorial Part-11 (Adding Content Region/ContentPlaceholder).

Share this

Related Posts

There was an error in this gadget