AGIX Discussion Scripting HowTo's

CSS Basics

This article explains how CSS (style sheets) work to enhance websites. Essentially CSS is used to change the way content is displayed in a web browser.

Get more tips here http://www.w3schools.com/css/

Web browsers know what do to when text is marked-up. But you can change that with CSS. The following is a simple way to use CSS but it’s not the only way. Put the following in the head tags.

<style>
h1 {
  /* Colours can be specified as words (blue) or HEX (#453332) */
  color: #00ff00;
  font-family: serif;
}
</style>

So it would look like this in full:

<html>
<head>
<style>
h1 {
  color: #444444;
  font-family: serif;
}
</style>
</head>
<body>
<h1>This is the heading</h1>
This is the body. 
</body>
</html>

You will notice that the CSS has changed the heading style from defaults. Here are some other useful tips:

h1 {
  color: #444444;
  font-family: serif;
  font-size: 40px;
}
body {
  color: #111111;
  font-family: serif;
  font-size: 25px;
  background-color: #eeeeee;
}
p {
  color: #000000;
  font-family: serif;
  font-size: 20px;
}

The above are ways to manipulate the standard display of browsers. However, you may want to have two types of fonts in the body of the page. Use “classes”.

<html>
<head>
<style>
.bigtext {
  color: #000000;
  font-family: serif;
  /* Font sizes are in pixels */
  font-size: 20px;
}
.smalltext {
  color: #000000;
  font-family: serif;
  font-size: 10px;
}
</style>
</head>
<body>
<h1>This is the heading</h1>
<p class="bigtext">This is big. </p>
<p class="smalltext">This is small. </p>
</body>
</html>

The above method of including CSS in the HTML document is ok but not the best way. Imagine that you have hundreds of web pages that all need to use the same style. The above wouldn’t work well as you’d have to copy it to each HTML page. And making changes to CSS means making changes to every page.

A better method is to “include” the CSS from a CSS file that you have on your server. For example, put the CSS in a file called “style.css” and reference it like this:

<link rel="stylesheet" type="text/css" href="style.css">

The above should be within the head tags. Here’s an example. Create the file “style.css” in the same directory as the web page and put the following in it:

.bigtext {
  color: #000000;
  font-family: serif;
  font-size: 20px;
}
.smalltext {
  color: #000000;
  font-family: serif;
  font-size: 10px;
}

And create your HTML document like this:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<h1>This is the heading</h1> 
<p class="bigtext">This is big. </p> 
<p class="smalltext">This is small. </p> 
</body> 
</html>

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.