Loading ...
Oct
20
Css webpage tutorial
October 20, 2007 |
If you want to create cool and accessible websites, CSS (Cascading style sheets) is the way to go. All modern websites should use CSS based layouts instead of those messy table layouts. Learning the basics of CSS is quite simple. The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:
body {color: black}
The best way to integrate CSS into your site is to place it in an external file with the ending .css.
You do not need any special software to create a stylesheet. You can use Notepad or Wordpad, however using an
editor like Dreamweaver have some benefits like line counter and color code which makes it a little easier to locate errors.
When you have created your stylesheet you need to put a link in your html file to get all the css information.
If you call your stylesheet style.css it would look like this in your html file:
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
(always place it between the head tags in your html file)
Let’s just create a very simple page to see how it works. First we need to create a new html file. Open
Notpad or your prefered editor and copy and paste this text and save as index.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My first webpage</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<h1>This is my main heading</h1>
<p>This is my first text</p>
</body>
</html>
Then we need to create a Css file. copy and paste this text and save as style.css
h1 {color: red;}
Ok, now we have created a basic page. as you can see your heading would be red (you can also use hex values instead of keywords like red, blue, green etc.)
the h1 tag should only be used once in a webpage, but what if we had two paragraphs with text where the first paragraph contains green text and the second blue?
The solution is to add a class attribute in the p tag like this:
<h1>This is my main heading</h1>
<p class=”green”>This is my first text which is green</p>
<p> class=”blue”>This is my second text which is blue</p>
Then we need to define our classes in our stylesheet. A class always starts with a punctuation like this
.green
(You can name your classes whatever you want but it’s clever to use logic names, maybe .greentext would be even better here)
Now, write this in your stylesheet:
.green {color: green;}
.blue {color: blue;}
Ok, not to exciting yet but you would soon understand how incredible cool CSS is and how powerful it is.
We would of course prefer to place our content in a cool layout. This is achieved using boxes. All websites are actually just boxes with content.
These boxes are called div’s
Let’s place our text in small box and place it in the center of the screen. Add this to your html file:
<div id=”mainbox”>
<h1>This is my main heading</h1>
<p class=”green”>This is my first text which is green</p>
<p> class=”blue”>This is my second text which is blue</p>
</div>
Then go to your CSS file and add this:
#mainbox {width: 500px;
margin: auto;
border: 1px solid green;}
Now, open your index.html in your browser and take a look.
You may have noticed that we did not have any prefixes on our h1 tag then we used the punctuation on our green text and this # on our div box.
This is because h1 is just used once at our page and we defined the tag directly, if we created another page h1 would be red there too. Classes (.) can be used several times and the id (#) attribute that we used on our div should be used only once.
This is the very basics of CSS, it’s not hard to imagine that we could do a lot of cool stuff with CSS when we have loads of CSS properties we can use.
Comments
You must be logged in to post a comment.