Difference between inline CSS and External CSS

Question

2.00/5 (1 vote)

See more:

Hi. I am working on a project in ASP.Net and I use both inline CSS and External CSS on a LinkButto.

Can someone please explain to me why this inline CSS works (shows the button):

CSS

<asp:LinkButton ID="lnkViewPayslip" runat="server" Width="16px" Height="16px" style="background:url(../Images/GridViewButtons/payslipview.png) no-repeat center;width:16px;height:16px"></asp:LinkButton>

but this one doesn't work (shows no image):

in head tag:

CSS

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

in HeaderFooterMainTemplateEmp.css which is located in Style folder:

CSS

.payslip {background:url(../Images/GridViewButtons/payslipview.png) no-repeat center;width:16px;height:16px }

in the page:

CSS

<asp:LinkButton ID="lnkViewPayslip" runat="server" CssClass="payslip" Width="16px" Height="16px"></asp:LinkButton>

I am really confused right now. I am sure I am referring to the right external CSS because other CssClass works. :(

Thank you very much!

Posted 3-Jan-16 15:58pm

bjay tiamsic

Updated 21-Apr-19 18:34pm

Add a Solution

2 solutions

Solution 1

You are using relative path here. The image location, when you use inline CSS, might be correct (something like: [root]/Images/GridViewButtons/payslipview.png).

However, when you are moving this to a CSS file, the path resolved might not be correct. Assuming your solution structure is [root]->AllCSS->SubFolder->CSSFile. In this case, the path resolved will just be incorrect. Your application will be trying to find the image under AllCSS folder.

You just need to ensure that the relative path mentioned in the CSS file is accurate relative to the CSS file.

Posted 3-Jan-16 16:46pm

dan!sh

Comments

bjay tiamsic 3-Jan-16 23:27pm

but this one works in HeaderFooterMainTemplateEmp.css

.doc-item { background:url(../Images/GridViewButtons/doc.png) no-repeat 0px; width:16px; height:16px; display:inline-block; }

dan!sh 4-Jan-16 0:06am

Is the "relative" path mentioned in the CSS file correct?

bjay tiamsic 4-Jan-16 21:55pm

Yes sir. I am 100% that it is correct because other classes work when called in CssClass property of the control

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

MukeshKumar89 · Accepted Answer · 2016-01-03T19:16:00

Hi,

Let me give a small example of each to understand it better.

Inline CSS

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! 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: sienna; margin-removed 20px">This is a paragraph.</p></pre><br mode=" hold=" /><br mode=" html="><br mode="></p>

External CSS

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>

css" href="mystyle.css" />

</head>

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

hope this will help you.
thanks