Cascading Style Sheets in .NET

Download Report

Transcript Cascading Style Sheets in .NET 

Cascading Style Sheets in
.NET
Lilian Kiilu,
Client/Server & Web Applications,
Coms 463/563,
Section 1pm,
Fall 2005,
November 16th 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 :
<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:
1.
2.
3.
Included files (external files)
Head items (within the <style> tag)
Inline styles
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")}
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
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>
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
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
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:
<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