Cascading Style Sheets

Cascading style sheets (CSS) give you more control over the appearance and presentation of your Web pages. With CSS, you can change the appearance of text, such as changing the font type, colors, and spacing. You can use CSS to position elements on the page, make certain elements hidden, or change the appearance of the browser, such as adding text to the status bar.

There are three basics types of CSS styles: inline, embedded, and external.

Inline - Inline styles are contained within the style attribute for HTML element. Inline styles affect only the appearance of the element that contains the style attribute, not other elements around it. The following image shows an inline style.

<p style="background:Fuchsia">Inline Style</p>

Embedded - Embedded styles are contained within the STYLE element in the HEAD section of a Web page. Embedded styles affect the appearance of an entire page. The following image shows an embedded stylesheet.

<style>
p
{background-color:Fuchsia}
</style>

External - External styles are contained in separate files, called style sheets, that you then reference from within a Web page. With external style sheets you can affect the appearance of multiple pages in your Web site. This ability allows you to quickly change the appearance of your pages simply by changing the styles in the external style sheet. You can even specify separate style sheets for different browsers and Web-enabled devices. The following image shows the contents of an external stylesheet.

a:link     {color: #686496; text-decoration: underline;}
a:visited {color: #purple; text-decoration: underline;}
a:hover  {color: #FF7F50; text-decoration: underline;}

P
{padding-top: 10px;
margin: 0;}

Note  The only difference between an embedded stylesheet and an external stylesheet is that embedded stylesheets use the STYLE element and external stylesheets do not.

CSS code is relatively simple. With a few simple lines, you can make major changes to the design of a Web page. To demonstrate what CSS can do, the following image shows two views of the same page: one without CSS and one with CSS.

This is only the beginning of what you can do with CSS. The resources on this page provide more information about what CSS is and how to work with it. You can also find information about how to create inline and embedded styles as well as external style sheets.