Working with CSS Overview

Article
10/22/2014

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

This topic contains:

Scenarios
CSS Tools Features
Background
Code Examples
Class Reference
What's New

Scenarios

In Visual Studio 2008, while you are using the designer to create and edit Web pages, you can write style rules that are inline, that are contained in a Web page, or that are contained in 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.

CSS Tools Features

Visual Studio 2008 gives you a set of tools to create, apply, and manage styles and cascading style sheets (CSS). The tools include the following:

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 Web page and whether it is used by the current selection. For more information, see How to: Use the Apply Styles and Manage Styles Windows.
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 an internal style sheet (a style element in a page) to an external style sheet or vice versa. You can also use it to move styles inside a style sheet. For more information, see How to: Use the Apply Styles and Manage Styles Windows.
The CSS Properties window shows you the styles that are used by the current selection in a Web page. It also shows you the order of precedence for the styles. In addition, the window gives you a comprehensive list of all CSS properties. This enables you to 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.
The Direct Style Application toolbar enables you to apply or remove class-based or ID-based styles, and to create and apply new styles. It provides more control over the styles that are generated by Visual Studio. For more information, see How to: Use the Direct Style Application Toolbar.
The tag selector lets you select HTML tags while you are working in a Web page. 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. For more information, see HTML Editor Tag Navigation in Visual Web Developer.

Background

Instead of assigning formatting attributes to each element in a page individually, you can create style rules. These rules apply property values (typically formatting rules) when a Web browser encounters any instance of an element, or of an element that has a specific ID or style class.

To work with CSS styles, you must understand how to create a style and how to apply it. This section contains information from the W3C CSS specification about CSS styles and about the tools in Visual Studio 2008 that make working with CSS styles easier.

Defining CSS Style Rules

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 any text in any h1 elements should be centered and have a font color of blue.

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

Using Different Types of Styles

You can define a style rule that applies to an element, to an element that has a class assigned, or to an element by ID. A style is defined by its rule set, which consists of a selector, followed by a block of property declarations that appear between a left curly brace ( { ) and a right curly brace ( } ). Each type of style is distinguished from the other style types by its selector. A class-based selector is preceded by a period (.). An ID-based selector is preceded by a number sign (#). The selector for an element-based style consists only of the name of the HTML element, such as h1.

Element-based styles

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 (content that is in p elements). To do this, you create an element-based style that uses the p element as its selector and that contains declarations for margin properties. The following example shows this element-based style rule.

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

Class-based styles

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's 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">

ID-based styles

ID-based styles define properties that you want to apply to specific elements that are identified by their ID attribute. You often use an ID-based style when you want to style a single HTML element in a Web page. 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">

Writing CSS Styles

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

Inline with the HTML markup.
In a style element in a Web page.
In an external style sheet (.css file) that is linked or imported into the Web page.

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.

Creating Inline styles

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 Web page 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">

Creating Internal (Page-specific) CSS styles

CSS style rules can be defined in a style element inside the head element of a Web page. 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 Web page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>HTML 4.0 CSS Element Style Example</title>
      <style type="text/css">
        h1{text-align:center; color:blue;}
      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

In this Web page, any text that appears between the <h1> and </h1> tags will be 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.

Creating External Cascading style Sheets

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 Web page by using a link element, as shown in the following example.

<link rel="stylesheet" type="text/css" 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 Web site. Style sheets separate formatting rules from content. This makes it easier to manage style rules.

Understanding the Precedence of CSS 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 Web page 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 that are not overridden by local CSS style rules apply to elements even after local styles are applied. In the example in the previous section, the local CSS styles governing text in the h1 element replace some of the Web browser's global style rules for h1 text (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.

Code Examples

Walkthrough: Creating and Modifying a CSS File

Walkthrough: Working with an Existing CSS File

How to: Use the CSS Properties Window

How to: Use the Apply Styles and Manage Styles Windows

How to: Use the Direct Style Application Toolbar

Class Reference

There are no classes that apply to the CSS tools.

What's New

Visual Studio 2008 now has a rich CSS editing experience with several new 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, the Apply Styles and Manage Styles Windows, and the Direct Style Application tool. You can also change positioning, padding, and margins in Design view by using WYSIWYG visual layout tools.

Partager via