CoderZone.org
CoderZone Sandbox: CSS: Including CSS Styling
Back to Sandbox This page explains how CSS can be included in HTML pages. There are three ways to attach or apply CSS styling to HTML pages and elements:
  1. Using an external style sheet
  2. Using an internal style sheet
  3. Using inline styling

Using An External Style Sheet
The preferred way to apply CSS styles to a page is to place the CSS definitions in a separate file, which is then included in the page by using a stylesheet link in the head section:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/page_styles.css" />
</head>
<body>
... page content ...
</body>
<html>

In the example above the CSS definitions are in a file named "page_styles.css". This is the most efficient way to apply CSS styles which are used across a site or on the majority of pages.


Using An Internal Style Sheet
Internal style sheets are normally used when a limited number of pages require a specific or unique style definition. Internal styles are defined in the head section of the HTML page using the <style> tag, as shown in the example below:

<html>
<head>
    <style type="text/css">
    H1 {color: blue; font-size:30px;}
    .recipe_text {line-height: 140%}
    body {background-color: #ffffdd;}
    </style>
</head>
<body>
... page content ...
</body>
<html>

In this example we've defined the H1 tag and the background color of the body. We've also created a class named "recipe_text" that has expanded line-height (perhaps for easier reading of the recipe). To see what effect the expanded line-height has, look at these two examples:

The text in this box has the line-height set to its default value (100%)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The text in this box has the line-height set to 140%
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Using Inline Styling
To use inline styles you embed the style attribute(s) directly into the HTML element to be altered, or surround the element with a span or div that has the style attribute(s) applied to it. There are very few situations where it's appropriate to use inline styling, so avoid it whenever possible. You may want to use it during a design phase when you're trying out different looks and styles, or to affect a single element on a page where the style isn't used anywhere else. An example of inline styling is shown below.

<H1 style="color:blue;font-size:22px;">Sample text...</H1>

Again, avoid using inline styling unless it's appropriate (and it almost never is). Using inline styling gives up nearly all of the benefits and advantages you gain from using "proper" CSS styling techniques like internal and external style sheets.

© coderzone.org | users online: 5