HTMLx HTMLx2 HTMLx3 HTMLx4 CSSx1 Image Garden Photo Sandbox


Recently, there has been a trend among web designers to document all their experiments with CSS on a section of their site. Examples include:

These experiments are usually only compatible with browsers that are largely standards compliant, such as Mozilla or Opera. Many of them also have the word 'edge' in their title - meaning they "push the browser to the edge."

The font property is, with exception of some system fonts,
a shorthand property for setting all of the properties for
a font in one declaration.

Note: This property also has a sixth value: "line-height",
which sets the space between lines.

Inline Styles

An inline style should be used when a unique style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the face, color, size and the left margin of a paragraph:

<p style="font-family:comic;color:red;margin-left:20px;font-size:100%">
This is inline style

This is inline style

fonts with styleEdit

      • face
<h1 style="font-family:comic">A heading</h1>
<p style="font-family:comic">A paragraph</p>

A heading

A paragraph

      • face + size
<h1 style="font-family:comic;font-size:190%">A heading</h1>
<p style="font-family:comic;font-size:80%">A paragraph</p>

A heading

A paragraph

      • face + size + color
<h1 style="font-family:comic;font-size:150%;color:blue">A heading</h1>
<p style="font-family:comic;font-size:150%;color:red">A paragraph</p>

A heading

A paragraph

      • mix it up
<p style="font-family:comic;font-size:120%;color:green">
This is a paragraph with some text in it.</p>
<p style="font-family:comic;font-size:110%;color:#00aa00">
This is a paragraph with some text in it. 

This is a paragraph with some text in it. "font-family:comic;font-size:120%;color:green"

This is a paragraph with some text in it. "font-family:comic;font-size:110%;color:green"


Community content is available under CC-BY-SA unless otherwise noted.