Aug 01 2010

How do I apply styles to a web page or web site?

Category: CSS


There are a number of alternatives when applying styles to a page or website.

External Style Sheets: Using external stylesheets or CSS is typically the most efficient way of applying a style to a web page. Any changes to the .css external file will alter the pages that are linked to it. Allowing you to easily change multiple pages at once.

Embedded Styles: Embedded styles are another way of manipulating the look of a web page. Instead of using an external file, the style information is stored in the <head> tag of the specific page being changed.

Style Attributes: Style attributes can be used in conjunction with other HTML elements. This is often the least efficient way of styling a page because the style tags have to be inserted every time a change is needed.

The examples below illustrate each type of linking method:

External Style Sheet

<LINK REL=StyleSheet HREF=”style.css” TYPE=”text/css”>

Embedded Styles

<STYLE TYPE=”text/css”>
BODY { background: url(test.jpg); color: #000000; }
P { font-family: arial; }

Style Attributes – Inline Styles

<P STYLE=”color: #ffffff; font-size: 12px; font-weight: bold;”>Text</p>

Tags: , , , ,



Challenge this Answer and/or Discuss