Wednesday, April 18, 2007

Adding CSS to ASP.NET

geI have no idea how to deal with CSS, and also include CSS into my ASP.NET pages.
After searching in the Internet, I finally found that it's so simple to do it.

First of all, do not set the font properties for all the controls if you decide to use CSS, otherwise the properties set will overwrite the CSS attributes.

1) Add a new item --> Select "Style Sheet" from the item --> Say, name it "Style1.css".
2) Copy the following text into the CSS file.



body
{
font-family: Verdana;
font-size: 8pt;
}
.MyLabel
{
color:Olive ;
font-size:
8pt;
font-weight:bold;
font-style:italic;
font-family:Century
Gothic;
}
.MyTextBox
{
color:Silver ;
font-size: 15pt;
font-family:Verdana ;
}



Where "MyLabel" and "MyTextBox" is the CSS name.
3) Copy this statement in the ASP page between the "head" block:
<link href="Style1.css" type="text/css" rel="stylesheet">
OR
Select "DOCUMENT" property for the ASP page, then set the property "StyleSheet" value to the CSS filename, i.e. Style1.css
4) Create a Label and a TextBox on the page.
Then set the property CssClass for Label to "MyLabel", and "MyTextBox" for the TextBox.
You'll see the effect.
My CSS Example

Isn't it really simple? I've applied this to my current project, which makes it look much nicer and neater. I'm happy for that. ^_^

Thanks OceanGenie for telling me this good site for learning CSS - CSS Tutorial from W3Schools. If you want to learn more about How To write the CSS attributes, I guess this site consists of many good tutorials.

No comments:

Post a Comment