Next


CSS (Cascading Style Sheets)

• This is to overcome the limitations of HTML and also to apply common style among several controls on the same or different web pages.
• This can also be called as “DHTML” (Dynamic Hypertext Markup Language).
• DHTML offers better designing features, which are not supported by classic HTML.
• This also used to implement common design styles among different types of controls.
• It contains no new tags. It contains several attributes for better designing.
• In fact, CSS is not only related to ASP.NET. It is the generalized web page designing concept, which is available in PHP and J2EE etc., also.
• In ASP.NET, these styles can be applied for both HTML tags and ASP.NET controls also.

Implementation Models of CSS

1) Inline Styles: The styles are limited to the currently element (tag) only.
2) Internal Styles: The styles are limited to the tags, used in the same page.
3) External Styles: The styles can be applied to the tags, within the same web site (multiple web pages).

CSS Attributes:

Implementation of CSS Styles

1) Inline Styles:
Syn: <tag Style=”attribute1:value1; attribute2:value2;….”>
Description: The CSS styles can be applied for the current tag only.

2) Internal Styles:

Syn:
<head> <style type=”text/css”> tag { attribute1:value1; attribute2:value2;…. } </style> </head>
Description: The CSS styles can be applied for every instance of the specified tag in the current page.

3) External Styles:

Syn: 
(“xxxxxx.css” file)
		tag
		{
			attribute1:value1; attribute2:value2;….
		}
        

Description: The CSS styles can be applied for every instance of the specified tag in every page, that is linked with the “.css” file.
To link the “.css” file, write the following tag in the page.
<head>
<link href=”css file path” rel=”Stylesheet” type=”text/css” />
</head>
Instead, you also drag and drop the “.css” file from Solution Explorer into the web page. Then Visual Studio automatically generates the above “<link>” tag in the “<head>” tag automatically.
</head>

Adding “.css” files to the Web Site
• Click on “Web Site” menu – “Add New Item”.
• Select “StyleSheet” option.
• Enter the name of the css file. Ex: StyleSheet.css
• Click on “Add”.
• Then the css file will be added to the web site.

CSS Classes
• In the “Internal Styles” and “External Styles”, common styles will be applied for every instance of particular tag. Instead, you can have a choice for applying the css styles for the required instances only, with the concept called “CSS classes”.
• Finally, the “CSS Classes” concept can be used in two situations:
1) To apply common css styles for selective instances of a tag.
2) To apply common css styles for selective instances of multiple tags.
• To create a css class, follow the syntax:

.classname
{
    attribute1:value1; attribute2:value2;….
}
        

• To apply the css style for the selective html tag, follow the syntax:
<tag class=”classname”>
• To apply the css style for the selective server controls tag, follow the syntax:
<tag CssClass=”classname”>

Demo on CSS Files

AspProgramming


StyleSheet.css
.autocapitaltextbox
{
	color:Green;
	font-family: Tahoma;
	font-size: 20px;
    border-style: ridge;	
    text-transform: capitalize;
}
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        h2
        {
        	color:Blue;
        	font-family: Tahoma;
        	font-size: 30px;        	
        }
        .mytextbox
        {
        	color:Red;
        	font-family: Tahoma;
        	font-size: 30px;
        	border-style: double;
        }
    </style>    
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />    
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <h1>Welcome to ASP.NET Programming</h1>
        <h1 Style="font-family:Lucida Handwriting; font-size: 35px; font-weight:bold; text-align:center; text-decoration:underline; text-transform:capitalize; letter-spacing:5px; word-spacing:10px; line-height:2; background-color:lightgreen; color:red; border-style: dotted; border-color:Red; border-width:10px; border-bottom-style:dashed; border-top-style: groove; cursor: hand; width: 700px;">welcome to asp.net programming</h1>
        <h2>ASP.NET AJAX</h2>
        <h2>ASP.NET Web Services</h2>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><br />
        <asp:TextBox ID="TextBox2" runat="server" CssClass="mytextbox"></asp:TextBox><br /><br />
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="mytextbox" Width="221px">
            <asp:ListItem>One</asp:ListItem>
            <asp:ListItem>Two</asp:ListItem>
            <asp:ListItem>Three</asp:ListItem>
        </asp:DropDownList><br /><br />
        <asp:TextBox ID="TextBox3" runat="server" CssClass="autocapitaltextbox"></asp:TextBox>
    </div>
    </form>
</body>
</html>