Add to collection(s) Add to saved
  1. Engineering & Technology
  2. Web Design

Lilian Kiilu, Client/Server & Web Applications, Coms 463/563, Section 1pm,

advertisement 
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 :
• <td bgcolor=“Blue”> use <td>
• In the style sheet define <td> as 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. The correct order used to
apply styles to elements on a page is:
1. Included files (external files)
2. Head items (within the <style> tag)
3. Inline styles
When you define a style up the chain, lower-defined styles may override values of the
base style. The external file style properties will override the inline style properties.
In .NET, Web forms are comprised of structure, design and behavior. Structure is the
actual HTML of an ASPX page.
Included Files
 Used to refer to external style sheet
 Change the look of a whole website by changing details in one page
 The browser will read the style definitions from the external style sheet and
format the document according to it.
 An external style sheet can be written in any text editor.
 The file should not contain any html tags.
 Put in the <head> tag
 Using <link> tag. Example:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
<!—the name of the style sheet to be referenced is mystyle.css. Note that a style sheet
must have a .css extension-->
</head>
 Ideal to use an external style sheet when the style applies to multiple pages
 Example style sheet:
Hr
/* The selector P is usually the name of a tag, without its triangle brackets. The
brackets are {curvy}, and after the property name there is a colon, and between each
individual part there is a semicolon. Each of these pairs of properties and values is a
declaration.*/
{color: sienna}
p {margin-left: 20px}
body {background-image: url ("images/back40.gif")}
Once you’ve linked the stylesheet to your pages, having this style declaration in your css
file would make all the text in your pages enclosed in the <p> and </p> tags sienna, and
sized 20px as big as the default font size.
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>
<!--NOTE: 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
Common properties include:
Background 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
For background_position top left to bottom right if you only specify one keyword, the
second value will be "center".
x-% y-% ; The first value is the horizontal position and the second value is the vertical.
The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify
one value, the other value will be 50%.
x-pos y-pos : The first value is the horizontal position and the second value is the vertical.
The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you
only specify one value, the other value will be 50%. You can mix % and positions.
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
• font-style
Font properties:
 Font:
 A shorthand property for setting all of the properties for a font in one
declaration
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
• caption
• icon
• menu
• message-box
• small-caption
• status-bar
 Font-size
o Sets the size of a font xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• smaller
 larger
• length
• %

Font-size-adjust
o Specifies an aspect value for an element that will preserve the x-height of
the first-choice font
• none
• number
 Font-stretch
o Condenses or expands the current font-family
• normal
• wider
• narrower
• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded
 Font-style
o Sets the style of the font normal
• italic
• oblique
 Font-variant
o Displays text in a small-caps font or a normal font normal
• small-caps
 Font-weight
o Sets the weight of a font
• normal
• bold
• bolder
• lighter
For more style properties and their values go to:
http://www.w3schools.com/css/default.asp
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
Example to show several style elements in one code
<html>
<body>
<h3><font face="verdana">Applying Styles to HTML Controls</font></h3>
<p><font face="verdana"><h4>Styled Span</h4></font><p>
<span style="font: 12pt verdana; color:orange;font-weight:700" runat="server">
This is some literal text inside a styled span control
</span>
<p><font face="verdana"><h4>Styled Button</h4></font><p>
<button style="font: 8pt verdana;background-color:lightgreen;bordercolor:black;width:100" runat="server">Click me!</button>
<p><font face="verdana"><h4>Styled Text Input</h4></font><p>
Enter some text: <p>
<!—-the following code will create a textbox with text in it One, Two, Three. The font
style will be 14point and the font color will be verdana. The background color of the text
box will be yellow with a dashed red border of 300 width size. See screen shot below for
result
<input type="text" value="One, Two, Three" style="font: 14pt verdana;backgroundcolor:yellow;border-style:dashed;border-color:red;width:300;" runat="server"/>
<p><font face="verdana"><h4>Styled Select Input</h4></font><p>
Select an item: <p>
<select style="font: 14pt verdana;background-color:lightblue;color:purple;"
runat="server">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<p><font face="verdana"><h4>Styled Radio Buttons</h4></font><p>
Select an option: <p>
<span style="font: 16 pt verdana;font-weight:300">
<input type="radio" name="Mode" checked style="width:50;backgroundcolor:red;zoom:200%" runat="server"/>Option 1<br>
<input type="radio" name="Mode" style="width:50;background-color:red;zoom:200%"
runat="server"/>Option 2<br>
<input type="radio" name="Mode" style="width:50;background-color:red;zoom:200%"
runat="server"/>Option 3
</span>
</body>
</html>
 Results of above code would be:
Setting Class attributes
 Makes it easier to define styles once.
 Changes made to class attribute without having to redefine the style itself.
 The results are the same as in the previous example. However note that the code is
condensed and the html code is cleaner.
 Source Code:
<html>
<head>
<style>
.spanstyle
{
font: 12pt verdana;
font-weight:700;
color:orange;
}
.buttonstyle
{
font: 8pt verdana;
background-color:lightgreen;
border-color:black;
width:100
}
<!—this is the same code segment highlighted in the first example. Note that the style
is all defined in the .input style class. Below when declaring the textbox style properties
.inputstyle is referenced. Any changes to any of the elements of the .inputstyle class are
automatically rendered to the textbox-->
.inputstyle
{
font: 14pt verdana;
background-color:yellow;
border-style:dashed;
border-color:red;
width:300;
}
.selectstyle
{
font: 14pt verdana;
background-color:lightblue;
color:purple;
}
.radiostyle
{
width:50;
background-color:red;
zoom:200%
}
</style>
</head>
<body>
<h3><font face="verdana">Applying Styles to HTML Controls</font></h3>
<p><font face="verdana"><h4>Styled Span</h4></font><p>
<span class="spanstyle" runat="server">
<!—only one class can be referenced for each HTML element.-->
<!—style declared inside <p> tags.-->
This is some literal text inside a styled span control
</span>
<p><font face="verdana"><h4>Styled Button</h4></font><p>
<button class="buttonstyle" runat="server">Click me!</button>
<p><font face="verdana"><h4>Styled Text Input</h4></font><p>
Enter some text: <p>
<input type="text" value="One, Two, Three" class="inputstyle" runat="server"/>
<p><font face="verdana"><h4>Styled Select Input</h4></font><p>
Select an item: <p>
<select class="selectstyle" runat="server">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<p><font face="verdana"><h4>Styled Radio Buttons</h4></font><p>
Select an option: <p>
<span style="font: 16 pt verdana;font-weight:300">
<input type="radio" name="Mode" checked
class="radiostyle"runat="server"/>Option1<br>
<input type="radio" name="Mode" class="radiostyle" runat="server"/>Option 2<br>
<input type="radio" name="Mode" class="radiostyle" runat="server"/>Option 3
</span>
</body>
</html>

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
<html>
<body>
<form runat="server">
<h3><font face="verdana">Applying Styles to Web Controls</font></h3>
<p><font face="verdana"><h4>Style Properties</h4></font><p>
<b>No Style:</b>
<p>
<ASP:Calendar runat="server" />
<p>
<b>Style: (OK, maybe it's <i>bad</i> style, but at least I wear matching socks...)</b>
<p>
<ASP:Calendar runat="server"
BackColor="Beige"
ForeColor="Brown"
BorderWidth="3"
BorderStyle="Solid"
BorderColor="Black"
Height="450"
Width="450"
<!—Font is a property that is a class type like background etc.You must hyphenate
with the sub property name ie Font-Name --->
Font-Size="12pt"
Font-Name="Tahoma,Arial"
Font-Underline="false"
CellSpacing=2
CellPadding=2
ShowGridLines=true
/>
</form>
</body>
</html>
 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" %>
<html>
<head>
<style>
.beige { background-color:beige }
</style>
</head>
<script language="C#" runat="server">
void Page_Load(Object Src, EventArgs E ) {
System.Web.UI.WebControls.Style style = new
System.Web.UI.WebControls.Style();
style.BorderColor = Color.Black;
style.BorderStyle = BorderStyle.Dashed;
style.BorderWidth = 1;
MyLogin.ApplyStyle (style);
MyPassword.ApplyStyle (style);
MySubmit.ApplyStyle (style);
}
</script>
<body>
<form runat="server">
<h3><font face="verdana">Applying Styles to Web
Controls</font></h3>
<p><font face="verdana"><h4>Applying Styles
Programmatically</h4></font><p>
<table style="font: 10pt verdana; background-color:tan"
cellspacing=15>
<tr>
<td><b>Login: </b></td>
<td><ASP:TextBox id="MyLogin" runat="server" class="beige"
style="font-weight:700;"/></td>
</tr>
<tr>
<td><b>Password: </b></td>
<td><ASP:TextBox id="MyPassword" TextMode="Password"
runat="server" class="beige"/></td>
</tr>
<tr>
<td><b>Select a View: </b></td>
<td>
<ASP:DropDownList id="MySelect" class="beige"
runat="server">
<ASP:ListItem>Default Desktop</ASP:ListItem>
<ASP:ListItem>My Stock Portfolio</ASP:ListItem>
<ASP:ListItem>My Contact List</ASP:ListItem>
</ASP:DropDownList>
</td>
</tr>
<tr>
<td> </td>
<td><ASP:Button id="MySubmit" Text="Submit" runat="server"
class="beige"/></td>
</tr>
</table>
</form>
</body>
</html>
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.co
m/QuickStartv20/util/srcview.aspx?path=~/aspnet/samples/styles/style9.src=~/as
pnet/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. <head> tag
b. <link> tag
c. <head> and <link> tag
d. <style> and <link> tag
Answers:
1. Cascading Style Sheets
2. Included (external) files, head items and inline styles
3. System.Web.UI.Controls
4. Design from content
5. Font-stretch
6. Reduces structure code and increases manageblity
7. Background, font and text
8. /* insert text here */
9. Provides compile time checking and statement completion in .NET
10. <style>
11. a)
12. c)
13. a)
14. d)
15. c)
Related documents
PowerPoint Presentation Recommendations
PowerPoint Presentation Recommendations
Accessible Power Point presentation template
Accessible Power Point presentation template
GUIDELINES FOR DEFENSE PRESENTATION
GUIDELINES FOR DEFENSE PRESENTATION
To create the proper [ ] symbol so that the 26 is
To create the proper [ ] symbol so that the 26 is
2016 Express Scripts Scholars Program
2016 Express Scripts Scholars Program
PowerPoint Presentation Recommendations
PowerPoint Presentation Recommendations
Download
advertisement