CSS

Cascading Style Sheets

Style Sheets are used as templates to define the look of one or many pages. CSS can control your pages' background, font, position, and so on. It can replace those tags. Used with the tag, you can make your paragraphs look more uniformed. You can control how much your text is indented and it's justification (left, right, center, justify).

CSS can be a single file with .css extsion, or you can make many CSS files. In a large site, you may want to have all your .css files in a centralized location. All files merely reference a .css file.

There are three types of Style Sheets, inline, embedded, and external.

inline

This adds one style or one set of styles to a single html tag within a document. For example you can add a "background" style to the tag. EXAMPLE This would produce: EXAMPLE. Or, you can add a few styles. EXAMPLE 2. This would produce: EXAMPLE 2

embedded

You can embed styles between the HTML <head> </head> tags. You have to put the entire code on each page that needs it. This is good if you only need to set styles on just a few pages. The code looks something like this:

<STYLE>
<!--
p { text-indent: 1em; text-align: justify; }
a { color: #0000ff; text-decoration: none }
A:visited {color:"#0000ff";}
A:link {color:"#0000ff";}
A:hover {color:"#E70A0A";}
//-->
</STYLE>

This set of styles will tell your browser to indent all paragraphs . It tells all links to become hover links. That is, change color when your mouse pointer moves over a text link.

external

External Style Sheets are seprate files located somewhere on your server. You place it at any desired location. The syntax is the same as that with embedded style sheets. The extision you use for Cascading Style Sheets is .css

Let's say you want your page's body to have a blue background.

Using inline styles:
  <body style="background: blue">

Using embedded styles:
  <style>
  body {background: blue}
  </style>

Using external (linked) styles:
  body {background: blue}

Embedded Styles

Take the following code and place it on a blank html page.

Here's the code:

<html>
<head>
<title>Test page for embedded styles</title>
<STYLE TYPE="text/css">
P.noIndent { text-indent: 0em }
P.indent { text-indent: 2em ; text-align: justify}
body {background: blue ; color: #f0f0f0 }
</style>
</head>
<body>

This paragraph should be indented. Text alignment should be justified. This page should have a blue background. Text should be light gray. This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.

This paragraph should NOT be indented. Text alignment should be left. This page should have a blue background. Text should be light gray. This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.This paragraph should be indented.

</body>
</html>

Here are the results:
When you have created the page, you will notice that the background is blue, the text white, and two paragraphs. Of the two paragraphs, one is indented and the other is not. You can have more than one set of properties for the same tag. To choose which set you want to use with a spicific tag, we use the class= attribute. In the example above, the tag has property set "indent" and property set "noIndent". We activate it by inserting class="indent".

External Style Sheets

Here's a simple example of how you can put external style sheets to use. It is a single html page linked to a single style sheet. Again, you can have many html pages linked to one style sheet. Create a blank html page with a .html extension and a blank style sheet with a .css extension.

Here's the code you need to put in your html page, call it styles.html:

<html>
<head>
<title>external styles</title>
<link rel=stylesheet href="styles.css" type="text/css">
</head>

<body>
asdfasdf

asdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfdasdflkjalfkjasldfkj dfasdfsa sdaf asdf sadf adfjkl adflk h akhf sadf adf sfd
</body>
</html>

Here's the code you need to put in your .css page. Call it styles.css:
Here are the results:

The page you produced has a green background with red text. The two paragraphs are right justified. The link tag tells your browser to use a style sheet called styles.css in it's current directory. If you notice, all other tags have no special attributes. In fact, the <body> and tags are empty. The external style sheet sets attributes for them.

title

explain