HTML Style - CSS

CSS (Cascading Style Sheets) is used to style HTML elements tags.

Look! Styles and colors

Manipulate Text
Colors,  Boxes
and more...


Try It »

实例

Try It - Example

HTML Using Styles
This example demonstrates how to format HTML using the style information added to the <head> section.

This example demonstrates how to create a link without underline using the style attribute.
How to use the style attribute to create a link without underline.

Link to an External Style Sheet
This example demonstrates howLink to an External Style Sheet

How to Use CSS

CSS is introduced in HTML 4 to better render HTML elements.

CSS can be added to HTML in the following ways:

  • Inline Styles - Using "style" in HTML elementsAttributes
  • Internal Stylesheet - Using <style> in the <head> section of the HTML documentElementsTo include CSS
  • External Reference - Using an external CSS fileFile

The best way is to use an external reference to an external CSS file.

In our HTML tutorials on this site, we use inline CSS styles to introduce examples, which is a simplified example that makes it easier to edit and run the examples online.

You can learn more about CSS through the following:CSS TutorialLearn more CSS knowledge.

Inline Styles

When special styles need to be applied to individual elements, you can use inline styles. Use inline styles by using the style attribute in the relevant tags. The style attribute can contain any CSS property. The following example shows how to change the color and left margin of a paragraph.

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

Learn more styles, please visitCSS Tutorial.

HTML Style Example - Background Color

Background Color Property (background-color) defines the background color of an element:

Example

<body style="background-color:yellow;"> <h2 style="background-color:red;">This is a title</h2> <p style="background-color:green;">This is a paragraph.</p> </body>

Try It »

The background color property (background-color) was defined using the bgcolor attribute in the old HTML.

Try It: Old HTML to set the background

HTML Style Example - Font, Font Color, Font Size

We can use the font-family (font), color (color), and font-size (font size) properties to define the style of the text:

Example

<h1 style="font-family:verdana;">A title</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

Try It »

Now, typically, we use the font-family (font), color (color), and font-size (font size) properties to define the text style, rather than using the <font> tag.

HTML Style Example - Text Alignment

Use the text-align (text alignment) property to specify the horizontal and vertical alignment of the text:

Example

<h1 style="text-align:center;">Centered title</h1> <p>This is a paragraph.</p>

Try It »

The text-align property replaced the old tag <center>.

Try It

Internal Stylesheet

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

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

External Stylesheet

When styles need to be applied to many pages, external stylesheets will be the ideal choice. Using external stylesheets, you can change the appearance of the entire site by changing one file.

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

HTML Style Tag

Tag Description
<style> Define text style
<link> Define resource reference address

Deprecated Tags and Attributes

In HTML 4, the tags and attributes used to define the style of HTML elements were deprecated. These tags will no longer support new versions of HTML tags.

Not recommended tags: <font>, <center>, <strike>

Not recommended attributes: color and bgcolor.

Other extensions