CSS Tutorial | Beginner CSS

[CSS Tutorials]

Tutorial by Paul Noia

This tutorial is an extension of our beginner HTML tutorial "Web Page Anatomy" where you will learn how to make your pages look nicer using CSS (Cascading Style Sheets). There are two ways you can implement CSS. You can implement within the HTML page itself, or you can attach/link a separate style sheet to it. For the purposes of this tutorial, we will link a CSS page to the HTML page as I believe it's good practice to do so, especially when your style sheets start to become more elaborate.

Open the tutorial sample HTML page & the tutorial sample CSS page. If you are using Internet Explorer, at the top of the HTML page select the "View" button and then select the "Source" button to view the source code for the tutorial page. If you are using Firefox, select "View" and then select "Page Source". Once you have done that, you can copy and paste the markup into your text editor or favorite web authoring tool and save the page to the root folder of your web site.

<!-- First, if you haven't already done so, save the HTML page in the main web site folder often referred to as the root folder. Next step is to create a new folder in the root folder and call it "css". This is where your CSS page will live.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PND Tutorial | Beginner CSS</title>

**** The line below is how and where we will link the CSS page to this HTML page. as you are reading this, refer to the CSS page you downloaded to understand how the CSS will effect the HTML page. ****

</head>

**** You'll notice the first thing we do in the style sheet is define the body of the document using specific attributes.
We instructed the CSS to give the body the following style via specifying attributes such as "background-color" and "margin-left", etc. that are placed between brackets {}:

- A margin of 100 pixels on all sides
- A background color of light grey which is the hex number "#e1e1e1"

This style is applied to the body tag. Please make note of the syntax used as it is important to mimic this in order to ensure the style sheet works correctly. ****

<body>

**** Next we applied a style to the <table></table> tag, which is the background-color attribute using a hex color of white ****
<table width="100%"  border="1" cellspacing="0" cellpadding="8">
  <tr>
  <td colspan="2" align="center" bgcolor="#FFCC33">
  
**** Next we applied a style to the <h1></h1> tag (which is the highest priority tag for a heading). We specified the font-type, font-size, and color attributes which all style the fonts for any type that exists in the <h1></h1> tags. ****
  
  <h1>PND CSS Tutorial | Beginner CSS</h1>
  
  </td>
  </tr>
  <tr>
  
**** Finally, we applied a style to the <td></td> tag (which is the highest priority tag for a heading). We specified the font-type, font-size, and color attributes which all style the fonts for any type that exists in the <td></td> tags. ****
  
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
	
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
</body>

</html>

That's it! You've styled your first HTML page using CSS.

-->

Marketing efforts not working? Need a "wallet friendly" way to get your products and services out there? Well what are you waiting for?!

[Get Adobe® Reader®]

Opt-In eMail is Best

Think twice before switching your company's phone service to Vonage.

Read on...