ASP.Net Master Pages: Stylesheet Per Page
These are my assumptions, are they correct?
- Layout using CSS is preferred over tables.
- CSS should be extracted into a separate file, not internally.
- The CSS is imported (linked) from what's in the site.master file, so all .css is imported for (and applied) to all .aspx pages.
Considering I have a project with one master page and two .aspx pages. Each of these pages has a table with "record" identifiers.
Question: Is it possible to import the .css file for each individual .aspx page?
Is there a better way to combine html elements within one page?
source to share
CSS is preferred over tables for everything other than the actual presentation of the table (such as tabular data, such as a table or grid). There are some weird cases though where tables are the only way to make some effects cross-browser. Basically - always use CSS except when you can't. Then use tables :)
To your first question - of course you can include the CSS files on a separate page. You can even do this with 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>
For page-level area styles, I often put a class in a tag <body>
:
<body class="contact-page">
Then, in CSS, I can target specific elements that should be different on that page:
.contact-page .something h3 .more {style}
source to share
If it's tabular data, use tables, not CSS. CSS is used for the overall layout of the page and for styling individual elements - something you usually want to be consistent across many pages.
When people say "use CSS instead of tables" they mean it in the sense of not having tables for the overall layout of the page (like where the menu, header, footer and content are located on the page), but to use tables for the actual tables ^^
source to share
customize themes. css file as part of the theme is automatically imported.
This way, you will have a theme for each of your pages, which you can specify in your content page markup. each of the themes you specify will have a corresponding version of your stylesheet. if you don't want to maintain redundant css declarations, you can separate them from another file and link it outside of themes.
source to share
if you leave the content section for the head of your document in the master page, you can manually link it to different css files; but why don't you just specify different classes and IDs for the elements you want differently, and have those classes and IDs in the same css file?
rather than something like:
<html>
<head>
<link to your css file />
</head>
<body>
<asp:ContentPlaceHolder id="content" runat="server" />
</body>
</html
in your homepage 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 place various css files in this new content holder in the header of your document.
source to share
Look at your assumptions. All of them are usually correct, but it is worth taking a closer look:
1) Layout using CSS is preferred over using tables.
Grade. It would be more accurate to say that this is semantic layout versus non-semantic layout, and CSS is the usual means of doing semantic layout. The difference is that sometimes it is simply not possible to accomplish the desired layout using only semantically appropriate structures. I'm going to eat it for this, but when faced with a choice between a whole chunk of extra Div tags that don't belong to the same table, a table might be the better choice.
2) CSS should be extracted in a separate file, not aligned
Grade. High-level CSS must go in the same file. But you don't necessarily want the entire style for the entire site to end up in the same file, because that would always mean having styles that can only be used on one page. And you also don't necessarily want each page to load the main CSS file and its own css file, as one way to improve the performance on the site is to reduce the number of HTTP requests required. Thus, you need to consider a certain balancing act.
3) CSS is imported (linked) from what's in the site.master file, so all .css is imported for (and applied to) all .aspx pages.
Grade. CSS files are usually associated with a page header element. The easiest way to put something in there is just hard-code on the homepage. But you can change the page header element from the content page if you really want to.
source to share