Controlling appearances with styles

Cascading style sheets (CSS) give you control over the presentation of your web pages. Using CSS, you can precisely position and set the appearance of elements on a web page.

A CSS can be external, internal, or in-line, relative to a web page and a web page can use one or more of these types of CSS simultaneously. In general, styles that are defined in an in-line CSS take precedence over those in an internal or external CSS, and styles in an internal CSS take precedence over styles in an external CSS.

External CSS

Use an external style sheet when you want to apply the same styles consistently across some or all web pages in your site. By defining styles in one or more external style sheets and attaching them to web pages, you can ensure your entire site has a consistent appearance. If you decide to change a style, you need to make only one change — in the external CSS — and the change is automatically reflected in all web pages that reference that style and CSS.

An external CSS is contained within a .css file, such as global.css. The syntax of an external CSS is the same as an internal CSS (see example in the next section in the current topic), except that the styles defined in an external CSS aren't surrounded by <style> tags.

Internal CSS

Use an internal CSS, sometimes referred to as embedded CSS, when you want to define styles only for the current web page and also when you want to override the styles that are defined in an external CSS attached to the current web page.

An internal CSS is contained within the <head> tags of a web page.

<style type="text/css">
.alert {
    font-weight: bold;
    color: #FF0000;
}
h1 {
    font-size: 16pt;
    font-family: Arial, Helvetica, sans-serif;
}
#headlines {
    border-color: #000000;
    border-width: thin;
    border-style: solid;
}
</style> 

In-line CSS

Use an in-line style to apply cascading style sheet properties to individual elements on a page and don't need to reuse the style. An in-line style is defined within the start tag of an HTML element in the web page.

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

See also

Tasks

Create a cascading style sheet

Concepts

Working with styles
Cascading style sheet reference

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.