Webwork
/
Anatomy of a Style Tag

HTML provides the tools for structuring and organizing the content of Web pages but it is not intended to shape the way that content looks other than in a very basic way.

That is where Cascading Style Sheets come in.

CSS can control the style and layout of a single individual item on a Web page or it can control the appearance of an entire Web site all at once.

A very basic example:

Text Source:

<html>

<head>
<title>
Minimal CSS Document
</title>

<style type="text/css">
body
{
background-color: orange;
}
</style>

</head>

<body>

<p>This document is a very simple CSS sample containing a single style tag which changes the background color. Compare this to its source code on the left to see the structure of the style tag.</p>

</body>

</html>

Web Page:
This document is a very simple CSS sample containing a single style tag which changes the background color. Compare this to its source code on the left to see the structure of the style tag.

Anatomy of a single Style Tag:

Tag start: Selector: Declarations start: Property:   Value: Declarations end: Tag end:
<style type="text/css"> body {Left Curly Bracket background-color : orange ; }Right Curly Bracket </style>
 

Placed within an HTML document, it would look like this:

<style type="text/css">
body
{
background-color: orange;
}
</style>

  • Declarations groups are surrounded by curly brackets.
  • Individual declarations end with semi-colons.
  • Property/value pairs are separated by colons.

A more complicated style tag:

Most style tags string together several declarations and, to make them easier to read, each is on a separate line.

Source Code (style tag in head of document):

<style type="text/css">

p
{
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    color: white;
    font-family: Arial, Verdana, sans-serif;
    background-color: maroon;
}

</style>

Source Code (HTML in body of document):
<p>
This document uses CSS to change the background<br />
color, text-alignment, font size, font weight,<br />
text color and font family. Compare<br />
this to the style tags above to see <br />
how the CSS works.
</p>
Paragraph as it would appear without the CSS:
This document uses CSS to change the background
color, text-alignment, font size, font weight,
text color, and font family. Compare
this to the style tags above to see
how the CSS works.
Paragraph as it appears with the CSS:
This document uses CSS to change the background
color, text-alignment, font size, font weight,
text color and font family. Compare
this to the style tags above to see
how the CSS works.
Previous | Webwork Table of Contents | Next >

photographs:
projects:
NEW: Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí

places:
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007


archive:
Graphics, sounds, and other ancient items from the dawn of the Web.

© Jay Boersma