Home | HTML | Asp.Net | HTML Probe | .Net Probe
   
 www.solvingera.com 
  Contact Us |Sitemap
  
 

Styles in Asp.Net

 
Skip Navigation LinksHome>Asp Home>Styles

A Stylesheets consist of rules. It is used to define a set of formatting option. A stylesheet can be reused to format the HTML elements on a web page.There are three important way to apply a stylesheet on a Web Page…
  • Inline styles
  • Embedded styles
  • Linked style
Inline styles: Inline styles are the styles that are applied to a HTML element and placed directly in a web page.

Example:

<p style="font-family: Century; font-size: 16px; color: #FF6317; background-color: #D7D7FF">

Write the text here

</p>

Embedded styles: Embedded style is a group of styles formatting. In Embedded styles, <style> tag is used which is placed within the <head>… </head> tag on a web page.

An embedded style is used when a developer wants to apply a unique style on different HTML elements.

Example code snippet:

<head>
 <style type="text/css">
    h2
    {
     font-style: bold; background: green
    }
 </style>
</head>

Linked style: A linked or external style sheet are stored in a separate file with the .css file extension. This style sheet can be applied to many web pages on a website. It contains styles for individual HTML elements.

Example code snippet:

.heading1
  {
  font-weight: bold;
  font-size: large;
  color: red;
  font-family: Verdana, Arial, Sans-Serif;
  }
.blockText
  {
  padding: 11px;
  background-color: #FCFCD9;
  border-style: solid;
  border-width: thin;
  }

As we discuss above that a stylesheets consist rules. Each rule name has two parts.
  1. The portion before the period (.) indicates the HTML element to which the rule applies. If nothing appears before the period, it means the rule can apply to any tag.

  2. The portion after the period is a unique name (called the CSS class name) that you choose to identify your rule. CSS class names are case-sensitive.
You can also create rules that are applied to HTML tags automatically. To do this, specify the tag name for the rule name without a period.

Example code snippet:

body
 {
   font-family: Verdana, Arial, Sans-Serif;
   font-size: small;
 }
h1
  {
   font-weight: bold;
   font-size: large;
   color: red;
   font-family: Verdana, Arial, Sans-Serif;
  }

Creating a Stylesheet(CSS)

Method 1:-

Follow these steps to create a StyleSheet:
  • Choose Website -->Add New Item
  • Select the StyleSheet template under the Visual Studio templates dialog box.
  • Set the name of the StyleSheet in the Name text box.
  • Click the Add button.
    A new file with .css file extension is added to the project to create a Style rules in SheetSheet.
Method 2:-
  • Choose Format --> New Style . A New Style dialog box appears as shown below.


    • Selector: Selector is used to select an HTML element to apply style or type a class name. A class name must be start with a period (.stylename).

    • define in: It is used to set the location of the style rules.

      Current page: This location is used to apply the CSS to the current page.

      New Style Sheet: This location is used to create a new stylesheet.

      Existing style sheet: when you select Existing style sheet location, the URL combo box will enable to set the rules of existing stylesheet.

    • URL: URL combo box enables you to specify the existing CSS stylesheet.

    • Apply new style to document selection: This checkbox enables a developers to specify that the style is applied to the selected text, HTML element or class.

    • Category: Category option provides a list of the formatting component to set the rules.

    • Preview : Preview box is used to display the preview of style rules.

    • Description: Description box enables you to view the CSS definition of the style rule.


  • Click the OK button to create style.

Applying Stylesheet Rules

You can apply stylesheet rules by adding <link> element in the <head> section of your page. The <link> element references the file with the styles you want to use.

Example Code Snippet:

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />

In this markup, rel=stylesheet tells that the document will use a stylesheet.
href="StyleSheet1.css" specify that the document will refer to the StyleSheet1.css file for the style definition.
type="text/css" signifies that it refer to a .css file for picking up the style definition.

After applying stylesheet using tag, bind it with any static HTML tag or with any asp.net server control as given below.

<asp:Label ID="styleLabel1" runat="server" Text="This Label uses the BlockText style." CssClass="BlockText"></asp:Label>

 
   
         
         
  
DMCA.com Protection Status
Design & Maintain By solvingera group| solvingera.com © 2013-2014 | all right reserved |Privacy Policy | Back to top