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

Cascading Style Sheets in.NET 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 a 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. Correct order to apply styles to elements on a page: 1.Included files (external files) 2.Head items (within the tag) 3.Inline styles

Included files Used to refer to external style Put in the tag Using tag Ideal when the style applies to multiple pages  Example style sheet: Hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

Head Items Used when a single document has a unique style. Style definition in the tag within the tag h1 { color:black }  An old browser may ignore unknown tags eg the tags

Inline Styles Mixes content with presentation Style definitions applied directly to an element using the style attribute. Welcome Styles are applied either by setting the style or the class attributes. Example: how to change the color and the left margin of a paragraph: This is a paragraph

Multiple style sheets If one selector is defined in different style sheets, the values will be inherited from the more specific style sheet. Example: 1. External style sheet: h3 { color: red; text-align: left; font-size: 8pt } 2. Internal style sheet: h3 { text-align: right; font-size: 20pt } If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color: red; text-align: right; font-size: 20pt

Background color properties background-color:  Sets the background color of an element color-rgb color-hex color transparent background-image:  Sets an image as the background url none background-repeat:  Sets if/how a background image will be repeated repeat repeat-x repeat-y no-repeat background-attachment:  a background image is fixed or scrolls with the rest of the page background-position:  Sets the starting position of a background image top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos

Text properties Color :  Sets the color of a text color Direction:  Sets the text direction Ltr Rtl Text-align:  Aligns the text in an element Left Right Center Justify

Standard HTML tags All ASP.NET Html tags style like standard HTML tags Styles are passed along to the browser Source Code View Browser Setting style attributes

Setting Class attributes Makes it easier to define styles once. Changes made to class attribute without having to redefine the style itself. Source Code View Browser

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 show how a WebCalender control looks with several styles applied to it : Source Code

Programmatically setting controls Using the ApplyStyle method of the base WebControl class: Sub Page_Load(Src As Object, E As EventArgs) Dim MyStyle As New Style MyStyle.BorderColor = Color.Black MyStyle.BorderStyle = BorderStyle.Dashed MyStyle.BorderWidth = New Unit(1) MyLogin.ApplyStyle (MyStyle) MyPassword.ApplyStyle (MyStyle) MySubmit.ApplyStyle (MyStyle) End Sub Login: / Password: View:... Source Code View Source