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>

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:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com