1 / 13

Cascading Style Sheets in .NET: Separating Content and Design

Learn how Cascading Style Sheets (CSS) in .NET can separate content from design in web forms applications, maintaining and consolidating visual aspects of web development. Reduce code and increase manageability with CSS.

jessicacruz
Download Presentation

Cascading Style Sheets in .NET: Separating Content and Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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 : • <td bgcolor=“Blue”> use <td> • In the style sheet define <td> as a blue. • Any changes to be made across all <td> 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: • Included files (external files) • Head items (within the <style> tag) • Inline styles

  3. Included files • Used to refer to external style • Put in the <head> tag • Using <link> tag <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> • 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")}

  4. Head Items • Used when a single document has a unique style. • Style definition in the <style> tag within the <title> tag <head> <style> h1 { color:black } </style> </head> • An old browser may ignore unknown tags eg the <style> tags

  5. Inline Styles • Mixes content with presentation • Style definitions applied directly to an element using the style attribute. <h1 style = “color:black;”> Welcome </h1> • 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: <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

  6. 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

  7. 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 • repeatrepeat-xrepeat-yno-repeat • background-attachment: • a background image is fixed or scrollswith 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

  8. 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

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

  10. 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

  11. 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

  12. Programmatically setting controls • Using the ApplyStyle method of the base WebControl class: <script language="VB" runat="server"> 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 </script> Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/> Password: <ASP:TextBox id="MyPassword" TextMode="Password“ runat="server"/> View: <ASP:DropDownList id="MySelect" runat="server"> ... </ASP:DropDownList> Source Code View Source

More Related