HTML Styles - CSS

CSS = Styles and Colors

Manipulate Text

Colors, Boxes

Example

<!DOCTYPE html>
<html>

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

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Try it Yourself »

Styling HTML with CSS

CSS stands for Cascading Style Sheets

Styling can be added to HTML elements in 3 ways:

Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files

The most common way to add styling, is to keep the styles in separate CSS files. But, in this tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it yourself.

	You can learn much more about CSS in our CSS Tutorial.

CSS Syntax

CSS styling has the following syntax:

element { property:value; property:value }

The element is an HTML element name. The property is a CSS property. The value is a CSS value.

Multiple styles are separated with semicolon.

Inline Styling (Inline CSS)

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

Inline styling uses the style attribute.

This inline styling changes the text color of a single heading:

Example

<h1 style="color:blue">This is a Blue Heading</h1>

Try it Yourself »

Internal Styling (Internal CSS)

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

Internal styling is defined in the <head> section of an HTML page, using a <style> element:

Example

<!DOCTYPE html>
<html>

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

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Try it Yourself »

External Styling (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 web site by changing one file.

External styles are defined in an external CSS file, and then linked to in the <head> section of an HTML page:

Example

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

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Try it Yourself »

CSS Fonts

The CSS color property defines the text color to be used for the HTML element.

The CSS font-family property defines the font to be used for the HTML element.

The CSS font-size property defines the text size to be used for the HTML element.

Example

<!DOCTYPE html>
<html>

<head>
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Try it Yourself »

The CSS Box Model

Every HTML element has a box around it, even if you cannot see it.

The CSS border property defines a visible border around an HTML element:

Example

p {
border:1px solid black;
}

Try it Yourself »

The CSS padding property defines a padding (space) inside the border:

Example

p {
border:1px solid black;
padding:10px;
}

Try it Yourself »

The CSS margin property defines a margin (space) outside the border:

Example

p {
    border:1px solid black;
    padding:10px;
    margin:30px;
}

Try it Yourself »

	The CSS examples above use px to define sizes in pixels.

The id Attribute

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

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

Example

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

then define a different style for the (identified) 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 all elements with the specified class:

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 and attributes are not supported in HTML5!

Avoid using the <font>, <center>, and <strike> elements.

Avoid using the color and bgcolor attributes.

Chapter Summary

Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for visible element borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border

Test Yourself with Exercises!

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

HTML Style Tags

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

« Previous

Next Chapter »

Feb	MAR	Apr
	16
2014	2015	2016

HTML Tutorial

HTML Forms

HTML5

HTML Graphics

HTML Media

HTML APIs

HTML Examples

HTML References

HTML Styles - CSS

CSS = Styles and Colors

Example

Styling HTML with CSS

CSS Syntax

Inline Styling (Inline CSS)

Example

Internal Styling (Internal CSS)

Example

External Styling (External CSS)

Example

CSS Fonts

Example

The CSS Box Model

Example

Example

Example

The id Attribute

Example

Example

The class Attribute

Example

Example

Deprecated Tags and Attributes in HTML5

Chapter Summary

Test Yourself with Exercises!

HTML Style Tags

WEB HOSTING

WEB BUILDING

W3SCHOOLS EXAMS

SHARE THIS PAGE

COLOR PICKER

Your Suggestion:

Thank You For Helping Us!

Top 10 Tutorials

Top 10 References

Top 10 Examples

Web Certificates

HTML/CSS

JavaScript

Graphics

Server Side

Web

XML

HTML/CSS

JavaScript

Server Side

XML

Charsets

HTML/CSS

JavaScript

Server Side

XML