This article shows the Cascading Style Sheets
(CSS) in ASP.NET Web applications.
Cascading Style Sheets (CSS)
Cascading Style Sheets is a flexible approach towards dynamic styling in
ASP.NET. A set of codes defined by W3C (World Wide Web Consortium).
- color: color name or code
- background-color: color name or code
- background-image=url(imagename)
- font-family: fontname
- font-size: number unit ->units can be px, pt, mm, cm, in
- font-weight:bold | bolder
- text-decoration:underline | none
- position: absolute | relative
- left=x
- top=y
- cursor: hand | crosshair
Types of Cascading Style Sheets (CSS) :
There are three types of CSS.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS: Inline CSS means applying
the code directly on tags using STYLE attribute.
For example:
<body>
<form id="form1" runat="server">
<div>
<p style="background-color:Black;color:Yellow">Hello</p>
<h1 style="font-size:1in;color:red">
Hi</h1>
</div>
</form>
</body>
Internal CSS: Internal CSS means applying
the codes on the specified tags or create a named style that can be applied to
any kind of tag. Such styles are created in <STYLE> tag under <HEAD> section. To
create the named styles use . along with some name called as class name. Use
CLASS attribute on tags to apply that class.
For example:
<head runat="server">
<title>Untitled
Page</title>
<style type="text/css">
p {color:blue;font-size:12pt}
A {text-decoration:none}
A:hover{color:red}
.btn{cursor:hand}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>%</p>
<p>ass<span class="btn">aa</span>sfasfasdf</p>
<a href="http://asdfasd.com">
asdf</a><br />
<a href="http://asdfasdf.com">
as</a><br />
dfas<br />
df<br />
asf<br />
<input id="Button1" style="z-index:
100; left: 192px;
position:
absolute; top:
64px"
type="button" value="button" class="btn" onclick="return
Button1_onclick()" />
External CSS: External CSS means placing
the CSS codes in some .css file and use that file in multiple web pages using
<LINK> Tag.
<LINK href="filename.css"
rel="stylesheet">
To create a CSS file use Website -> Add new
item…-> Stylesheet.