Resources for Cascading Style Sheet (CSS)

I am not as good desinger as I am a programmer. But if you work with web applications there always comes the necessity of going hand in hand with the web page design. I have also come across the same requirement. Initially, like most of the programmers I also thought that design part should be out of a programmer's headache. But as more time passes I become more loyal to the designer's part. It is the nature of a programmer, especially web programmes.

While talking about design we can not forget the role of Cascading Style Sheet (CSS). In the beginning days I started out trying the existing web templates. They taught me a lot. Later I felt the necessity of a little bit knowledge of CSS language. I have searched through the Internet and found some useful resources. I have benifited from them. So I wanted to share the resources.

Resources for Cascading Style Sheet (CSS)

http://www.webreference.com/authoring/style/sheets/css_mastery/
This part gives detailed approach to CSS page layout.

http://blog.html.it/layoutgala/
Check this link out for 40 CSS based HTML pages in a zip file. One can then reuse them for their own requirement.

http://www.dustindiaz.com/css-shorthand/
A CSS shorthand guide better for quick reference.

http://lesliefranke.com/files/reference/csscheatsheet.html
A CSS cheat sheet covering major parts of CSS.

There are lots of resources for CSS in Internet. I think it is better to start out with the simple and basic ones.

Happy designing!

Master Pages for consistent design of ASP.NET pages

Master pages are the best way if you want consistent look of you website over all pages. Think of all those web sites you surf all day and see the constant part of the pages: header, footer and site maps, and so on. This can be brought very easily and effectively with the help of master pages. A very good series of introductory master page tutorial can be found here.

http://www.asp.net/learn/master-pages/tutorial-01-cs.aspx

This is the first tutorial on the series. The later ones will teach many tips and tricks. Don't take it simply. It can do wonder to your sites. You will find there code package too. Enjoy!

Cascade Style Sheet in ASP.NET

Cascade Style Sheet (CSS) in ASP.NET

Cascade Style Sheets are used to give unique look and feel to web applications or throughout the websites or to all the web sites running on a server. Cascade Style Sheets give a ‘style of how the page looks like and what color combinations should the controls of the page should bear. Cascade Style Sheet (CSS) is only associated with the presentation of a web page. It has nothing to do with the functionality or logic of the web site. This quick tutorial outlines the ways to use Cascade Style Sheet in ASP.NET.

Why to use Cascade Style Sheet (CSS)?

1. Consistent look and feel of controls in a page.
2. Unique interfaces throughout the website.
3. Easy to apply same style to all controls.
4. Applying and editing style and theme changes to overall website made easier.

Creating Cascade Style Sheet in Visual Studio 2005

1. Right click the website in the solution explorer.
2. Click Add New Item.
3. Choose Style Sheet from the Visual Studio Installed Templates.
4. Give the cascade style sheet a name. Click OK.

Now we have a cascade style sheet. We define the body section of the cascade style sheet. Insert following code into the body:

body
{
color:Blue;
Background:Gray;
}

Create a class below the body section as below:

.myControl
{
color: Green;
background:Gray;
}

Here the class name is myControl. You can use your own class name. You can make as many classes as you wish with necessary properties set. For the properties available for Cascade Style Sheet you can read references at the bottom of this quick tutorial.

Applying Cascade Style Sheet

Now we have a simple Cascade Style Sheet. We can apply it to any control or the whole page itself.

Applying Cascade Style Sheet to a control

1. Right click the control in which to use the cascade style sheet.
2. Go to properties.
3. Right to the CssClass, give the name of the class (myControl in our case).
4. Save changes.

The change can be seen in the layout of the control you used the style sheet in.

Note: Only those controls having physical appearance can use cascade style sheet, like textbox, label, button etc. This can not be used to the ones which remain hidden.

Applying Cascade Style Sheet in a page

It is quite easy. Just drag the Cascade Style Sheet from the solution explorer into the page. It will work.