1. Building ASP.NET Applications 2
Module 05: Building ASP .NET Applications
Building ASP.NET Applications 2
Building ASP® .NET Applications
Agenda: Day 1
Module 01: What is Microsoft® .NET?
Module 02: The .NET Framework
Module 03: Visual Studio® .NET
Module 04: The .NET Languages
 Module 05 : Building ASP® .NET Applications
Module 06: Using Data Access in .NET Applications
Module 07: Building Reusable Middle-Tier Components
Lecture 5
T. Ahlam Algharasi
4th Level
Copyright Microsoft 2001 July 15, 2001

2. Cascading Style Sheets and Themes
T.Ahlam Algharasi

3. Cascading Style Sheets
Cascading Style Sheets (CSS)
is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.”
Cascading Style Sheets or CSS allow you to control the layout and look of your page easily.
T.Ahlam Algharasi

4. Cascading Style Sheets
Benefits of Using CSS:
Small file size.
CSS will reduce the file size of your html document.
Reduce clutter.
CSS allows you to get rid of a lot of extraneous html code therefore making your site code neater and cleaner. This makes it easy to alter the code if you need to make edits.
Fast loading pages.
Designing CSS-based web pages will speed up the loading of your pages considerably because the styles are all contained in one style sheet.
T.Ahlam Algharasi

5. Cascading Style Sheets
Benefits of Using CSS:
Eliminate javascript.
Many people surf the web with javascript turned off because they don’t want to be vulnerable to viruses or allow pop-ups. This means that the beautiful javascript navigation you produced will not be seen. You can often achieve the same affect with CSS navigation. These allow for rollovers and other pretty affects and are much more user friendly.
Save time.
CSS will allow you to design your site much faster because there are some styles you can use for every site.
T.Ahlam Algharasi

6. Cascading Style Sheets
Disadvantages of CSS
CSS does not work consistently in different browsers.
T.Ahlam Algharasi

7. Cascading Style Sheets
CSS Syntax
A CSS rule has two main parts: a selector, and one or more properties
T.Ahlam Algharasi

8. Cascading Style Sheets
CSS Styling
Styling Backgrounds ,Text , Fonts ,Links , Lists ,Tables.
CSS Box Model
Border , Margin , Padding.
CSS Advanced
Display , Positioning , Image Opacity
T.Ahlam Algharasi

9. Themes
Themes
A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, or across an entire Web application.
You can use a Theme to control the appearance of both the HTML elements and ASP.NET controls that appear in a page.
T.Ahlam Algharasi

10. Themes Why another formatting feature?
CSS rules are limited to a fixed set of style attributes. They allow you to reuse specific formatting details (fonts, borders, foreground and background colors, and so on), but they obviously can’t control other aspects of ASP.NET controls.
For example, the CheckBoxList control includes properties that control how it organizes items into rows and columns.
T.Ahlam Algharasi

11. Themes Theme Folders and Skins Theme
Group of files (CSS, Skins, Images) that define the look-and-feel of Web pages. 
To use a theme in a web application, you need to create a folder that defines it. Ex: bluetheme.
You need to place this folder in a folder named App_Theme
T.Ahlam Algharasi

12. Themes
App_Theme
App_Theme must be inside the top-level directory for your web application.
The most important types of files in a Theme fold
Skin Files
 Cascading Style Sheet Files
You also can organize the contents of a Theme folder by adding multiple subfolders to a Theme folder.
T.Ahlam Algharasi

13. Themes
Skin files
.skin file is a new type of file introduced in ASP.NET 2.0, this can contain style infomration of any asp.net server control. These information are written in this file as if they are written asp.net page but ID property is not specified. for example
T.Ahlam Algharasi

14. Themes
the 1st line defines the style of all Label controls that will be used in the aspx page.
2nd line defines the style of only those label controls whose SkinID is specified as LabelMessage. 
T.Ahlam Algharasi

15. Apply themes in a website
Create App_Theme Folder
Create a folder (with specific name) under App_Theme folder
Create Skin files
 It contains a set of control tags with standardized properties as: <asp:TextBox runat="server" BackColor="Orange"/>
The runat="server" portion is always required.
Everything else is optional while id attribute is not allowed in a theme.
T.Ahlam Algharasi

16. Apply themes in a website
Applying the Themes to Web Pages
In the Web page where you need to define a Theme
Set the Theme or StyleSheetTheme attribute to the name of the theme to use.
To define a Theme for the Web site
use the application's Web.config file and set the theme attribute of the pages element to the name of the theme.
T.Ahlam Algharasi

17. Apply themes in a website
Applying Skins to Controls
Skins defined in your theme apply to all control instances in the application or pages to which the theme is applied. 
To apply skin to individual controls
Set the control's SkinID property
T.Ahlam Algharasi

18. Apply themes in a website
Changing theme dynamically
Use Page.Theme or Page.StyleSheet property at the Pre_Init event.
T.Ahlam Algharasi

19. Questions