X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML Styles - CSS


CSS = Styles and Colors

Manipulate Text
Colors,  Boxes

Example

<!DOCTYPE html>
<html>
<head>

<style>
  body {background-color:lightgrey}
  h1   {color:blue}
  p    {color:green}
</style>

</head>

Try it Yourself »


Styling HTML with CSS

CSS styling can be added to HTML elements the following 3 ways:

  • Inline - using the style attribute in HTML elements
  • Internal - using the <style> element in the <head> section
  • External - using external CSS files

The common way to add styling, is to put CSS syntax in separate CSS files.

In this tutorial the examples are simplified to make it easier for you to try it yourself.

Note You will learn much more about CSS in our CSS Tutorial


Inline Styles

Inline styling is useful for applying a unique style to a single HTML element:

Inline styling uses the style attribute.

This line styling changes the text color and the left margin of single paragraph:

Example

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

Try it Yourself »


CSS Background Color

The CSS style background-color defines the background color for an HTML element:

Example

<body style="background-color:lightgrey">

Try it Yourself »


CSS Font Family

The CSS style font-family defines the font to be used for in HTML element:

Example

<!DOCTYPE html>
<html>

<body>
  <h1 style="font-family:verdana">This is a heading</h1>
  <p style="font-family:courier">This is a paragraph.</p>
</body>

</html>

Try it Yourself »

Note Obsolete style attributes, like bgcolor, and tags like <font>, do not validate in HTML5.


CSS Font Size

The CSS style font-size defines the text size to be used for in HTML element:

Example

<!DOCTYPE html>
<html>

<body>
  <h1 style="font-size:300%">This is a heading</h1>
  <p style="font-size:160%">This is a paragraph.</p>
</body>

</html>

Try it Yourself »


CSS Font Color

The CSS style color defines the text color to be used for in HTML element:

Example

<!DOCTYPE html>
<html>

<body>
  <h1 style="color:blue">This is a heading</h1>
  <p style="color:red">This is a paragraph.</p>
</body>

</html>

Try it Yourself »


CSS Text Alignment

The CSS style text-align specifies the horizontal text alignment for an element:

Example

<!DOCTYPE html>
<html>

<body>
  <h1 style="text-align:center">Center-aligned heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

Try it Yourself »

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


Internal CSS

An internal style sheet can be used to define a common style for all HTML elements on a page.

Internal styles are defined in the <head> section of an HTML page, in the <style> element:

Example

<!DOCTYPE html>
<html>
<head>

<style>
  body {background-color:lightgrey}
  h1   {color:blue}
  p    {color:green}
</style>

</head>

Try it Yourself »


External CSS

External style sheet are ideal when the style is applied to many pages.

With external style sheets, you can change the look of an entire site by changing one file.

External styles are defined in the <head> section of an HTML page, in the <link> element:

Example

<DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>I am formatted with an external style sheet</h1>
  <p>Me too!</p>
</body>

</html>

Try it Yourself »


The id Attribute

All the examples above use CSS to style HTML elements in a general way.

The CSS styles define an equal style for all equal elements.

To define a special style for a special element, add an id attribute to the element:

Example

<p id="p01">I am different</p>

Now you can define a different style for this single element:

Example

p#p01 {
    color:blue;
}

Try it Yourself »


The class Attribute

To define a style for a special type (class) of elements, add a class attribute to the element:

Example

<p class="error">I am different</p>

Now you can define a different style for this type (class) of element:

Example

p.error {
    color:red;
}

Try it Yourself »

Note Use id to address single elements. Use class to address groups of elements.


Deprecated Tags and Attributes in HTML5

In older HTML versions, several tags and attributes were used to style documents.

These tags are not supported in HTML5.

Avoid using these elements: <font>, <center> and <strike>.

Avoid using these attributes: color and bgcolor.


Chapter Summary

  • Use the HTML style attribute for inline styling
  • Use the CSS background-color for background colors
  • Use the CSS font-family for font types
  • Use the CSS font-size for font sizes
  • Use the CSS text-alignment for text alignments
  • Use the HTML <style> element to define internal CSS
  • Use the HTML <link> element to define external CSS
  • Use the HTML <head> element to store <style> and <link> elements


Examples

Try it Yourself Summary

HTML with CSS inline

HTML with CSS background-color

HTML with CSS font-family

HTML with CSS font-size

HTML with CSS color

HTML with CSS text-align

HTML with internal CSS

HTML with external CSS

HTML styled using the id attribute

HTML styled using the class attribute

HTML and CSS full demo


Test Yourself Exercises

Exercise 1 »    Exercise 2 »    Exercise 3 »    Exercise 4 »   


HTML Style Tags

Tag Description
<style> Defines style information for a document
<link> Defines the relationship between a document and an external resource



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook