Stylesheet Tips for Visual Studio .Net and ASP.Net

Part of the You Can Learn ASP.Net and C# series.
By Ken Brown
Editor, YouCanLearnSeries.com
Updated:
February 21, 2005

I learned something new today that I thought I would share with you. It is a very simple thing concerning CSS and ASP.Net in the Visual Studio .Net environment. In the past, I always added the line of code to attach to the stylesheet, but I always had to look it up, because I couldn't remember the exact syntax.

It turns out there is an easy way to add the CSS stylesheet to your webform. This article will show you how.

Add a new webform in a test project. Then add a web user control from the toolbox. Maybe add a button control. Right click on your project, choose menu item "ADD", "Add New Item", and choose templates: Style Sheet. You can use the default name of StyleSheet1.css.

Adding a stylesheet to your VisualStudio project.


Add the following code to the css page.

div
{	
	background-color: Aqua;
	border: solid medium navy;
	width: 200px;
	height: 200px;
}
Now this has added the style information you need for the HTML div tag. We placed a background color of aqua, a medium size solid border with a color of navy and width and height of 200 pixels.

Now we will add the div tag to our html. Let's wrap the button control we placed on the form with our div tag. Click on the HTML tag for webform1.aspx. And place <div> in front of the button and </div> behind the button. If you were to run the web app right now, you would only see the button that you created. But now we are going to add the Stylesheet to your app.

On your webform choose the design tab at the bottom of the page. Then go to the solution explorer window and left click on the StyleSheet1.css object. Then drag and drop the StyleSheet1.css onto the webform.

Now by dragging and dropping the stylesheet onto your webform, it automatically places the following code into your html.

<LINK href="StyleSheet1.css" type="text/css" rel="stylesheet">
Now you could have just as easily typed that code into your html, but you have to know it goes into the html head tag. Just dragging and dropping it puts the code you need where you need it. It is so easy to do.

Run the form and see your div tag and stylesheet do their things it should look like this when you are done.

WebForm showing stylesheet tricks with changes.


This little trick isn't going to make or break your web application, but it will save you a lot of time over the course of a 100 page project. So create your stylesheet and then drag and drop it onto your form.

Home| About Us | NewsLetters | Contact Us |

Copyright © 2004-2014 You Can Learn Series

You Can Learn Series Home Page You Can Learn Series
You Can Learn Series Home Page Home            About the creators of YouCanLearnSeriesAbout Us      Contact YouCanLearnSeriesContact Us      Site map of YouCanLearnSeriesSite Map      Privacy Policy of You Can Learn SeriesPrivacy Policy       Terms of Use of You Can Learn Series web siteTerms of Use       YouCanLearnSeries RSS feed for C# tips and tutorials     
C# and ASP.Net Programming TipsC# and ASP.Net      SQL Tutorial, tips and tricks for DBA'sSQL       Landscaping Tips for Home GardenersLandscaping       WeightLifting Tips for the Young and OldWeightLifting       Kennos BlogBlog       Good health TipsGoodHealth       Learn about Great Travel DestinationsTravel     Web Business TipsWeb Business            You Can Learn Series' Online StoreStore



You Can Learn C# and ASP.Net SeriesC# and ASP.Net
  Using Client Side Code with C# and ASP.NetClient Side Code
  Using Client Side State Management with C# and ASP.NetClient Side State Management
  Create a C# Class in Visual StudioCreate A Class
  Use A Class in C#Use A Class
  Create a Solution in Visual StudioCreate a Solution
  Create a Project in Visual StudioCreate a Project
  Create an RSS feed for your Web SiteCreate an RSS Feed
  Create an RSS feed for your Web SiteListItemCollection
  Set Events in ASP.NetSet Events ASP.Net
  Set Events in C#Set Events C#
  What is Session State and How to Use it.Session State
  Creating and Using the C# SortedList ObjectSortedList Object
  Stylesheet Tips for Visual Studio .Net and ASP.NetStyleSheet Tricks
  Using C# MethodsUsing Methods
  Pass Objects to MethodsPass Objects to Methods
  Pass Objects from MethodsPass Objects from Methods
  Using Client side State management like ViewState and Hidden fieldsView State
  LDAP, What is Lightweight Directory Access ProtocolWhat is LDAP
  Build an LDAP ReaderBuild an LDAP Reader
  Convert information from LDAP to a Web ServiceLDAP To Web Service
  Question of the dayQuestion of the Day

You Can Learn SQL SeriesSQL
You Can Learn Landscaping and Gardening SeriesLandscape Tips
You Can Learn WeightLifting SeriesWeightLift Tips
Kenno's BlogBlog
You Can Learn Good Health SeriesGood Health Tips
You Can Learn Good Series NewslettersNewsletters
Learn about Great Travel DestinationsTravel
You Can Learn Series Web Business TipsWeb Business Tips
Merchandise Available from You Can Learn SeriesMerchandise

Bill Welter - The Prepared Mind of a Leader




Americas Public Schools