Transcript ASP.NET OVERVIEW

Building ASP.NET
Applications 2
Lecture 5
T. Ahlam Algharasi
4th Level
Cascading Style Sheets and Themes
2
T.Ahlam Algharasi
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.

3
T.Ahlam Algharasi
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
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
Cascading Style Sheets

CSS Syntax

A CSS rule has two main parts: a selector, and one or more
properties
8
T.Ahlam Algharasi
Cascading Style Sheets

CSS Styling


CSS Box Model


Styling Backgrounds ,Text , Fonts ,Links , Lists ,Tables.
Border , Margin , Padding.
CSS Advanced

Display , Positioning , Image Opacity
T.Ahlam Algharasi
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.
10
T.Ahlam Algharasi
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.
11
T.Ahlam Algharasi
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.
13
T.Ahlam Algharasi
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
14
T.Ahlam Algharasi
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.
15
T.Ahlam Algharasi
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.
16
T.Ahlam Algharasi
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.
17
T.Ahlam Algharasi
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
18
T.Ahlam Algharasi
Apply themes in a website

Changing theme dynamically

Use Page.Theme or Page.StyleSheet property at the Pre_Init event.
19
T.Ahlam Algharasi
Questions
20