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

Discussion in 'ASP .Net' started by Dan Aldean, Jan 26, 2007.

  1. Dan Aldean

    Dan Aldean Guest

    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
    Dan Aldean, Jan 26, 2007
    #1
    1. Advertising

  2. Dan Aldean

    Dan Aldean Guest

    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 <html> structure.

    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?
    Dan Aldean, Jan 26, 2007
    #2
    1. Advertising

  3. Dan Aldean

    senfo Guest

    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
    senfo, Jan 27, 2007
    #3
  4. Dan Aldean

    thersitz Guest

    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" <> wrote in message
    news:%...
    > 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
    >
    thersitz, Jan 27, 2007
    #4
  5. Dan Aldean

    Dan Aldean Guest

    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 <style> as I do not see any <HTML> structure?

    "senfo" <-WANT-NO-SPAM> wrote in message
    news:%...
    > 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
    Dan Aldean, Jan 27, 2007
    #5
  6. Dan Aldean

    Dan Aldean Guest

    Thanks.
    I need to use the css in the sever controls placed on the other form, not
    the master.

    "thersitz" <> wrote in message
    news:...
    > 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, Jan 27, 2007
    #6
  7. Dan Aldean

    Dan Aldean Guest

    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
    Dan Aldean, Jan 27, 2007
    #7
  8. 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" <> wrote:
    > 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
    Alexey Smirnov, Jan 27, 2007
    #8
  9. Dan Aldean

    Dan Aldean Guest

    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.
    Dan Aldean, Jan 27, 2007
    #9
  10. Dan Aldean

    Dan Aldean Guest

    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"%>

    ?
    Dan Aldean, Jan 27, 2007
    #10
  11. On Jan 27, 3:39 pm, "Dan Aldean" <> wrote:
    > 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 <HEAD> part of your master page Master.master
    Alexey Smirnov, Jan 27, 2007
    #11
  12. Dan Aldean

    Dan Aldean Guest

    what if I don't use a master page?
    Dan Aldean, Jan 27, 2007
    #12
  13. On Jan 27, 4:33 pm, "Dan Aldean" <> wrote:
    > 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>
    Alexey Smirnov, Jan 27, 2007
    #13
  14. Dan Aldean

    senfo Guest

    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
    senfo, Jan 28, 2007
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dude
    Replies:
    0
    Views:
    338
  2. Reny J Joseph Thuthikattu
    Replies:
    1
    Views:
    539
    =?Utf-8?B?UHJha2FzaC5ORVQ=?=
    Dec 30, 2004
  3. cypress phill

    reference.vb missing after web reference update

    cypress phill, Mar 29, 2006, in forum: ASP .Net Web Services
    Replies:
    0
    Views:
    147
    cypress phill
    Mar 29, 2006
  4. ToTo

    Web reference - Reference.cs cannot be updated

    ToTo, Dec 4, 2006, in forum: ASP .Net Web Services
    Replies:
    1
    Views:
    148
    John Saunders
    Dec 4, 2006
  5. Replies:
    3
    Views:
    354
Loading...

Share This Page