CSS

  • Description : In this tutorial you will learn how to use style sheets!
  • Language : HTML
  • Date Added : 7th October, 2009
Bookmark and Share

Welcome to another tutorial from 2Torialz.com. In this tutorial you will learn how to change the styling of your page using CSS.

First we will look at external CSS files. These are stored on the server and are accessed each time a page is loaded. Their file extension is .css and below is the code required to include it in your webpages, make sure you put this line in the <head> section of your page:

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

Now if you change a line of code in your stylesheet.css file it will affect every page with a style sheet attached. You can also use internal css, which is added in the <head> section of your page, the code looks like this:

Code :
<style type="text/css"> h1 {color: #CCCCCC} p {padding-left: 10px} </style>

The code above would set all the <h1> elements to have text colour gray and all the paragraph sections to be moved left by 10pixels. The final way to use CSS is inline styling. This should only be used when you want to change one element on one page and not a site-wide change. The code is as follows:

Code :
<p style="color: #CCCCCC;"> This is gray text! </p>

The code above would set the paragraph to have gray text, but all other paragraphs on the page would remain the colour you described in your .css file.

When coding in CSS there is a certain format you have to follow. This format is below:

Code :
identifier {property: value}

The simplest way to explain this is by comparing it to your bedroom. Your bedroom(identifier) has a TV(property) which is black(value). There are a lot of properties that you can set, in the near future there will be a complete section dedicated to CSS tutorials!

In the next tutorial we will learn about META tags and how to use them effectively.

Login Required

To post comments you must sign in to your account below!

User :
Pass :

If you do not currently have an account click here to create one now!