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.
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.
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.
|