Easy Tutorial
Html Tag Name Html Layouts Html5 New Element Html Xhtml Html Forms Index Html Colors Html Basic Html Elements Html Images Html5 Form Elements Html Sounds Html5 App Cache Html Editors Html Summary Html Tutorial Html Formatting Html Css Html Iframe Html Entities Html Paragraphs Html Quicklist Html Colorvalues Html5 Geolocation Html5 Semantic Elements Html Url Html5 Web Sql Html Object Html Attributes Html Tables Html5 Audio Html5 Form Input Types Html Lists Html Blocks Html5 Webworkers Html Head Html Examples Html5 Form Attributes Html5 Svg Html5 Webstorage Thread Procon Html5 Syntax Html Intro Html5 Websocket Html5 Browsers Html Colornames Html Iframes Html5 Intro Html5 Mathml Html Links Html5 Draganddrop Html Media Html Headings Html5 Serversentevents Html Videos Html5 Video Html Scripts Html5 Canvas
❮ Html Formatting Html Iframe ❯

HTML Styles - CSS

CSS (Cascading Style Sheets) is used to render the style of HTML element tags.

Look! Styles and colors

Try it Yourself »

Try it Yourself - Examples

HTML Using Styles

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

Link to an External Style Sheet

How to Use CSS

CSS was introduced starting from HTML 4 to enhance the rendering of HTML elements.

CSS can be added to HTML in the following ways:

The best practice is to use external CSS files.

In our HTML tutorial, we use inline CSS styles for examples to simplify and make it easier for you to edit and run the examples online.

You can learn more about CSS in our CSS Tutorial.

Inline Styles

Inline styles are used when a specific style needs to be applied to individual elements. This is done by using 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 a paragraph.

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

To learn more about styles, visit our CSS Tutorial.

HTML Style Example - Background Color

The background-color property defines the background color of an element:

Example

Early background-color properties were defined using the bgcolor attribute.

Try it: Setting Background Color in Old HTML

HTML Style Example - Font, Font Color, Font Size

We can define the font style using the font-family, color, and font-size properties:

Example

Nowadays, the font-family, color, and font-size properties are used to define text styles instead of the <font> tag.

HTML Style Example - Text Alignment

The text-align property specifies the horizontal and vertical alignment of text:

Example

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

Try it

Internal Style Sheet

An internal style sheet is used when a single document has unique styles. You can define an internal style sheet in the <head> section using the <style> tag:

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

External Style Sheet

An external style sheet is ideal when styles need to be applied to many pages. By changing one file, you can alter the appearance of an entire site.

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

HTML Style Tags

Tag Description
<style> Defines text styles
<link> Defines a resource reference address

Deprecated Tags and Attributes

In HTML 4, tags and attributes that were used to define HTML element styles have been deprecated. These tags are not supported in newer versions of HTML.

Deprecated tags include: <font>, <center>, <strike>

Deprecated attributes include: color and bgcolor.

❮ Html Formatting Html Iframe ❯