Cascading Style Sheets (CSS) in ASP.NET using VB.NET

This article shows the Cascading Style Sheets (CSS) in ASP.NET Web applications.
  • 1280

This article shows the Cascading Style Sheets (CSS) in ASP.NET Web applications.

Cascading Style Sheets (CSS)

Cascading Style Sheets is a flexible approach towards dynamic styling in ASP.NET. A set of codes defined by W3C (World Wide Web Consortium).

  • color: color name or code
  • background-color: color name or code
  • background-image=url(imagename)
  • font-family: fontname
  • font-size: number unit ->units can be px, pt, mm, cm, in
  • font-weight:bold | bolder
  • text-decoration:underline | none
  • position: absolute | relative
  • left=x
  • top=y
  • cursor: hand | crosshair

Types of Cascading Style Sheets (CSS) : There are three types of CSS.

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS: Inline CSS means applying the code directly on tags using STYLE attribute.

For example:

<body>

    <form id="form1" runat="server">

    <div>

    <p style="background-color:Black;color:Yellow">Hello</p>

        <h1 style="font-size:1in;color:red">

            Hi</h1>

    </div>

    </form>

</body>

 

Internal CSS: Internal CSS means applying the codes on the specified tags or create a named style that can be applied to any kind of tag. Such styles are created in <STYLE> tag under <HEAD> section. To create the named styles use . along with some name called as class name. Use CLASS attribute on tags to apply that class.

 

For example:

 

<head runat="server">

    <title>Untitled Page</title>

    <style type="text/css">

        p {color:blue;font-size:12pt}

        A {text-decoration:none}

        A:hover{color:red}

        .btn{cursor:hand}

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

<p>%</p>

        <p>ass<span class="btn">aa</span>sfasfasdf</p>

        <a href="http://asdfasd.com">

        asdf</a><br />

        <a href="http://asdfasdf.com">

        as</a><br />

        dfas<br />

        df<br />

        asf<br />

<input id="Button1" style="z-index: 100; left: 192px; position: absolute; top: 64px"

type="button" value="button" class="btn" onclick="return Button1_onclick()" />

 

External CSS: External CSS means placing the CSS codes in some .css file and use that file in multiple web pages using <LINK> Tag.

<LINK href="filename.css" rel="stylesheet">

To create a CSS file use Website -> Add new item…-> Stylesheet.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.