FANDOM


HTMLx HTMLx2 HTMLx3 HTMLx4 CSSx1 Image Garden Photo Sandbox

CSSx1Edit

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
</p>

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. 
</p>

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"



bottomEdit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.