Quick Guide to CSS with ASP.NET

Introduction

Cascading Style Sheets (CSS) let you style and position elements on a page, using clean and efficient code. It is more appropriate to use CSS for layout rather than tables, as it creates a lighter page.

Starting out

To use CSS, you can either keep all the CSS code in a separate file, or include it at the top of your webpage. CSS can also be used inline, as is done when using the style property through Visual Studio, but will take up more space than the method shown here.

This example shows how to create a separate file and integrate that, as it seen as a tidier method.

After opening Visual Studio and creating a new ASP.NET web application, right click on the project and select 'Add New Item...'. Then, from the box, select Style Sheet, and click Add. This will add a file named 'StyleSheet.css' to your web application.

Double click on it and you'll see a nearly empty CSS file - remove the existing code, and replace with a new CSS Class, as seen below.

Classes in CSS work in the same way as they do in Object Orientated Programming (OOP) - they can inherit from each other, and each have their own properties. A CSS class begins with a full-stop, as above - this class, bigred, will have a font size of fifty pixels, and it's fore colour will be red. Note that CSS uses the American spelling of colour - color.

This class is applied by adding two parts to our Default.aspx file. First, we need to connect the StyleSheet.css file to the ASP.NET file, by adding line 7, seen below.

Text can then be added to the file, and applied to the CSS class by adding lines 10 and 11, between the body tags. You can then quickly view this page in a browser by pressing Ctrl Alt W. The web page should then appear, with large, red text, as below.

If anything detailed here is unclear, please let me know.

Quick Guide to CSS with ASP.NET was originally written on 10/12/2008 8:32:31 PM, and last updated on the 10/12/2008 8:44:29 PM category.