Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Practical No.04 (Mam)

    Enviado por

    nisha
    11 visualizações5 páginas
    mbjygujbnm

    Título original

    Practical No.04(Mam)

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    mbjygujbnm

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    11 visualizações5 páginas

    Practical No.04 (Mam)

    Enviado por

    nisha
    mbjygujbnm

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 5

    ICLES Motilal Jhunjhunwala College of Arts, Commerce & Science

    PRACTICAL NO. 4
    AIM: Design a Web Form and apply different styles and themes using CSS

    STEPS TO ADD EXTERNAL STYLESHEET:


    1. Choose Website >> Add New Item >> Stylesheet

    2. Right click in stylesheet >> Add Style Rule


    ICLES Motilal Jhunjhunwala College of Arts, Commerce & Science
    Shown below is the Add Style Rule Dialog Box; You can use css selectors (class,id or element) to setup different styles to
    different elements.

    3. Inside any element, again right click and choose Build Style.. A dialog opens as shown below. Use these
    options to create stylesheet.
    ICLES Motilal Jhunjhunwala College of Arts, Commerce & Science
    Once the stylesheet is ready, open toy webform in source mode and add this line inside <head></head> tag
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    OR Simply drag your stylesheet on your form

    STYLESHEET.CSS CODE :

    body
    {
    font-family: Aharoni;
    font-size: medium;
    font-weight: bolder;
    font-style: oblique;
    font-variant: normal;
    text-transform: capitalize;
    color: #FF00FF;
    text-decoration: underline;
    }

    .mynewStyle
    {
    border-style: dotted;
    font-family: 'Arial Black';
    font-weight: bold;
    color: #00FF00;
    font-style: oblique;
    }
    .my2ndNewStyle
    {
    font-family: Algerian;
    font-weight: normal;
    }
    .my3rdNewStyle
    {
    font-family: Arial;
    font-size: medium;
    font-weight: bold;
    font-style: italic;
    color: #800000;
    text-decoration: underline;
    }
    a:link
    {
    color: #FF0000;
    }
    a:visited
    {
    color: #008000;
    }
    ICLES Motilal Jhunjhunwala College of Arts, Commerce & Science
    CREATING A PAGE THEME:
    1) In Solution Explorer, right-click the name of the Web site for which you want to create a page theme, and then
    click Add ASP.NET Folder.
    2) Click Theme.
    If the App_Themes folder does not already exist, Visual Web Developer creates it. Visual Web Developer then
    creates a new folder for the theme as a child folder of the App_Themes folder.
    3) Type a name for the new folder.
    The name of this folder is also the name of the page theme. For example, if you create a folder named
    \App_Themes\FirstTheme, the name of your theme is FirstTheme.
    4) Add files to your new folder for control skins, style sheets, and images that make up the theme.

    To add a skin file and a skin to a page theme


    1) In Solution Explorer, right-click the name of your theme and then click Add New Item.
    2) In the Add New Item dialog box, click Skin File.
    3) In the Name box, type a name for the .skin file, and then click Add.
    4) In the .skin file, add a normal control definition by using declarative syntax, but include only the properties that
    you want to set for the theme. The control definition must include the runat="server" attribute, and it must not
    include the ID="" attribute.
    The following code example shows a default control skin for a Button control, defining the color and font for all of
    the Button controls in the theme.
    <asp:Button runat="server" BackColor="Red" ForeColor="White" Font-Name="Arial" Font-Size="9px" />

    Add Theme attribute at page level. Source code shown below:


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
    Theme="Theme1" %>
    <!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></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    Here is Body tag formatting
    <br />
    <br />
    <asp:Label ID="Label1" runat="server" Text="This is Label with cssClass=my3rdNewStyle"
    CssClass="my3rdNewStyle"></asp:Label>
    <br />
    <br />
    <asp:Label ID="Label2" runat="server" Text="This is Label with cssClass=my2ndNewStyle"
    CssClass="my2ndNewStyle"></asp:Label>
    <br />
    <br />
    <asp:Label ID="Label3" runat="server" Text="This is Label with cssClass=myNewStyle"
    CssClass="myNewStyle"></asp:Label>
    <br />
    <br />
    <asp:LinkButton ID="LinkButton1" runat="server">icl college</asp:LinkButton>
    <br />
    <br />
    ICLES Motilal Jhunjhunwala College of Arts, Commerce & Science
    <asp:Button ID="Button1" runat="server" Text="Submit" />

    </div>
    </form>
    </body>
    </html>

    OUTPUT SCREEN:

    Você também pode gostar