ASP.NET - how to add a css file in asp.net page?

Asked By aman on 13-Oct-11 01:35 AM

hi all,

i want to add a css file in my asp.net application......please help me how exactly to achieve it

please give example...

thanks

Jitendra Faye replied to aman on 13-Oct-11 01:37 AM

Applying CSS to asp.net web application

Applying CSS is easy
Create a .CSS File in notepad or you can use CSS Editor available with VS.Net

Let say i have create .CSS File and placed it in folder "CSS"

Create Sample .CSS File named "MyCSS.CSS" you can choose suitable name for .CSS File

Step1: Adding .CSS File to Web application

http://3.bp.blogspot.com/_nuQwSyDoLk8/RvGgPjbVj0I/AAAAAAAAAJI/vvbQ48MzUv8/s1600-h/CreatingCSS.bmp
Now copy and paste the .CSS Content, example

To apply to following style to all Paragraph Tag.
p
{
color:Red;
font-size:x-large;
font-family:Verdana;
background-color:Gray;
}

To apply to following style to all Heading1 Tag.
h1
{
color:Blue;
background-color:Yellow;
font-family:Comic Sans MS;
}

Let say, I want to apply a specific style to Paragraph Tag to some Page3 in my Web Application, you can do this using "class" attribute of Paragraph Tag, here you need to apply <p class="pForMyPage3">.
.pForMyPage3
{
color:Gray;
font-size:x-large;
font-family:Verdana;
background-color:Red;
}

Similarly i have used same for button control.
.ButtonControl
{
background-color:Red;
color:Yellow;
}

Step2: Adding content to .CSS File

http://1.bp.blogspot.com/_nuQwSyDoLk8/RvGgvDbVj1I/AAAAAAAAAJQ/_nRbu6Zbxhs/s1600-h/CSSFile.bmp

Step 3: Adding .CSS File Link into .aspx Page

See figure for knowing how to apply CSS to control and adding link tag.
http://1.bp.blogspot.com/_nuQwSyDoLk8/RvGikDbVj2I/AAAAAAAAAJY/uDaXo86fFi4/s1600-h/CSS.bmp

Try this and let me know.

Riley K replied to aman on 13-Oct-11 01:38 AM

Hi,

Applying CSS is easy
Create a .CSS File in notepad or you can use CSS Editor available with VS.Net

Let say i have create .CSS File and placed it in folder "CSS"

Create Sample .CSS File named "MyCSS.CSS" you can choose suitable name for .CSS File

Step1: Adding .CSS File to Web application

http://3.bp.blogspot.com/_nuQwSyDoLk8/RvGgPjbVj0I/AAAAAAAAAJI/vvbQ48MzUv8/s1600-h/CreatingCSS.bmp
Adding content to .CSS File

http://1.bp.blogspot.com/_nuQwSyDoLk8/RvGgvDbVj1I/AAAAAAAAAJQ/_nRbu6Zbxhs/s1600-h/CSSFile.bmp

Adding .CSS File Link into .aspx Page

See figure for knowing how to apply CSS to control and adding link tag.

http://1.bp.blogspot.com/_nuQwSyDoLk8/RvGikDbVj2I/AAAAAAAAAJY/uDaXo86fFi4/s1600-h/CSS.bmp

Regards

Suchit shah replied to aman on 13-Oct-11 01:39 AM

Right click on your project and select Add New Item from the menu. Select the Style Sheet, give it a name, and then click Add.

The CSS file will be added to your project.

then after creating css file if u want to add it on any of the page then u can do it in following way

<head>
<link id="MyStyleSheet" rel="stylesheet" type="text/css" runat="server" />
</head>

TSN ... replied to aman on 13-Oct-11 01:40 AM

hi..

Applying CSS to asp.net web application

Applying CSS is easy
Create a .CSS File in notepad or you can use CSS Editor available with VS.Net

Let say i have create .CSS File and placed it in folder "CSS"

Create Sample .CSS File named "MyCSS.CSS" you can choose suitable name for .CSS File

Step1: Adding .CSS File to Web application

http://3.bp.blogspot.com/_nuQwSyDoLk8/RvGgPjbVj0I/AAAAAAAAAJI/vvbQ48MzUv8/s1600-h/CreatingCSS.bmp
Now copy and paste the .CSS Content, example

To apply to following style to all Paragraph Tag.
p
{
color:Red;
font-size:x-large;
font-family:Verdana;
background-color:Gray;
}

To apply to following style to all Heading1 Tag.
h1
{
color:Blue;
background-color:Yellow;
font-family:Comic Sans MS;
}

Let say, I want to apply a specific style to Paragraph Tag to some Page3 in my Web Application, you can do this using "class" attribute of Paragraph Tag, here you need to apply <p class="pForMyPage3">.
.pForMyPage3
{
color:Gray;
font-size:x-large;
font-family:Verdana;
background-color:Red;
}

Similarly i have used same for button control.
.ButtonControl
{
background-color:Red;
color:Yellow;
}

Step2: Adding content to .CSS File

http://1.bp.blogspot.com/_nuQwSyDoLk8/RvGgvDbVj1I/AAAAAAAAAJQ/_nRbu6Zbxhs/s1600-h/CSSFile.bmp

Step 3: Adding .CSS File Link into .aspx Page

See figure for knowing how to apply CSS to control and adding link tag.
http://1.bp.blogspot.com/_nuQwSyDoLk8/RvGikDbVj2I/AAAAAAAAAJY/uDaXo86fFi4/s1600-h/CSS.bmp

Problem with using .CSS File in Asp.net Web Application

You cannot apply CSS to some asp.net server controls.

To Overcome .CSS File problem in Asp.net 2.0 Web Application
You can make use of Themes.

dipa ahuja replied to aman on 13-Oct-11 01:57 AM

There are two ways to use the CSS .

1.Using seperate css file

2. Using STYLE tag

Steps to add CSS file:

1. Right Click on your site - > Add New Item - > Add StyleSheet

2.Now add CSS classes in your class file for ex:

for ex:

.txt { color:Gray; background-color:Green; }

3. Link the file to your aspx page

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />

4. Use css classes in controls

<asp:TextBox CssClass="txt" ID="TextBox1" runat="server"></asp:TextBox>

Done!

Reena Jain replied to aman on 13-Oct-11 02:11 AM

HI,

You can apply CSS formatting to your web pages at different levels. The first level applies formatting to an entire set of pages in the same time, and this is the level we are mostly interested in in this tutorial. The next two lower levels is to apply CSS to one page by defining the CSS styles in the head of this page or to apply CSS to one particular element inside the page using the STYLE attribute.
Go to this website
http://www.w3schools.com/Css/default.asp
you will find everything about CSS.

Anoop S replied to aman on 13-Oct-11 02:38 AM

How to Programmatically add CSS Stylesheet file to Asp.Net page

Here is how to do it, just add this code to the Page_Init event handler on the Page where you want to insert CSS file:

    protected void Page_Init(object sender, EventArgs e)
    {
      HtmlLink css = new HtmlLink();
      css.Href = "css/fancyforms.css";
      css.Attributes["rel"] = "stylesheet";
      css.Attributes["type"] = "text/css";
      css.Attributes["media"] = "all";
      Page.Header.Controls.Add(css);

    }

And thats it, next time you load this page, reference to your CSS file will be added at runtime to the page HTML code and loaded.