Beginner’s guide to CSS
Full HTML template and sample CSS
Let’s start by putting the two pieces of HTML I showed you together and combine it with some sample CSS: Sample HTML + CSS. You can find all code that makes that page below. Feel free to copy the code below and experiment on your own.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Your own page title</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="header">
<h1>The name of this page</h1>
</div>
<div id="navigation">
<h2>Navigation</h2>
<ul>
<li><a href="first.html">First</a></li>
<li><a href="second.html">Second</a></li>
<li><a href="third.html">Third</a></li>
</ul>
</div>
<div id="content">
<h2>Content</h2>
<p>Some sample content, add your own here</p>
</div>
<div id="footer">
<p>This page is written by [Your name] and builds on a <a href="http://friendlybit.com">Friendlybit template</a>.</p>
</div>
</body>
</html>You should be able to tell what each part of the HTML does by now. Let’s instead have a look at some sample CSS for the structure we have above. If you want to experiment with this code you can copy it to a file named style.css (or any other filename you reference in the <link>-tag in the HTML) and place it in the same directory as the HTML document.
body {
background-color: Green;
}
div {
border: 3px solid Black;
padding: 7px;
width: 600px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
#navigation {
float: left;
width: 150px;
}
#content {
float: left;
width: 430px;
}
#footer {
clear: both;
}Let’s go through the six rules above. First we set the background-color of body, and body is the background of everything, so this will do the same as bgcolor did in HTML.
Next we set some styles on all divisions on the page. We have four of them and with this single rule we affect them all. First we set a black border to be 3 pixels wide (note that there is no space between number and unit in CSS). We then set a padding (the space between the border and content) to be 7 pixels and lastly we set the width of all divs to 600 pixels (note that margins, borders and padding are not included in the width).
The third rule selects all headers on the page and removes the margins (the space between the border and other nearby elements) from them. The commas are used between the elements to apply the same CSS to all of them.
Next we have some specific rules for three of the divisions. We position the navigation to the left of the content. This is done by using floats, a way to put things side by side. If you have used the align-attribute on images in HTML you will know how floats work, they move the element as far to the left as possible and then let the next element follow right next to it. If you want to put something below a float you need to clear it. Clearing moves the element down until it’s below any floats, exactly where we want the footer. So both navigation and content are floated and given a width to match the 600 pixels wide header, and the footer is cleared.
[Update: I have added some simple layouts for you to look at. Hope they help all of you out there that learn by examples.]
Now it’s your turn, you will learn CSS by using it and trying out how things work. So go ahead and play with the sample above. There are always people available to help you if you get stuck in the #CSS channel on EFNet. Thanks for reading, and good luck!
Any ideas of how this guide could be improved? Just leave a comment to the left.
- Emil Stenström
- 5 Jan, 2006, CSS, HTML, Tutor
Feel free to leave a comment, or subscribe to my feed.
linkback
These people have linked to this article:
- CSS Learning Reference at TADSpot 18 Jan, 2006
- Ronald Yau » Blog Archive » Beginners guide to CSS and standards 18 Jan, 2006
- Metropolis » Begginer’s Guide to CSS 19 Jan, 2006
- Friendly Bit » Google statistics over HTML usage 25 Jan, 2006
- Anonymous 31 Mar, 2006
- Vientos de Libertad » Blog Archive » Cada cosa en su lugar 22 Apr, 2006
- Taking Your Camera on the Road » Understanding CSS Selectors and Attributes 5 Jun, 2006
- kidodesign.com » Blog Archive » Beginners guide to CSS and standards 14 Jun, 2006
- Heldere XHTML/CSS help « CSS Superclub 13 Sep, 2006
- Pixel Acres » Blog Archive » Web design tips for print designers 11 Nov, 2006
- SEO For Dummies 5 - Basic Technical Skills for SEOing | www.mapelli.info 22 Feb, 2007
- Web Site Design, Internet Marketing, Ecommerce - ryanj - From the Web Developer’s Wiki - CSS 8 Jun, 2007
- Extensive CSS List: 134 Top CSS Resources << Vandelay Website Design 12 Jul, 2007
- css 英文相关文章以及站点 - 第8音 Design Everying 21 Aug, 2007
- GC 362 Class Blog » Blog Archive » CSS for Beginners 28 Aug, 2007
- Custom CSS on WordPress.com — WP Assist 2 Nov, 2007
- Adventures in Web Design « Blogs will be Blogs… 25 Jan, 2008
- Best ever css tutorial ive come across ! « Mysticpixels 9 Feb, 2008
- Suomenkieliset HTML ja CSS -ohjeet — Oivallisia juttuja 24 Feb, 2008
- eyelearn » Blog Archive » 8/5/08 :: week 2 8 May, 2008
To get a link in this list: make sure your blogging software supports trackbacks or pingbacks and simply link to this article like this:
<a href="http://friendlybit.com/css/beginners-guide-to-css-and-standards/">Beginner’s guide to CSS</a>You can also trackback by copying this link, and pasting it into a trackback field in your blogging tool.
