How to create the perfect ASP.NET website, including using master pages, CSS style sheets, and whether to use skins and themes or not.
- Creating ASP.NET Websites using CSS and Master Pages
- Creating an ASP.NET Website
- Creating and Using Master Pages
- Formatting Choices: HTML styles, Themes/Skins and CSS
- Creating and Applying CSS Style Sheets in ASP.NET (this blog)
Posted by Andy Brown on 01 May 2012 | 1 comment
Creating and Applying CSS Style Sheets in ASP.NET
In the previous part of this blog, I explained why you should always separate content from formatting by using CSS style sheets. In this part, I'll explain how to do it! The first thing to do is to create a CSS style sheet, then we'll apply it to a page.
Creating a CSS Style Sheet
You can apply lots of style sheets to a page, but usually you'll only create one. First choose to create a new file:
Right-click, as ever, on your project in Solution Explorer and choose to add a new item
Now choose to create a style sheet:
Follow the numbered steps below to create a style sheet
The steps to follow are:
- Choose to create a style sheet (ignore the language next to it - a style sheet doesn't have anything to do with Visual Basic or Visual C#!).
- Give your style sheet a name (often calling it after the website works well).
- Click on the button to add your style sheet to the website.
You can now start editing your style sheet as shown below.
There are two ways to edit styles. The first way (and easier way, when you learn the language) is to type them in directly:
This style information was typed in directly (including the comment).
The other way is to right-click on a style and choose to build it, although you still have to find your way round the dialog box which apppears:
Right-click on any style and choose to build it as shown here.
You can then use the Modify Style dialog box to alter your style, although you'll still need to understand the principles involved.
This dialog box is that it gives you a preview of what the style will look like.
Applying a Style Sheet to a Page
The easiest way to do this is just to drag the style sheet from Solution Explorer onto the page in design view.
If you've sensibly used a master page, all that you need to do is to apply the style sheet to the master page.
To apply a style sheet to any page:
- Open the page for editing in Design view (here we're using the master page).
- Select the style sheet you want to apply.
- Drag it onto the page and release the mouse button.
Here are the numbered stages described above:
Here's how Visual Studio will amend the HTML of your page to reflect the change (it inserts a link to the style sheet in the head section of the page):
The HTML link to your style sheet inserted
Applying a style sheet to a page can have a fairly dramatic effect:
|Before ...||... and after|
The Next Stage - Writing the Style Sheet
Now that you've created a style sheet and applied it to your website, it's time to write some styles and learn how they work. This is covered in this separate blog.
This blog has 1 comment
I have some comments over the "Formatting Choices: HTML styles, Themes / Skins and CSS" and the four reasons against them.
You say: "Skins override CSS"
This is true, but not accurate. Any 'Appearance' property you set on a server control (not necessarily through the skin) is rendered in HTML as an inline style attribute, so if you set the ForeColor="Red" on a Label and you also have a CSS class for that same element saying you want it blue, you know by CSS specificity rules that any inline rule will win. So it is not the Skin to blame, but rather the way style properties are written into HTML.
Besides, the Skin overriding 'Appearance' properties on Controls actually depend on the way you apply the skin to the Page. There are two ways, one is setting the Theme through the "theme" property, and the other through the "stylesheettheme" property. These you can set at the <%@ Page%> directive, or at the web.config in the <pages> section. The "theme" way overrides any "appearance" property you set directly on a control, while the "stylesheettheme" way allows the theme to work as CSS cascade, where setting ForeColor directly on the control, overrides the ForeColor set on Theme.
I agree that setting "Appearance" properties through a Skin is not really a very good idea, because of repeated styles attributes all over your HTML, and because you can't override easily those inline properties, BUT... I think skins can be useful to set some "NonAppearence" general properties to SERVER controls and centralize those properties for easy changing them.
Take all <asp:Validators> for instance. They all have a Text property that define what mark to show when validation fails, if you set it through a Skin, not only your ASPX file will get rid of those properties, but you can easily change them from "*" to a "!" in a single place.
I also use skins to set CssClasses I want some controls to have by default. I usually have a class for rows and alternate rows in GridViews, so I place those CssClass in a GridView definition in the Skin and I can forget about them:
<asp:GridView runat="server" CssClass="tabularData" GridLines="None"> <HeaderStyle CssClass="headerRow" /> <RowStyle CssClass="row" /> <AlternatingRowStyle CssClass="altRow" /> <SelectedRowStyle CssClass="selRow" /> <PagerStyle CssClass="pagerRow" /> <EditRowStyle CssClass="editRow" /> <FooterStyle CssClass="footerRow" /> <EmptyDataRowStyle CssClass="emptyRow" /> </asp:GridView>
And if I apply my skin the "stylesheettheme" way I can alway re-declare
the CssClass on a particular GridView to overwrite it.
I don't believe Skins are so evil to stop using them, I think it's better
to use them where CSS alone can't help you centralize the appearance.
Many thanks for lots of good points. I don't believe skins are evil - the blog is just trying to show that they should be for occasional use, rather than used as the central way of formatting a website. I appreciate the sensible comments!
A full-blown discussion forum is being built for this site, which will allow you once more to add comments and discussion threads.