Web Foundations/CSS Formatting

From Wikiversity
Jump to navigation Jump to search
Internet word cloud
Internet word cloud

This lesson introduces CSS formatting.

Objectives and Skills

[edit | edit source]

Objectives and skills for this lesson include:[1][2]

  • Identify and use design and color principles for Web pages.
  • Define and apply essential aspects of the Cascading Style Sheets (CSS) standard, including CSS versions 1, 2 and 3.
  • Design Web pages to industry standards.
  • Identify essential Web site navigation issues, and ensure page/site accessibility.

Readings

[edit | edit source]
  1. Wikipedia: Cascading Style Sheets
  2. Wikipedia: Style sheet (web development)
  3. Wikipedia: Font family (HTML)
  4. Wikipedia: Web colors
  5. Wikibooks: HyperText Markup Language/CSS

Multimedia

[edit | edit source]
  1. YouTube: CSS Tutorial for Beginners
  2. YouTube: CSS3 Tutorial

Examples

[edit | edit source]

Inline

[edit | edit source]
<h1 style="color: blue;">Heading</h1>

Internal

[edit | edit source]
<head>
<style>
h1   {color: blue;}
</style>
</head>

External

[edit | edit source]
<head>
<link rel="stylesheet" href="style.css">
</head>

Color

[edit | edit source]
<h1 style="color: #0000ff;">Heading</h1>

Background Color

[edit | edit source]
<h1 style="background-color: #0000ff; color: #ffffff;">Heading</h1>

Font Family

[edit | edit source]
<h1 style="font-family: 'Lucida Console', monospace;">Heading</h1>

Font Size

[edit | edit source]
<h1 style="font-size: 120%;">Heading</h1>

Font Style

[edit | edit source]
<h1 style="font-style: italic;">Heading</h1>

Activities

[edit | edit source]

Key Terms

[edit | edit source]
dithering
hexadecimal
rule
sans-serif
selector
serif

See Also

[edit | edit source]

References

[edit | edit source]