|
 | |
 | RTernier | | Asp.Net User |
| Order that CSS is added to the master page & Content Pages. | 1/25/2007 11:02:31 PM |
| 0/0 |   |
|
I have a specific order that needs to be followed when rendering CSS.
If say you use the following in a CSS file:
:link,:visited {text-decoration: none;}
ul,ol {list-style: none;}
h1,h2,h3,h4,h5,h6,pre,code,p {font-size: 1em;}
ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin: 0; padding: 0;}
a img,:link img,:visited img {border: none;}
address {font-style: normal;}
You will want this FIRST on every page when you link to your CSS files. This seems imposible with MasterPages - which is rather unfortunate. It's nice to have say... 10 CSS files that are called in order so you can nest and do better things with CSS, rather than have 1 or 2 files that are jam packed.
Has anyone had any luck with this sort of thing?
The Killer Ninja Coding Monkeys thank those that mark helpful posts as answers. My Site | My Examples | My Blog |
| Mikesdotnetting | | Asp.Net User |
| Re: Order that CSS is added to the master page & Content Pages. | 1/26/2007 8:52:08 AM |
| 0/0 | |
|
The order or precedence in which css is applied is: 1. Inline styles first. That is where you apply a style rule to a specific element inline, for example <span style="font-weight:bold" class="mystyle"> In this case, the font will always be bold, regardless of what myclass says, or where myclass is defined.
2. Styles embedded in the document. In the above example, .mystyle{...} declared in the head will override .mystyle{...} declared in a linked css file
3. Styles in a linked css file. I'm not sure how the order of precendence is determined for multiple linked style sheets. But I'm sure that conflicts may possibly occur, which is as good a reason I can think of for keeping to one sheet. There's nothing you can do in multiple files that you can't in one. I normally segment my css file, so that html element styles are declared at the top, then the id selectors, then class selectors. I will comment it and even put a list of contents at the top with larger css files.
Regards Mike 8 out of 10 questions have already been asked. Their answers can be found using Google. Go on, try it.If you prefer code samples or tutorials in another language, translate it for free at www.codechanger.com |
| Adam.Kahtava | | Asp.Net User |
| Re: Order that CSS is added to the master page & Content Pages. | 1/26/2007 1:33:35 PM |
| 0/0 | |
|
Themes automagically include the CSS files from the App_Theme directory into the header of the master page(s). This behavior is neat, but it ends up comproming many of CSS's features (loading order is only one example). A possible work around: CSS files are included in the master page header in alphanumeric order, so by naming your css files in a coresponding order you can achieve cascades. Example: aaStyleSheet.css would get included in the master page header before zzStyleSheet.css Another alternative: Don't use Themes or move your CSS out of the App_Theme directory - Master Pages can exist without Themes. I agree it is nice to have 10 CSS files, software engineering is about managing complexity, using many CSS files facilitates encapsulation and reuse. I personally like to separate my CSS files into layout / structure, color schemes, text rendering, printer friendly, hand held friendly, and IE quirk fix. I also like to define a CSS file for each of my custom controls, then when the site is going to production I rationalize my CSS and make performance enhancing changes.
Here's a link that may be of interest: The Problems with Themes, Skins, and Cascading Style Sheets (CSS) - Where it all Falls Apart
-Adam Kahtava [ http://adam.kahtava.com] |
| Adam.Kahtava | | Asp.Net User |
| Re: Order that CSS is added to the master page & Content Pages. | 1/26/2007 1:50:36 PM |
| 0/0 | |
|
 Mikesdotnetting:1. Inline styles first. That is where you apply a style rule to a specific element inline, for example <span style="font-weight:bold" class="mystyle"> In this case, the font will always be bold, regardless of what myclass says, or where myclass is defined.
2. Styles embedded in the document. In the above example, .mystyle{...} declared in the head will override .mystyle{...} declared in a linked css file
3. Styles in a linked css file.
Mikesdotnetting: Just a quick note, the order of precedence you outlined doesn't seem to be adhered to by most browsers. For example if you specify an embedded style before a linked StyleSheet, the linked StyleSheet will override the embedded style.
Here's an example: An HTML page:
<html>
<head>
<style type="text/css">
body{
background-color:
blue;
}
</style>
<link media="all" rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
Test
</body>
</html>
The StyleSheet.css:
body{
background: red;
}
If the order of precedence worked every browser should display a blue background, but most browsers seem to depend on the loading order defined in the head of the document.
-Adam Kahtava [ http://adam.kahtava.com] |
| Mikesdotnetting | | Asp.Net User |
| Re: Order that CSS is added to the master page & Content Pages. | 1/26/2007 2:24:03 PM |
| 0/0 | |
|
I haven't tried that exercise, but I'm sure you have found that to be the case (else you wouldn't have made the post  ). It's supposed to work the way I outlined.... Another good reason to keep all your css in one place, in my view...
On this page: http://msdn2.microsoft.com/en-us/library/aa140116(office.10).aspx about half way down you find this:
Note: If a page is linked to an external style sheet, the embedded or inline styles that you create for that page will extend or override properties specified in the external style sheet.
Typically, W3 is a little confusing:
6.4.1 Cascading order
To find the value for an element/property combination, user agents
must apply the following sorting order:
-
Find all declarations that apply to the element and property in
question, for the target media type.
Declarations apply if the associated selector matches the element in question.
-
The primary sort of the declarations is by weight and origin: for normal
declarations, author style sheets override
user style sheets which override the default style sheet. For
"!important"
declarations, user style sheets override author style sheets
which override the default style sheet.
"!important" declaration override normal declarations.
An imported style sheet has the same
origin as the style sheet that imported it.
-
The secondary sort is by specificity
of selector: more specific
selectors will override more general ones. Pseudo-elements and
pseudo-classes are counted as normal elements and classes,
respectively.
- Finally, sort by order specified: if two rules have the same
weight, origin and specificity,
the latter specified wins. Rules in imported style sheets are
considered to be before any rules in the style sheet itself.
I think point 4 says the same as I did...?
Regards Mike 8 out of 10 questions have already been asked. Their answers can be found using Google. Go on, try it.If you prefer code samples or tutorials in another language, translate it for free at www.codechanger.com |
| RTernier | | Asp.Net User |
| Re: Order that CSS is added to the master page & Content Pages. | 1/26/2007 4:53:37 PM |
| 0/0 | |
|
Thanks for the input guys.
The main reason I like seperate CSS (like you said) is to have the encapsulation and the flexibility. Also, if I use someone elses Idea's (like the one posted above) i like to give reference in a CSS file, rather than just embed those CSS styles in my general.css file.
I won't go without a theme - they're too powerful :D.
But also, all browsers will treat this a little different. Too bad FF, IE, Mozilla, Opera, Safari don't all go to the "How to Properly Display Webpages 101" class.
The Killer Ninja Coding Monkeys thank those that mark helpful posts as answers. My Site | My Examples | My Blog |
|
| |
Free Download:
Books:  Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages Authors: Jacob J. Sanford, Pages: 474, Published: 2007 Pro Asp.net 3.5 in Vb 2008: Includes Silverlight 2 and the Ado.net Entity Framework Authors: Matthew MacDonald, Mario Szpuszta, Vidya Vrat Agarwal, Pages: 1200, Published: 2008 Mastering Web Development with Microsoft Visual Studio 2005 Authors: John Paul Mueller, Pages: 822, Published: 2005 Sharepoint 2007: The Definitive Guide Authors: James Pyles, Christopher M. Buechler, Bob Fox, Murray Gordon, Michael Lotter, Jason Medero, Pages: 794, Published: 2007 Mastering Integrated HTML and CSS: Integrate HTML Or XHTML and Cascading Style Sheets for Best Results. Master Key Techniques and Improve Your Productivity Authors: Virginia DeBolt, Pages: 600, Published: 2007 Professional Community Server Authors: Wyatt Preul, Keyvan Nayyeri, Jose Lema, Jim Martin, Pages: 311, Published: 2007 Pro ASP.NET 3.5 in C# 2008 Authors: Matthew MacDonald, Mario Szpuszta, Pages: 1498, Published: 2007 Microsoft Office SharePoint Server 2007: The Complete Reference Authors: David Matthew Sterling, David Sterling, Pages: 788, Published: 2007 Beginning Visual Web Developer 2005 Express: From Novice to Professional Authors: Paul Sarknas, Rick Delorme, Pages: 334, Published: 2005 Dreamweaver CS3 Bible: Master Every Aspect of Dreamweaver - Work with CSS, Text, Images, And Links - Incorporate Flash Movies and Other Media Authors: Joseph W. Lowery, Pages: 1112, Published: 2007 Web:CSS Options with Master Pages Master pages deployed via a Feature will call CORE.CSS AFTER the custom CSS file (s). .... Important in the style definition in order to make it override any css ... What I did, i took all blog-related styles from core.css, added them to our ..... I had a theme but for a new website only the content pages will look ... CleverWorkarounds » SharePoint Branding - How CSS works with ... Have the generic branding (CSS number 1) added to the master page using the .... the default content, in this case the background image for all pages but home. ... The source view for _layouts pages reveals the following, in this order: ... Master Pages, Themes, and Skins This exercise demonstrates how master pages and content pages work together to ... Select the Site.master file and click the OK button. You have now added a ... Themes are very similar to .css files (Cascading Style Sheet files) in that ... The first order of. business is to actually add the folder or directory in ... Web Site Consistency Made Easy with ASP.NET 2.0 Master Pages The order of events begins with the topmost object in the page hierarchy, ... Although the primary use for Master Pages is to provide common content for all .... .... To demonstrate this, I made a copy of MyNewsletterV2, and added two new ... Creating a Site-Wide Layout Using Master Pages : The Official ... Note: In order to reach the widest possible audience, the ASP. ... Before we can explore creating and using master and content pages, ... page's title and other -related markup may be added or adjusted programmatically. ... Note: A discussion of CSS and web page formatting is beyond the scope of this article ... Ground Up: Master Pages in ASP.NET 2.0 Jul 24, 2006 ... NET v2.0 Microsoft added support for Master Pages. ... In the Master page you indicate that the content of the file is to be treated as a Master page with the ... ... NET Web Form in order to be seen. We'll get to that in just a minute. ... Create a Master Page NET master page, the content in this region is then replaced by the content pages in the application. ... In order for EPServer to work a style sheet (.css) needs to be added to the ... DropDownList with EPiServer Pages. July 07, 2008 ... ASP.NET Master Pages Tips and Tricks This is required in order to install assemblies into the GAC. ... that the Publish Web Site tool added and compile correctly. .... That can obviously cause problems if you want to use CSS and JavaScript libraries that reference the IDs of .... Subject: Sharing Master Pages across IIS Applications - Content unclear ... Master Pages and Navigation Figure 5.1 shows an example of two content pages using a master page. ... Listing 5.1, for example, shows the contents of a master page newly added to a site. .... <%@ Master %> Themes & Master Pages - Are they enough ? I always have a print.css file added to my websites so users don't need to waste ink ... It seems like Master Pages & CSS are area's where you can spend a lot of itme ... Skins are easy to create and individual content piece have their own ... it is handy to know that the css files are loaded in alphabetical order. ... |
|
Search This Site:
|
|