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.

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

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 »

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 »

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

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

END

HTML Links

« Previous

Next Chapter »

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links - Hyperlinks

HTML links are hyperlinks.

A hyperlink is an element, a text, or an image that you can click on, and jump to another document.

HTML Links - Syntax

In HTML, links are defined with the <a> tag:

Link Syntax:

Example:

<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

Try it Yourself »

The href attribute specifies the destination address (http://www.w3schools.com/html/)

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text, will send you to the specified address.

The link text does not have to be text. It can be an HTML image or any other HTML element.

Local Links

The example above used an absolute URL (A full web address).

A local link (link to the same web site) is specified with a relative URL (without http://www....).

Example:

<a href="html_images.asp">HTML Images</a>

Try it Yourself »

HTML Links - Colors and Icons

When you move the mouse cursor over a link, two things will normally happen:

The mouse arrow will turn into a little hand
The color of the link element will change

By default, links will appear as this in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

You can change the default colors, using styles:

Example

Try it Yourself »

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

This example will open the linked document in a new browser window or in a new tab:

Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Try it Yourself »

Target Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window
framename	Opens the linked document in a named frame

If your webpage is locked in a frame, you can use target="_top" to break out of the frame:

Example

<a href="http://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

Try it Yourself »

HTML Links - Image as Link

It is common to use images as links:

Example

Try it Yourself »

border:0 is added to prevent IE9 (and earlier) from displaying a border around the image.

HTML Links - The id Attribute

The id attribute can be used to create bookmarks inside HTML documents.

Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

Add an id attribute to any <a> element:

<a id="tips">Useful Tips Section</a>

Then create a link to the <a> element (Useful Tips Section):

<a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the <a> element (Useful Tips Section) from another page:

<a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a>

Try it Yourself »

Without a trailing slash on subfolder addresses, you might generate two requests to the server.
Many servers will automatically add a slash to the address, and then create a new request.

Chapter Summary

Use the HTML <a> element to define a link
Use the HTML href attribute to define the link address
Use the HTML target attribute to define where to open the linked document
Use the HTML <img> element (inside <a>) to use an image as a link
Use the HTML id attribute (id=value) to define bookmarks in a page
Use the HTML href attribute (href="#value") to address the bookmark

Try it Yourself Summary

An HTML link, using an absolute URL

An HTML link, using a relative URL

Changing the color of an HTML link

Removing the underline from HTML links

Setting the target of an HTML link

Using an HTML image as a link

HTML links: using a bookmark

Breaking out of an HTML frame

An HTML a mailto link

An HTML a mailto link with a subject

Test Yourself Exercises

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

HTML Link Tags

Tag	Description
<a>	Defines a hyperlink

HTML Images Syntax

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute defines the url (web address) of the image:

The alt Attribute

The alt attribute specifies an alternate text for the image, if it cannot be displayed.

The value of the alt attribute should describe the image in words:

Example

The alt attribute is required. A web page will not validate correctly without it.

HTML Screen Readers

Screen readers are software programs that can read what is displayed on a screen.

Used on the web, screen readers can "reproduce" HTML as text-to-speech, sound icons, or braille output.

Screen readers are used by people who are blind, visually impaired, or learning disabled.

Screen readers can read the alt attribute.

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

The values are specified in pixels (use px after the value):

Example

Try it Yourself »

Alternatively, you can use width and height attributes.

The values are specified in pixels (without px after the value):

Example

Try it Yourself »

Width and Height or Style?

Both the width, the height, and the style attributes, are valid in the latest HTML5 standard.

We suggest you use the style attribute. It prevents styles sheets to change the default size of images:

Example

<!DOCTYPE html>
<html>
<head>
<style>
img { width:100%; }
</style>
</head>

<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>

</html>

Try it Yourself »

At W3schools we prefer to use the style attribute.

Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page.

However, it is common on the web, to store images in a sub-folder, and refer to the folder in the image name:

Example

Try it Yourself »

If a browser cannot find an image, it will display a broken link icon:

Example

Try it Yourself »

Images on Another Server

Some web sites store their images on image servers.

Actually, you can access images from any web address in the world:

Example

Try it Yourself »

Moving Images

The GIF standard allows moving images:

Example

Try it Yourself »

Note that the syntax of inserting moving images is no different from non-moving images.

Using an Image as a Link

It is common to use images as links:

Example

Try it Yourself »

We have added border:0 to prevent IE9 (and earlier) from displaying a border around the image.

Image Maps

For an image, you can create an image map, with clickable areas:

Example

Try it Yourself »

Image Floating

You can let an image float to the left or right of a paragraph:

Example

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px">
A paragraph with an image. The image floats to the left of the text.
</p>

Try it Yourself »

Chapter Summary

Use the HTML <img> element to define images
Use the HTML src attribute to define the image file name
Use the HTML alt attribute to define an alternative text
Use the HTML width and height attributes to define the image size
Use the CSS width and height properties to define the image size (alternatively)
Use the CSS float property to define image floating
Use the CSS usemap attribute to point to an image map
Use the HTML <map> element to define an image map
Use the HTML <area> element to define image map areas

Loading images takes time. Large images can slow down your page. Use images carefully.

Try it Yourself Summary

The Mountain

HTML image height and width using attributes

HTML image height and width using CSS

HTML image height and width using both

An HTML image in another folder

An HTML image with a broken link

An HTML image on another server

Using an HTML image as a link

A moving HTML image

An HTML image map with clickable regions

A floating HTML image

Test Yourself Exercises

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

HTML Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image-map
<area>	Defines a clickable area inside an image-map

END

HTML Table Example

Number	First Name	Last Name	Points
1	Eve	Jackson	94
2	John	Doe	80
3	Adam	Johnson	67
4	Jill	Smith	50

Defining HTML Tables

Example

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Try it Yourself »

Example explained:

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

Table data <td> are the data containers of the table.
They can contain all sorts of HTML elements like text, images, lists, other tables, etc.

An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.

A border can be added using the border attribute:

Example

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Try it Yourself »

The border attribute is on its way out of the HTML standard! It is better to use CSS.

To add borders, use the CSS border property:

Example

table, th, td {
border: 1px solid black;
}

Try it Yourself »

Remember to define borders for both the table and the table cells.

An HTML Table with Collapsed Borders

If you want the borders to collapse into one border, add CSS border-collapse:

Example

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Try it Yourself »

An HTML Table with Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th,td {
    padding: 15px;
}

Try it Yourself »

HTML Table Headings

Table headings are defined with the <th> tag.

By default, all major browsers display table headings as bold and centered:

Example

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Try it Yourself »

To left-align the table headings, use the CSS text-align property:

Example

th {
text-align: left;
}

Try it Yourself »

An HTML Table with Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

table {
border-spacing: 5px;
}

Try it Yourself »

If the table has collapsed borders, border-spacing has no effect.

Table Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

Example

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

Try it Yourself »

Table Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example

<table style="width:100%">
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

Try it Yourself »

An HTML Table With a Caption

To add a caption to a table, use the <caption> tag:

Example

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Try it Yourself »

The <caption> tag must be inserted immediately after the <table> tag.

Different Styles for Different Tables

Most of the examples above use a style attribute (width="100%") to define the width of each table.

This makes it easy to define different widths for different tables.

The styles in the <head> section, however, define a style for all tables in a page.

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

Example

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can define a different style for this table:

table#t01 {
width: 100%;
background-color: #f1f1c1;
}

Try it Yourself »

And add more styles:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

Try it Yourself »