Export (0) Print
Expand All

Working with CSS Overview

Cascading style sheets (CSS) contain style rules that are applied to elements in a webpage. These styles define how elements are displayed and where they are positioned on the page. Visual Studio provides tools that you can use to work with CSS.

This topic contains the following:

When you edit webpages, you can create style rules in three places: inline, inside a <style> section in a webpage, or inside an external style sheet. You can see padding and margins applied to page elements by using visual aids. You can also position elements by using the positioning tools.

Back to top

Visual Studio gives you the following tools to create, apply, and manage styles and cascading style sheets (CSS):

  • The Apply Styles window lets you create, modify, and apply styles. You can also link to or remove an external CSS. The window identifies style types, and shows you whether the style is used in the current webpage and whether the current selection uses it.

  • The Manage Styles window provides many of the same features as the Apply Styles window. However, you can use the Manage Styles window to move styles from a <style> section in a page to an external style sheet or vice versa. You can also use it to move styles inside a style sheet.

  • The CSS Properties window shows you the styles that are used by the current selection in a webpage. It also shows you the order of precedence for the styles. In addition, the window gives you a comprehensive list of all CSS properties. You can add properties to an existing style, modify properties that you have already set, and create new inline styles. For more information, see How to: Use the CSS Properties Window.

  • If you are working with ASP.NET Web Forms pages (.aspx files), the tag selector lets you select HTML tags while you are working in a webpage. The tag selector bar is at the bottom of the editing window. When you put the cursor anywhere in a page, the quick tag selector bar displays tags that show the underlying HTML tag for that area. You can also use the ESC key to move up the HTML hierarchy to select tags that are nested inside other tags.

Back to top

You do not have to assign formatting attributes to each element of a particular type in a page. Instead, you can create a style rule that applies to all elements of that type. These rules apply property values like formatting rules to any instance of an element, or to any element that has a specific ID or style class.

In this section, you learn about CSS styles and how to create and apply them by using Visual Studio.

Each CSS style rule (also referred to as a style) has two main parts: a selector (such as h1) and a declaration (such as color:blue). The declaration consists of a property (color) and its value (blue). The syntax for a style rule is as follows:

Selector { property : value ; property2 : value2}

For example, the following CSS style rule specifies that text in any h1 element is centered and has a font color of blue.

h1 {text-align:center; color:blue;}

A style rule applies to an element, to an element that has a class attribute, or to an element that has an ID. In a style sheet, each of these is represented by a selector. A class-based selector is preceded by a period (.). An ID-based selector is preceded by a number sign (#). An element-based selector is simply the name of the HTML element, such as h1. An entire style is a selector plus a set of property declarations within a left brace ( { ) and a right brace ( } ).

Element-based styles define properties that you want to apply to every instance of a particular HTML element. (Element-based styles can be overridden by class-based or ID-based styles for individual instances of an element.) For example, you might want to create a margin of 25 pixels around all paragraphs (p elements). To do this, you create a style that uses the p selector followed by braces that contain the margin properties. The following example shows this element-based style rule.

p { margin-left: 25px; margin-right: 25px }

Class-based styles define properties that you want to apply to a subset of a particular element type (for example, to some but not all p elements). They can also apply to different types of elements, such as some p elements and some span elements. The following example shows a class-based style rule. The name introduction is the style selector (the name of the class).

.introduction {font-size: small; color: white}

The following example shows how to specify a class for a <p> tag:

<p class="introduction">
NoteNote

In Visual Studio, class names in markup are not validated against classes that are defined in a .css file. This is because class names can be used as semantic descriptors, as a microformat, by ECMAScript code, or to mark a style that has not yet been defined.

ID-based styles define properties that you want to apply to elements that have a specific ID attribute. You often use an ID-based style when you want to style a single HTML element in a webpage. The following example shows an ID-based style. The name footer specifies the ID that this style applies to.

#footer {background-color: #CCCCCC; margin: 15px}

The following example shows how to specify an ID for a <p> tag:

<p id="footer">

You can write CSS style rules in several places, including the following:

  • Inline with the HTML markup.

  • In a style element in a webpage.

  • In an external style sheet (.css file) that is linked or imported into the webpage.

In general, you write rules that apply to the whole Web site in an external style sheet. You write style rules that apply only to a page in the page's style element. You write style rules that apply to a single page element as an inline style. Many designers and developers find that writing all style rules in one or more external style sheets makes maintaining styles easier.

An inline style rule is defined in an element's opening tag by using the style attribute. Use an inline style when you want to define properties for a single element in a webpage and you do not want to re-use that style. The following example shows an inline style.

<p style="font-weight: bold; font-style: italic; color: #FF0000">

CSS style rules can be defined in a style element inside the head element of a webpage. In that case, the style rules apply only to elements in that page.

The following example shows how to define and apply a CSS style rule to all the h1 elements in a webpage.

<!DOCTYPE HTML>
<html>
  <head>
    <title>CSS Element Style Example</title>
      <style> 
        h1{text-align:center; color:blue;} 
      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

In this webpage, any text that appears between the <h1> and </h1> tags is centered and blue. You do not have to reassign these style attributes for each h1 element in the document. If you want to change the color (or any property) of all text in h1 elements, you can edit one style rule.

An external style sheet is a text file that has a .css file name extension and that contains only style rules. You can link a style sheet to a webpage by using a link element, as shown in the following example.

<link rel="stylesheet" href="myStyles.css" />

This link element applies the style rules in the external style sheet myStyles.css to the current page.

Style rules that are listed in an external style sheet are written the same way that they are in a style element.However, they are not enclosed in <style> and </style> tags. The following example shows the complete contents of a simple .css file.

h1 { text-align:center; color:blue; } 
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }

You can link an external style sheet to multiple HTML pages, which applies the styles across a website. Style sheets separate formatting rules from content. This approach makes it easier to manage style rules.

CSS style rules "cascade" in the sense that they follow an order of precedence. Global style rules apply first to HTML elements, and local style rules override them. For example, a style defined in a style element in a webpage overrides a style defined in an external style sheet. Similarly, an inline style that is defined in an HTML element in the page overrides any styles that are defined for that same element elsewhere.

Individual global style rules apply unless they are overridden by local CSS style rules. In the example in the previous section, the local CSS styles for the h1 element replace some of the global h1 style rules (center h1 text and make it blue). However, they do not change all the available styles, such as font characteristics. Both global and local style rules are applied, in that order. The result is that all the h1 text on this page displays in a larger font that is formatted as bold, centered, and blue.

There are no classes that apply to the CSS tools.

Back to top

Visual Studio has a rich CSS editing experience with several tools to make working with cascading style sheets (CSS) easier than ever. Much of the work designing the layout and styling content can be done in Design view by using the CSS Properties window and the Apply Styles and Manage Styles windows. You can also change positioning, padding, and margins in Design view by using WYSIWYG visual layout tools.

Back to top

Show:
© 2014 Microsoft