• Abstract and Figures
• Public Full-text

Lilian Kiilu, Client/Server & Web Applications, Coms 463/563, Section 1pm, Fall 2005, November 16th 2005 Cascading Style Sheets

Overview Introduction Included files Head Items Inline styles Multiple style sheets Common properties Sample code to set style attributes Sample code to set class attributes Applying style attributes to web server controls Programmatically setting controls (setting styles in the code behind) Questions Answers

Introduction

 CSS separates content from design in Web Forms applications.  Maintains and consolidates visual aspects of Web development.  Reduces structure code and increases manageability.  Design elements such as visual layout, color and positioning to a style sheet.  Eg Instead of : • use • In the style sheet define as blue. • Any changes to be made across all tags can be made just once in the style sheet.

 Cascading style sheets work in terms of inheritance. The correct order used to apply styles to elements on a page is: 1. Included files (external files) 2. Head items (within the

Inline Styles

 Mixes content with presentation  Style definitions applied directly to an element using the

Applying Styles to HTML Controls

Styled Span

tags.-->

This is some literal text inside a styled span control

Styled Button

Click me!

Styled Text Input

Enter some text:

Styled Select Input

Select an item:

Item 1 Item 2 Item 3

Styled Radio Buttons

Select an option:

Option1
Option 2
Option 3

 Results of above code would be: Applying styles to web server controls

 The System.Web.UI.WebControls namespace includes a Style base class that encapsulates common style attributes.  Advantages:  Provide compile time checking  Statement completion in .NET  Example to demonstrate how a WebCalender control looks with several styles applied to it :  Source Code

Applying Styles to Web Controls

Style Properties

No Style:

Style: (OK, maybe it's bad style, but at least I wear matching socks...)

BackColor="Beige" ForeColor="Brown" BorderWidth="3" BorderStyle="Solid" BorderColor="Black" Height="450" Width="450" Font-Size="12pt" Font-Name="Tahoma,Arial" Font-Underline="false" CellSpacing=2 CellPadding=2 ShowGridLines=true />

 Results of above code would be:

Programmatically setting controls (setting styles in the code behind)

 Uses the ApplyStyle method of the base WebControl class: Source Code

<%@ Import Namespace="System.Drawing" %>

Applying Styles to Web Controls

Applying Styles Programmatically

Login:
Password:
Select a View:	Default Desktop My Stock Portfolio My Contact List

o Results of above code: Above examples and code segments from:

http://samples.gotdotnet.com/quickstart/aspplus/doc/webtemplates.aspx http://dotnetjunkies.com/QuickStartv20/util/srcview.aspx? http://dotnetjunkies.com/QuickStartv20/util/srcview.aspx? path=~/aspnet/samples/styles/style9.src=~/aspnet/samples/styles/style9.src

Questions: Fill in the blanks: 1. What does CSS stand for ______2. Cascading style sheets apply elements in three ways. List them______, ______, ______3. What is the class that web server controls uses ______4. CSS separates ______from ______in web forms applications. 5. This font property condenses or expands the current font-family ______

Short Answer: 6. What is one advantage of using style sheets? 7. Name three style properties: 8. How do you insert a comment on a style sheet? 9. What is the advantage of using the webserver control class? 10. What is the correct HTML tag for inline styles?

Multiple Choice: 11. Which is the correct way to add a style to a control? a. Mylogin.ApplyStyle(MyStyle) b. ApplyStyle.MyLogin c. MyLogin.Mystyle(ApplyStyle)

12. CSS stands for: a. Cascading Sheet Styles b. Corresponding Style Sheets c. Cascading Style Sheets

13. Change the look of a whole website with: a. Included files b. Head files c. Inline styles

14. In .Net Web Forms are comprised of? a. Structure and design b. Design and Style c. Design, Style and Structure d. Design, Structure and Behavior

15. Included files use the : a. tag b. tag c. and tag d.