You can use CssStyles with ASP.net page in different ways :-
n [HTML type]:-
External Style Sheet [Cascading Style sheet]: An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Internal Style Sheet [Embedded Style Sheet]: An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
This is a paragraph
</p>
<asp:Label style="position:absolute" ID="Label1" runat="server" Text="Label"></asp:Label>
Note:- by default in intellisense box style attribute is not provided for asp.net webserver controls but you can use it by your own in normal way as you r using for html controls:-
n [ASP.NET type]
First of all add stylesheet.css file to the website then prepare it now:-
For ex:-
// this is to style any tag[for ex: here we have use h1 for heading],in place of h1 u can use any html tag u want to style.
h1
{
background-color:Green;
color:White;
text-align:center;
}
.button //this is to style asp.net server controls
{
background-color:Purple;
}
#txtuser //this is to style particular control with id=txtuser
{
background-color:Aqua;
}
Above is ur
Now any one of the below u can use to style ur
1. Goto source à head section – add a link to the css file
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
2. Add a Theme folder to your website by rt clicking on your website à add asp.net folder à
Theme[forEx:- name it mytheme]
Now add a new item ie stylesheet file to ur ur
Now goto ur
-> Theme : mytheme[style the document at runtime]
-> StyleSheetTheme : mytheme [select this to style the document at design time]
Now after doing above process:-
-> To style server controls :-
Go to properties of control :-
- cssclass : button
-> To style a unique control :-
Go to properties of that control:-
- Id: txtuser
Above is a method of styling especially html controls , Asp.net introduced Skinfile to style particularly asp.net server controls.
Now add a new item skin file by rt clicking ur website then it will prompt a dialog box saying “ you are attempting to add special file……” just press yes, now skin file is kept in a new folder named skinfile under app_theme folder, now change skinfile to theme1,now u hv two folders under app_theme one is mytheme which is created above having stylesheet.css file and another is theme1 having skin file.
Now prepare your skin file:-
Skin file doesn’t supports intellisense box so u can copy ur
<asp:TextBox runat="server" BackColor="#FF66CC"
BorderColor="Black"></asp:TextBox>
File is created with name skinfile.skin
Now as you were applying Stylesheet using property of ur
- Theme : theme1[style the document at runtime]
- StyleSheetTheme : theme1 [select this to style the document at design time]
Note: - in skin file no need to apply any styles separately to each control as done in style sheets.
3. You can apply themes using page directive :-to apply stylesheet or skin files on page level:-
Applied at the execution time à <%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="default" theme="mytheme"%>
Applied at the design time à <%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="default" StyleSheetTheme="mytheme"%>
Note:-
-> If requirement is that theme shouldn't be applied to a particular control while rest of page have to be styled then just goto that particular control’s property:-
Enabletheming : true/false
-> Enabletheming property only works with skinfile usage and also only with theme property of document ie if stylesheettheme[applied during design time] property of document is set then it will not work ie Theme attribute supports disabling theme for certain controls while stylesheettheme doesn’t supports disabling theme for controls.
Use OF Skin Id :- if want to apply different styles to different controls using skin files then Skin Id property of controls is used.
->Prepare ur
<asp:label runat="server" backcolor="red" forecolor="white" skinid="s1"/>
<asp:label runat="server" backcolor="aqua" forecolor="blue" skinid="s2"/>
- now take two labels and set their properties as:-
label1 – SkinId : s1
label2 - SkinId : s2
now apply theme to ur
-> If want to apply theme to whole website at once :- go to web.config file
Search <pages> tag :-
this tag is used to apply theme for the entire website.
<pages theme="themename" stylesheettheme="themename">
.
.
.
.
</pages>
Note:- It is totally depend on folders to apply skin file or stylesheets as both files are kept at different folders . so the file you want to apply to ur
Note: - Mainly at project levels stylesheet.css file is used for html tags and .skin file is used for server controls , both files can be placed in one folder, and that folder is applied.
Also u can use images with stylesheet.css which can also be placed within same folder.
