Introduction to HTML and CSS For ASP.NET Developers


Published on

Introduction to HTML and CSS For ASP.NET Developers

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to HTML and CSS For ASP.NET Developers

  1. 1. Prepared by: Ahmed EL-HarounySenior Software Engineer
  2. 2. 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
  3. 3. 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???
  4. 4.  Pure graphic designers knows nothing about HTML so their output will be in most cases some PSDs for application views. HTML generators in graphics software like Photoshop always produces stinky markup. Web designers are people who knows HTML, CSS, JavaScript, graphic design software and a little of server side coding knowledge. In most cases I found that HTML markup that is written by none developers is hard to maintain. When you don’t have a web designer, you should try act his role.
  5. 5.  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.
  6. 6. Demo
  7. 7.  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. Webforms VS MVC.
  8. 8.  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).
  9. 9.  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)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.