Create or modify a cascading style sheet

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 inline, 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 inline 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.

What do you want to do?

Create an external CSS

Create an internal CSS

Create an inline CSS

Create an 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 core.css. The syntax of an external CSS is the same as an internal CSS, except that the styles defined in an external CSS aren't surrounded by <style> tags.

Create a blank external CSS

  • On the File menu, point to New, and then click CSS.

    Tip: You can also click the down arrow on the New Document button button on the Common or Standard toolbars, and then click CSS.

Create a new style and external CSS in one step

  1. On the Format menu, click New Style.

    Tip: You can also click New Style in the Apply Styles or Manage Styles task pane or on the Style toolbar.

  2. In the New Style dialog box, in the Define in box, click New style sheet.

Top of Page

Create an internal CSS

Use an internal CSS, sometimes referred to as embedded CSS, when you want to define styles for only 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.

Example of an internal style sheet

<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>

Create an internal CSS

  1. Open the Web page you want to contain the CSS.

  2. On the Format menu, click New Style.

    Tip: You can also click New Style in the Apply Styles or Manage Styles task pane or on the Style toolbar.

  3. In the New Style dialog box, in the Define in box, select Current page.

Top of Page

Create an inline CSS

Use an inline style to apply CSS properties to individual elements on a page when you don't need to reuse the style. An inline style is defined within the start tag of an HTML element on the Web page.

For more information about how to create a style, see the article Create and apply a style.

Example of an inline style sheet

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

Top of Page

Share Facebook Facebook Twitter Twitter Email Email

Was this information helpful?

Great! Any other feedback?

How can we improve it?

Thank you for your feedback!

×