Jump to content


Photo
* * * * * 1 votes

The basics of CSS


  • Please log in to reply
1 reply to this topic

#1 Dh.

Dh.

    CSS Guru

  • Members
  • PipPipPip
  • 807 posts
  • Gender:Male
  • Location:Berkshire, England

Posted 28 June 2006 - 04:01 AM

The Basics of CSS

Welcome to my first tutorial - the basics of CSS.

At first sight CSS can look a bit daunting, but fear not it's basically as easy as english, there's no funny terms to deal with. It's all pretty straight forward!

Before we start this tutorial, I take it you have a good knowledge of basic html. If not, then I suggest you find a tutorial covering the basics of html.

Ok, here we go...

1. First of all, your going to need a basic html file with the following basic html tags;

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

2. Then before the closing head tag put this;

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

This links the html file to an external CSS file that we are yet to create.

3. The next step is to add this tag in between your body tags;

<div id="example"></div>

This div is a link to your CSS file. In between the tags write any text you like. Then save the file as index.html.

<div id="example">Some random text</div>

4. Now we've got some text to work with we can start on the real css. Open up a new txt file and straight away save it as style.css, in the same directory as your index.html file. Type this;

#example {
height: 200px;
width: 200px;
border: 1px solid #000000;
}

This is pretty straightforward, as you can see I have used the word example to link to the example div in the index.html file. Then I have declared some properties for it and given them values, I have made the height and width of this div 200px, and given it a 1px thick black border. So basically from this code we should get a 200px size square.

5. Now, open up the index.html file, you should have a black box in the top left corner with your text in it. Now you might want to edit the font of the text, to do this open your css file and declare these properties for your div 'example';

#example {
height: 200px;
width: 200px;
border: 1px solid #000000;
font-family: Verdana;
font-size: 10pt;
}

This should make your font verdana, with a size of 10px. See, I told you it was easy!

6. Now when you make a link, you always get that horrible blue with the underline.. well you can change that. Type this into the example div on you index.html page, <a href="www.google.co.uk>Google</a>. This will put a link to google next to your random text in your black box. The type this in the css file underneath the code already in there;

#example a {
text-decoration: none;
color: #000000;
}

This will make the link black with no underline, instead of blue with an underline.

Sadly that is the end of the tutorial, ... I hope you enjoyed it, if you did you may want to send me a quick email novaclip [at] yahoo.co.uk.

Cheers,
Dh89

#2 laurie-J

laurie-J

    Young Padawan

  • Members
  • Pip
  • 29 posts
  • Gender:Male
  • Location:Australia

Posted 08 August 2006 - 02:58 AM

quite a good tutorial, shows us the basics yet not a whole lot more. imo this tutorial could be improved by explaining the code a bit more as it is aimed at absolute beginners yet doesn't go into alot of depth explaining the various codes. but good work none the less.

Oh and putting the code snippets in [ code ] tags it is easier to recognise the code from the writing.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users