Jump to content

Cascading Style Sheets/Applying CSS to HTML and XHTML

From Wikibooks, open books for an open world

CSS can be applied to HTML or XHTML using three methods: linked, embedded, and inline. In the linked method, the CSS is stored in a separate file, instead of directly in the HTML page. In the embedded method, CSS is stored as part of the HTML page, in the header section. In the inline method, CSS is stored directly in the style attributes of the HTML tags, as <div style="font-weight:bold">Bold Font</div>.

The neatest method is probably the linked one, but the other ones are convenient and quick in the phases of prototyping a web page. The embedded and inline methods do not require having a separate file. The inline method saves you the trouble of considering what CSS classes your document should have. For a larger site, in which many web pages share the same styling, and in which the styling should be customizable by the user, the linked method is the only viable option.

The methods are treated in detail in the following sections.

Linking

[edit | edit source]

With linked CSS, CSS rules are stored in a separate file. To refer to that file from the HTML page, add the link element (and its closing element within XHTML) to the head element, as shown in the following example, which assumes that the stylesheet is stored in the file named "style.css". 

  <head>
    <title>Example Web Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

The link element in the example has three attributes. The first, rel, tells the browser the type of the target of the link. The second, type, tells the browser what type of stylesheet it is. And the third, href, tells the browser under which URL to find the stylesheet. In the example, the URL is relative, but it can also be absolute.

The "style.css" with a single rule contains only the following text: 

 p {
   font-weight:bold;
 }

This tells the browser that the text in the paragraph (p) element should be rendered as bold.

Example rendering:

Text that will be formatted.

The source code for the complete HTML document is thus as follows: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example Web Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>Text that will be formatted.</p>
  </body>
</html>

Embedding

[edit | edit source]

Dynamically generated webpages may need to use embedded CSS, but this should be kept to a minimum. Even in dynamic pages, any CSS that is common to multiple pages should generally be moved to a linked stylesheet.

Embedded CSS is CSS that is located in the header of the HTML document that requires styling. For example we would like the text in this HTML document to appear bold. 

 <!DOCTYPE html>
 <html lang="en">
  <head>
   <title>Example Web Page</title>
  </head>
  <body>
   <p>
    Text that will be formatted.
   </p>
  </body>
 </html>

The CSS may be placed in the document's header section: 

  <head>
   <title>Example Web Page</title>
   <style type="text/css">
    p {
     font-weight:bold;
    }
   </style>
  </head>

The CSS is contained in a style element. Setting the element's type attribute to text/css tells the browser that the enclosed sheetstyle is written in CSS and should be used to format the page. If the attribute type is missing or set to an unrecognized value, the CSS will not be applied to the page.

The bit of CSS in this example tells the browser to make all the text found in any paragraph (p) elements bold. The text on the page would look like this:

Text that will be formatted.

Here is the complete document including the CSS. 

 <!DOCTYPE html">
 <html lang="en">
  <head>
   <title>Example Web Page</title>
   <style type="text/css">
    p {
     font-weight:bold;
     color:green;
    }
   </style>
  </head>
  <body>
   <p>
    Text that will be formatted.
   </p>
  </body>
 </html>

Remember, you should use linked stylesheets in preference to embedded stylesheets whenever possible. That will allow easy replacement of the general style information without having to keep track of styles within the various HTML files.

Inlining

[edit | edit source]

Inline CSS is specified directly in the opening tag of the element you want it to apply to. It is entered into the style attribute within HTML or XHTML 1.1.

For example 

 <div style="font-weight:bold; color:red;">Bold Font</div>

is rendered as:

Bold Font

As mentioned, you should in general prefer linked CSS to embedded CSS, and both are preferred over inline CSS.

Retrieved from "https://en.wikibooks.org/w/index.php?title=Cascading_Style_Sheets/Applying_CSS_to_HTML_and_XHTML&oldid=3676208"