Introduction to HTML and CSS For ASP.NET Developers http://harouny.wordpress.com/

1. Prepared by:
Ahmed EL-Harouny
Senior Software Engineer

2. 1. My Personal experience (2 showcases)
2. What to expect from a graphic/web
designer
3. What you should know about CSS
4. Convert PSDs to HTML/CSS pages
5. Moving to ASP.NET
1. ASP.NET Themes
2. Styling complex server controls

3. 1. Gather Requirements.
2. Get some PSDs from a good designer (Photoshop)
3. HTML it!
4. Get a customer approval on the UI
5. Move it to ASP.NET
6. Enjoy .NET coding
7. Publish
But what if
this is a big
project ? Like
SA???

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.  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. Demo

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.
http://getfirebug.com/
 Webforms VS MVC.

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.  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)