160 likes | 284 Views
CSS, Themes & Skins. Wellington Perera MVP - Visual C# - Sri Lanka www.welasharp.net | wela@mvps.org. Agenda. Cascading Style Sheets Introduction Understanding the hierarchy CSS and Visual Studio Using the Style Builder Themes & Skins Creating a Skin Page_PreInit. What is CSS?.
E N D
CSS, Themes & Skins Wellington Perera MVP - Visual C# - Sri Lanka www.welasharp.net | wela@mvps.org
Agenda • Cascading Style Sheets • Introduction • Understanding the hierarchy • CSS and Visual Studio • Using the Style Builder • Themes & Skins • Creating a Skin • Page_PreInit
What is CSS? • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. • Style sheets describe how documents are presented on screens, in print. • It has a version too … CSS 2.1 • No big deal … it’s a set of tags, or custom tags to polish up your website
W3C • The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding.
Two Style Sheet languages? • The fact that W3C has developed XSL in addition to CSS has caused some confusion. Why develop a second style sheet language? The answer can be found in the table below: • Both languages can be used to style XML documents. • CSS and XSL use the same underlying formatting model and designers therefore have access to the same formatting features in both languages. W3C will work hard to ensure that interoperable implementations of the formatting model are available.
Validate Your CSS • http://jigsaw.w3.org/css-validator/ • Give the URL to your CSS file and validate, and it will give you a full report on your CSS including Valid CSS information and warnings.
Demos • Vertical Text • Printer Friendly Pages
CSS and Visual Studio • VS 2003 • Test Page • VS 2005 • Using the Style Builder • Elements • Classes • Style Rules
Themes & Skins • Tables or DIV tags ?
What Elements Participate? • Fonts • Normal Text / Headings / Sub Headings • Colors • Font Colors, Backgrounds • Page Areas • Headers, Sidebars, Main Content, etc. • Button Images and Text • ImageButton Controls • Headers
Control Life Cycle • Initialize – Set up UI layout • Load view state • Process postback data • Load – Allow for controls added at runtime • Send postback change notifications • Handle postback events • Prerender • Save state • Render • Dispose • Unload
Let’s do it … • Creating the Folder hierarchy • Creating the CSS and Skin Elements • Ready to go
Resources • CSS Specificationhttp://www.w3.org/TR/CSS21/ • Validate your CSShttp://jigsaw.w3.org/css-validator/ • http://www.csszengarden.com/ • http://www.dotnetforum.lk