Cascading Style Sheets (CSS) in ASP.NET using VB.NET
This article shows the Cascading Style Sheets (CSS) in ASP.NET Web applications.
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.