Style SheetsRobert Vitolo

CS430

Style Sheets: A Brief Overview

CSS (Cascading Style Sheets)

Purpose:

• To provide a consistent look and feel for a set of web pages

• To make it easy to update or manipulate the format or style of a page by separating style from content

Different Types External

• Style details are maintained in their own file, separate from the other code

Internal and Inline• Style elements are defined within the code• Override external style rules

ASP.NET has an added feature: Skins

Referencing an external style sheet

To reference an external style sheet in your webpage, you must code a link element within the head element of the page.

Creating a reference to a Style Sheet (Code)

Style Sheet Filename

Coding a reference to a Style Sheet (Automated)

You can also do this in an automated fashion, by going into the Design mode for your webpage, clicking on format and selecting ‘Attach Style Sheet’.

Creating a reference to a Style Sheet (Automated)

Creating a reference to a Style Sheet (Automated)

Creating a reference to a Style Sheet (Automated)

Creating a style sheet CSS sheets have a specific coding

format:

Selector { Property : value;

}

Example:h1 {

color: green;}

Defines all of the elements that will be impacted by the style

rule.

Selectors (Example)

Example Web Page (No Style Sheet)

CSS Style Sheet Code Example

Webpage with style sheet attached

Visual Studio Environment Features

Visual Studio gives you some access to many of the CSS functions via the VS menus.

Visual Studio Environment Features

Visual Studio Environment Features

New Style Dialog Box Allows you to add new style rules

without having to memorize all of the different properties and values – accessed through the Format menu.