Introduction to HTML and CSS For ASP.NET Developers
Prepared by: Ahmed EL-HarounySenior Software Engineer
1. My Personal experience (2 showcases)2. What to expect from a graphic/web designer3. What you should know about CSS4. Convert PSDs to HTML/CSS pages5. Moving to ASP.NET 1. ASP.NET Themes 2. Styling complex server controls
1. Gather Requirements.2. Get some PSDs from a good designer (Photoshop)3. HTML it!4. Get a customer approval on the UI5. Move it to ASP.NET6. Enjoy .NET coding7. Publish But what if this is a big project ? Like SA???
Where to put your style (External, Internal, Inline). Type selectors (IDs VS classes VS Tags). Name your selectors based on what they do not what they looks. Group Identical Styles together. Block VS Inline. Background Images and colors. Margin VS Padding. Absolute positioning. Hover effects.
Move your markup from HTML pages to ASP.NET master page. Move your CSS files to Themes. Why you need a <form> tag in ASP.NET webforms? Server Controls VS HTML Controls. Define Content Placeholders. When you code a feature: ◦ Start by pasting your old styled markup. ◦ Try to stick to HTML controls as much you can. ◦ If you must use Server controls use CSSClass property to apply styles for them and use any View Source mechanism to investigate rendered markup. http://getfirebug.com/ Webforms VS MVC.
Themes are made up of a set of elements: skins (.skin), cascading style sheets (.CSS), images, and other resources. .skin VS .CSS. Themes do not cascade the way style sheets do. Any property values defined in a theme overrides the property values declaratively set on a control. CSS files in theme folders are rendered to the page ordered by folders/files names. ◦ What if you have your own structure? (you will have to use naming conventions for files ex: starting file name with numbers).
Investigate the rendered Markup (Firebug, IE Developer Tools) Get rid of any predefined styling. You can add more than one class to the same element. (ex: <div class=“GridItem Highlighted”></div> ) Use WebControl.CssClass property to add classes. What happened to my IDs!!? Introducing Control.ClientIDMode What if you want to style an existing control in only one view? (add HTML wrapper and add your custom style to any inner control)