|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="UsingCSS" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Using CSS</title>
<style type="text/css">
body { background: #fffafa; margin: 1em; font: small/1.5em verdana, arial, sans-serif; }
h1 { background: gold; font: bold 120% verdana, helvetical, sans-serif; color: black; letter-spacing: 0.25em; padding: 0.25em; }
.controlPanel {
padding: 0.5em; border: black 1px solid;
background: #eee8a; margin: 1.5em; width: 75%;
}
.pullQuoteOne {
padding: 0.25em;
border: solid 7px #908070;
border-right-width: 0;
border-left-width: 0;
background: lightgrey;
float: right;
margin: 0.25em 1em;
font: bold 90% arial, helvetica, verdana, sans-serif;
width: 15em;
}
.pullQuoteTwo {
padding: 0.25em;
background: #adc175;
float: left;
margin: 1.5em;
font: bold 105% times new roman, serif;
border: #82a91b 2px solid;
width: 10em;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="labTwo" runat="server">
this is a test.
</asp:Label>
<div class="controlPanel">
Modify styles using drop-down lists below:
Paragraph Text text-transform style:
<asp:DropDownList ID="drpParagraph" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drpParagraph_SelectedIndexChanged">
<asp:ListItem Selected="True">Choose a text-transform style</asp:ListItem>
<asp:ListItem Value="lowercase">lowercase</asp:ListItem>
<asp:ListItem Value="uppercase">uppercase</asp:ListItem>
<asp:ListItem Value="capitalize">capitalize</asp:ListItem>
</asp:DropDownList>
Pull Quote CSS class:
<asp:DropDownList ID="drpPull" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drpPull_SelectedIndexChanged">
<asp:ListItem Selected="True">Choose a css class</asp:ListItem>
<asp:ListItem Value="pullQuoteOne">pullQuoteOne</asp:ListItem>
<asp:ListItem Value="pullQuoteTwo">pullQuoteTwo</asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class UsingCSS : System.Web.UI.Page
{
protected void drpParagraph_SelectedIndexChanged(object sender, EventArgs e)
{
if (drpParagraph.SelectedIndex > 0)
{
labOne.Style["text-transform"] = drpParagraph.SelectedValue;
labTwo.Style["text-transform"] = drpParagraph.SelectedValue;
}
}
protected void drpPull_SelectedIndexChanged(object sender, EventArgs e)
{
if (drpPull.SelectedIndex > 0)
labPullQuote.CssClass = drpPull.SelectedValue;
}
}
|