Info: Learn CSS - Overclock.net

J3r3my · 06-03-05

HTML 4.01 and XHTML 1.0 use CSS to control how things look on a webpage. No CSS does not stand for Counter Strike: Source. It stands for Cascading Style Sheets. It is very useful for changing the look of webpages. Heres an example of how to make a page with a black background, green heading text and blue paragraph text. It also shows how to set the size and font.

Code:

<html>
<head>
<title>CSS Example</title>
<style type="text/css">
body {background-color: #000000; font-family: arial}
h1 {font-size: 24pt; color: #00ff00; text-align: center}
p {font-size: 12pt; color: #ff0000; text-align: center}
</style>
</head>
<body>
<h1>Green Heading</h1>
<p>Red Paragraph Text.</p>
</body>
</html>

The colors can be changed by hex values. Hex goes from 0-F. So red is #ff0000, green is #00ff00, and blue is #0000ff. White is #ffffff while black is #000000. #c6c6ff makes a light blue gray color. It takes a little getting used to but allows you to make a great number of colors.

You can also control all the values in one line:

Code:

<html>
<head>
<title>CSS Example</title>
<style type="text/css">
body {background-color: #c6c6ff; font-family: arial;font-size: 24pt; color: #0000ff; text-align: center}
</style>
</head>
<body>
<h1>Blue Heading</h1>
<p>Blue Paragraph Text.</p>
</body>
</html>

The "body" line sets the page defualts but they can be overridden by putting info in the "h" and "p" lines.

To test these, copy each into Notepad and save as cssexample1.htm and cssexample2.htm, then open it in a browser. You dont have to use those names but you HAVE to add the .htm or .html at the end of the name before you save.

This is just some basic CSS but it gives you an idea how to use it.