HTML CSS

With the use of HTML4.0, all formatting code can be moved out of the HTML document and then into a separate stylesheet.

Example

Styles in HTML
This example demonstrates how to format HTML using style information added to the <head> section.
Link Without Underline
This example demonstrates how to use the style attribute to create a link without an underline.
Linking to an External Stylesheet
This example demonstrates how to link a <link> tag to an external stylesheet.

How to Use Styles

When the browser reads a stylesheet, it will format the document according to this stylesheet. There are three ways to insert a stylesheet:

External Stylesheet

When the style needs to be applied to many pages, an external stylesheet is the ideal choice. By using an external stylesheet, you can change the entire site's appearance by modifying a single file.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Internal Stylesheet

When a single file needs special styles, you can use an internal stylesheet. You can define an internal stylesheet by using the <style> tag in the head section.

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

Inline Styles

Inline styles can be used when special styles need to be applied to individual elements. The method of using inline styles is to use the style attribute in the relevant tag. The style attribute can include any CSS property. The following example shows how to change the color and left margin of the paragraph.

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

Visit our CSS Tutorial, learn more about styles.

Tag Description
<style> Define style definitions.
<link> Define a resource reference.
<div> Define a section or area (block-level) within a document.
<span> Define a small inline block or area within a document.
<font> Specify the font, font size, and font color of the text. Not recommended. Please use styles.
<basefont> Define the base font. Not recommended. Please use styles.
<center> Horizontally center the text. Not recommended. Please use styles.