views:

942

answers:

5

Those are might assumptions, are these correct?

  1. Layout using CSS is preferred over using tables.
  2. CSS ishould be extracted in a separate file, rather than in-lined.
  3. CSS are imported (linked) from that is located in the site.master, therefore all .css are imported for (and apply to) all .aspx pages.

Given that, I have a project with one master page, and two .aspx pages. Each of those pages has a table with id "records".

Question: Can I import a .css file for each individual .aspx page?

Is there a better way to scope html elements within single page?

A: 

If it's tabular data - use tables, not CSS. CSS is used for overall page layout and the styling of individual elements - something you usually want consistent over many pages.

When people say "use CSS instead of tables" they mean it in a sense of not using tables for the overall page layout (like where the menu, the header, the footer and the content on the page is located) but to use tables for actual tables ^^

Oskar Duveborn
+5  A: 

CSS is preferred over tables for everything except actually presenting A Table (e.g. tabular data, like a spreadsheet or a grid). Although there are a few weird cases where tables are the only way to accomplish some effects cross-browser. Mainly - always use CSS except when you can't. Then use tables :)

To your first question - of course you can include CSS files on the individual page. You can even do it using placeholders:

.master:
<head>
    <link rel="stylesheet" type="text/css" href="global.css" />
    <asp:ContentPlaceHolder runat="server" id="stylesheet" />
</head>

.aspx:
<asp:Content runat="server" ContentPlaceHolderID="stylesheet">
    <link rel="stylesheet" type="text/css" href="page_specific.css" />
</asp:Content>

To scope styles to the page level, I often put a class on the <body> tag:

<body class="contact-page">

Then in CSS I can target specific items that should be different on that page:

.contact-page .something h3 .more {style}
Rex M
A: 

if you leave a content section for the head of your document in your master page, then you can manually link to different css files; but why don't you just specify different classes and ids for the items that you want to appear differently and have those classes and ids in the same css file?

so instead of something like:

<html>
<head>
<link to your css file />
</head>
<body>
<asp:ContentPlaceHolder id="content" runat="server" />
</body>
</html

on your master page file, you can do this:

<html>
<head>
<asp:ContentPlaceHolder id="head" runat="server" />
</head>
<body>
<asp:ContentPlaceHolder id="content" runat="server" />
</body>
</html

and then put the different css files in that new content place holder in the head of your document.

Sarah Jean
A: 

Let's look at your assumptions. All of them are generally correct, but it's worth taking a closer look:

1) Layout using CSS is preferred over using tables.

Sort of. It would be more accurate to say that it's semantic layout vs non-semantic layout, and CSS is the normal means to accomplish the semantic layout. The difference is that sometimes it's just not possible to accomplish the desired layout using only semantically-appropriate structures. I'm gonna eat it for this, but when faced with the choice between a whole bunch of extra div tags that don't belong vs a single table, the table may be the better choice.

2) CSS ishould be extracted in a separate file, rather than in-lined

Sort of. High level CSS should go in the same file. But you don't necessarily want all the styling for the entire site to go into the same file, because that would mean always having styles available that may only be used on a single page. And you also don't necessarily want each page to have to download the main CSS file and it's own css file, since one of the ways to improve performance on a site is to reduce the number of total http requests required. So there's a certain balancing act you need to consider.

3) CSS are imported (linked) from that is located in the site.master, therefore all .css are imported for (and apply to) all .aspx pages.

Sort of. CSS files are typically linked the page's head element. The easiest way to put something in there is just hard code it in the master page. But you can modify the page's head element from a content page if you really want to.

Joel Coehoorn
+1  A: 

set up themes. a css file as part of a theme will get imported automatically.

so, you'd have a theme for each of your pages, which you can specify in the markup of your content page. each of the theme folders you define would have an appropriate version of your stylesheet. if you don't want to maintain redundant css declarations, you can separate those into another file and link it outside the themes.

lincolnk