Begining HTML and CSS | Part 1

A Tutorial for the absolute beginner in HTML and CSS.

First things first. An HTML document is constructed of various tags which define its various 'elements'. Most elements we use have an opening tag and coresponding closing tag that look something like this:

<tag> tag content </tag>

Let's have a look at the basic document to see what I mean and to introduce a few important tags

Now lets look at some tags we can add to the body area of our document to start laying out our page.

we'll start with div and span

The 'style' part of the tags in the previous bit of code are refered to as an attribute of the element. An attribute always has a corresponding value ie. in this case the attribute is style and its value is the colour settings.

Let's take a look at some more tags we can use to layout our page

As an exercise, if you havn't already, create a page using atleast 1 heading tag and a div that contains some text

Ok, now lets have a look at CSS styling a little closer.

Earlier we added some styles to the page elements using the 'style' attribute in the element tag. This method is refered to as 'inline' styling and I would like to encourage you to use this method as little as possible.

A much better method is to attach a CSS stylesheet to the page. In this stylesheet we can define a number of different style rules for different page elements and we can then use these style rules throughout our site on any pages that have the stylesheet attached.

Create a new file and call it style.css then add the following content

And for the final part of this tutorial we simply attach the stylesheet to the HTML page by adding the following code between the head tags

That should be enough for now, I'll be back soon with another lesson.

Have fun :)

tags

Comments:

Featured Script

WDP Zoomer - jQuery image zoomer
A javascript/jQuery image zoomer... (read more)