468,168 Members | 1,686 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,168 developers. It's quick & easy.

CSS - how to reference the CSS in a web page?

Hi,

I use ASP.NET 2.0 and I created a stylesheet, but I don't know how to make
it visible to a web form "MyWebPage.aspx" that uses the master page. I put a
reference to the css in the .master but it's not visible to the newly
created page. MyWebPage.aspx doesn't have a
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>structure.

Thanks
Jan 26 '07 #1
13 1718
MyWebPage starts with something like:

<%@ Page language="c#" Inherits="MyWebPage" CodeFile="MyWebPage.aspx.cs"
MasterPageFile="Master.master" Title="This is my page"%>
<asp:Content ID="Content1" runat="Server"
but there is no <htmlstructure.

Should the code in master page which includes the reference :
<link rel="stylesheet" type="text/css" href="mystyle.css" />
be sufficient for MyWebPage to see the css document?
Jan 27 '07 #2
Dan Aldean wrote:
Hi,

I use ASP.NET 2.0 and I created a stylesheet, but I don't know how to make
it visible to a web form "MyWebPage.aspx" that uses the master page. I put a
reference to the css in the .master but it's not visible to the newly
created page. MyWebPage.aspx doesn't have a
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>structure.
Use this, instead:

<style type="text/css" media="all">
@import "mystyle.css";
</style>

Afterwards, verify the rendered HTML to make certain that the path and
everything are what you want. You don't have to do anything fancy to
make CSS work in a master page.

--
Sean

website: http://senfo.blogspot.com
Jan 27 '07 #3
hey Dan

I am using css in my masterpages in the format you have below and they work
just fine -- but then I am not using those style sheets on asp controls --
or atleast I haven't tried yet -- as I am new to aspNet -- tho I think it is
doable.

I'm just guessing here, but maybe it's yer doc type declaration that is
causing the problem or your html tag if you have xlmns attribute.

hey
"Dan Aldean" <do*******@rogers.comwrote in message
news:%2****************@TK2MSFTNGP04.phx.gbl...
Hi,

I use ASP.NET 2.0 and I created a stylesheet, but I don't know how to make
it visible to a web form "MyWebPage.aspx" that uses the master page. I put
a reference to the css in the .master but it's not visible to the newly
created page. MyWebPage.aspx doesn't have a
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>structure.

Thanks

Jan 27 '07 #4
Thank you for the reply.
Can you tell m please how I can verify the rendered HTML? Is it thru View
Code?
Unfortunately I cannot check the solution in .NET 2.0 until monday, as I
have 1.0 at home.
Where exactly can I use the <styleas I do not see any <HTMLstructure?

"senfo" <en**********@yahoo.comI-WANT-NO-SPAMwrote in message
news:%2****************@TK2MSFTNGP06.phx.gbl...
Dan Aldean wrote:
>Hi,

I use ASP.NET 2.0 and I created a stylesheet, but I don't know how to
make it visible to a web form "MyWebPage.aspx" that uses the master page.
I put a reference to the css in the .master but it's not visible to the
newly created page. MyWebPage.aspx doesn't have a
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>structure.

Use this, instead:

<style type="text/css" media="all">
@import "mystyle.css";
</style>

Afterwards, verify the rendered HTML to make certain that the path and
everything are what you want. You don't have to do anything fancy to make
CSS work in a master page.

--
Sean

website: http://senfo.blogspot.com

Jan 27 '07 #5
Thanks.
I need to use the css in the sever controls placed on the other form, not
the master.

"thersitz" <th******@gmail.comwrote in message
news:Oy**************@TK2MSFTNGP05.phx.gbl...
hey Dan

I am using css in my masterpages in the format you have below and they
work just fine -- but then I am not using those style sheets on asp
controls -- or atleast I haven't tried yet -- as I am new to aspNet --
tho I think it is doable.

I'm just guessing here, but maybe it's yer doc type declaration that is
causing the problem or your html tag if you have xlmns attribute.

hey

Jan 27 '07 #6
One more thing, it's not the master page that I need to use the css against,
it's a page that uses the master page that has some server controls which I
want to control from the style sheet
Jan 27 '07 #7
Among other things, master pages are designed to provide the overall
layout and design of an ASP.NET application at a single point (the
..master file) and reuse it in all content pages that derive from the
master. Once you've defined CSS in the master page you can reuse this
CSS across the entire site (and all controls in the content page
derived from the master).

On Jan 27, 1:51 am, "Dan Aldean" <doruro...@rogers.comwrote:
One more thing, it's not the master page that I need to use the css against,
it's a page that uses the master page that has some server controls which I
want to control from the style sheet
Jan 27 '07 #8
Thank you. In fact the master page is inherited by the other pages, isn't
it?
I tried this approach but for some reason it did not work.
Jan 27 '07 #9
But now another question pops into my mind: what do I do if I don't use a
master page?
Where do I use

<style type="text/css" media="all">
@import "mystyle.css";
</style>

immediately after

<%@ Page language="c#" Inherits="MyWebPage" CodeFile="MyWebPage.aspx.cs"
MasterPageFile="Master.master" Title="This is my page"%>

?
Jan 27 '07 #10


On Jan 27, 3:39 pm, "Dan Aldean" <doruro...@rogers.comwrote:
But now another question pops into my mind: what do I do if I don't use a
master page?
Where do I use

<style type="text/css" media="all">
@import "mystyle.css";
</style>

immediately after

<%@ Page language="c#" Inherits="MyWebPage" CodeFile="MyWebPage.aspx.cs"
MasterPageFile="Master.master" Title="This is my page"%>

?
this has to be placed in <HEADpart of your master page Master.master

Jan 27 '07 #11
what if I don't use a master page?
Jan 27 '07 #12
On Jan 27, 4:33 pm, "Dan Aldean" <doruro...@rogers.comwrote:
what if I don't use a master page?
<%@ Page language="c#" Inherits="MyWebPage"
CodeFile="MyWebPage.aspx.cs"
MasterPageFile="Master.master" Title="This is my page"%>

Here you use a master page. (MasterPageFile="Master.master")

If you don't, use following

<%@ Page language="c#" Inherits="MyWebPage"
CodeFile="MyWebPage.aspx.cs"
Title="This is my page"%>
<html>
<head>
<style type="text/css" media="all">
@import "mystyle.css";
</style>
</head>
<body>
.....
</body>
</html>

Jan 27 '07 #13
Dan Aldean wrote:
what if I don't use a master page?
Ok, maybe we need to slow down just a minute. The basic assumption I
always assume is that ASP.NET developers will at least have some basic
HTML background before they start. If you don't, that's fine --we all
had to start somewhere-- but it's much easier to learn this stuff in a
static page, first. ;-)

Basically, all HTML pages should have at least three elements, starting
with the HTML tag.

<html>
</html>

The HTML tag marks the beginning and the end of an HTML document. So
now that we have our starting point, we can move onward to the next
element that will describe some important aspects of the HTML document.
This element is obviously the HEAD tag.

<html>
<head>
</head>
</html>

Within this tag we can provide meta data that describes our page. Among
the many aspects that can be defined, one of those is the style that can
be assumed to be applied across the entire page (this isn't always the
case, but for the sake of argument, just assume that it is). So then,
knowing this, we can define the style by using the STYLE tag.

<html>
<head>
<style type="text/css" media="all">
@import "mystyle.css";
</style>
</head>
</html>

So cool...Now we have a simple HTML document that describes where the
browser can locate the style sheet, but we don't have anything useful to
display, yet. The rendered aspects of the page fall in the last of
three tags that you'll most likely find in any HTML document. That is
the BODY tag.

<html>
<head>
<style type="text/css" media="all">
@import "mystyle.css";
</style>
</head>
<body>
</body>
</html>

To make things interesting, let's add an ID to a CSS named mystyle.css
so we can see what affect the style sheet has on the document.

div.demonstration
{
background-color: #ff0000;
}

Now we can put this style to use by referencing it in our HTML page.

<html>
<head>
<style type="text/css" media="all">
@import "mystyle.css";
</style>
</head>
<body>
<div class="demonstration">
This is a test.
</div>
</body>
</html>

If we've done everything correctly, the background color of that div
should be red. Granted, we would normally have defined such a style in
a span tag or what have you, but this was just a simple example to prove
a point.

One important thing to note is that it's usually a good idea to define
which (X)HTML standard that your page was designed to confine to. My
personal recommendation is XHTML 1.0 strict because it forces a more
structured designed and helps to ensure that styles are defined in the
CSS rather than within the document. The reason for doing this is so
that it's easier to update the entire site as a whole rather than having
to go back and manually edit each element individually if an update to
the style is required. It is for this reason that I personally always
start my HTML pages with a template similar to the following.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Untitled Page</title>
<style type="text/css" media="all">
@import "mystyle.css";
</style>
</head>
<body>
</body>
</html>

Now I've just gone of a major tangent from your original question;
however, now that we have a basic understanding of how an HTML document
should be laid out, we can understand better how to design our master
page to work across the entire site (or at least most pages in a site).

In its simplest form, my master pages will always contain everything
from a template similar to the one I posted above because it is these
aspects of the HTML document that I wish to remain consistent across all
of the pages for my site. That said, it should be obvious that portions
within the BODY tags are assumed to be unique to each individual page.

Following is the exact contents of one of my master pages:

<%@ Register TagPrefix="sef" TagName="header" Src="~/Common/header.ascx" %>
<%@ Register TagPrefix="sef" TagName="sidebar"
Src="~/Common/sidebar.ascx" %>
<%@ Register TagPrefix="sef" TagName="footer" Src="~/Common/footer.ascx" %>
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head runat="server">
<title>Untitled Page</title>
<link href="../Styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<sef:header ID="myheader" runat="server" />
<div id="content">
<asp:contentplaceholder id="ContentPlaceHolder1"
runat="server">
</asp:contentplaceholder>
</div><!-- ends content -->
<div id="footer">
<sef:footer ID="seffooter" runat="server" />
</div><!-- ends footer -->
</div><!-- ends container -->
</form>
</body>
</html>

As you can see, I have defined a section for a header, a footer and most
importantly, the body, which can be found in the place holder.

I hope this helps,

--
Sean

website: http://senfo.blogspot.com
Jan 28 '07 #14

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Alphonse Giambrone | last post: by
9 posts views Thread by | last post: by
68 posts views Thread by Jim Langston | last post: by
reply views Thread by kamranasdasdas | last post: by
reply views Thread by gcreed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.