↓ Skip to main content
Peter Entwistle

CSS - Introduction Tutorial For Beginners Part 3

·190 words·1 min· loading · loading ·
Author
Peter Entwistle
Senior iOS Developer, with a passion for technology and gardening. Trying to push the boundaries of what can be grown in the UK.

In this third part of the series I go over the basics of CSS. This Introduction tutorial series is to help anyone who would like to learn how to make their own website from scratch.

Video
#

Code
#

index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Youtube Tutorial - Peter</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
	<div id="pageWrapper">
    	<div id="header">
        	<header></header>
        </div>
        <div id="main">
        	<div id="profileInfo">
            	<div id="profilePic">
                	<img src="http://peterentwistle.co.uk/images/thumb_peter.jpg" width="154" height="154" />
                </div>
                <div id="about">
                    <h1>Peter</h1>
                    <p>Hello my name is Peter and I make websites!</p>
                    <h2>Where to find me:</h2>
                    <ul>
                        <li><a href="http://youtube.com/peterentwistletv" target="_blank">Youtube</a></li>
                        <li><a href="http://twitter.com/peterentwistle" target="_blank">Twitter</a></li>
                        <li><a href="http://facebook.com/peterentwistletv" target="_blank">Facebook</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
style.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

body {
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
}
#profilePic {
	float:left;
	margin-right:15px;
}
#about {
	float:left;
}
#about li {
	list-style:none;
}
#about a {
	text-decoration:none;
}

View on GitHub

Download the code