Home
HTML and CSS
Tutorials
Coding the Notebook with CSS
Level: Experienced Software:
Step 1: Before you Begin
Before you start on this tutorial, be sure that you have taken both Parts 1 & 2 to ensure you have all of the things required to begin. By now you should have 3 image files stored in a project directory that you set in in part 2. You should have a header, a content, and a footer image to build your site all set inside of an "/images" folder. If all of this is true, then you are ready to begin.
Step 2: HTML Basics
I am assuming that you have some HTML basics down since this is primarily a CSS tutorial. If you have not yet learned HTML 4.0 in its most basic forms, I would highly recommend going and reading W3Schools HTML Tutorial.
We are going to begin our site by writing out a simple HTML document in your favorite text editor. Notepad or Textpad will work fine.
| <html>
<head> <title>My Notebook Website</title> </head> <body> <p>Here is some content that will fill our notebook website.</p> </body> </html> |
As you can see this is a very basic HTML document that we have put together. It is a blank document with a sentence of text in it. Go ahead and save your document as index.html in your project directory.
Step 3: Setting up a StyleSheet
Setting up a Stylesheet in a document is pretty easy to do. The first thing you will want to do is create a new document called "styles.css" (again, any text editor will do). Save this in your project directory. Then, in the head of your index.html document, add the following line:
| <link rel="stylesheet" href="styles.css" type="text/css" /> |
This will tell your index.html page to load the stylesheet everytime this page is loaded, that way the browser knows how to style your document.
Step 4: Dividing your Document
It is time to separate your document into different parts so that you can style it in your stylesheet. We are going to divide our layout with a new tag called a "<div>". Since we have a header, a content area, and a footer, we are going to make 3 different <div>'s.
| <html>
<head> <title>My Notebook Website</title> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <div id="header"></div> <div id="content"> <p>Here is some content that will fill our notebook website.</p> </div> <div id="footer"></div> </body> </html> |
Each div tag has an ID to help us specify which style to apply to it (which will be covered in a little bit). The header and footer divs are above and below the content respectfully, while the content div surrounds the content.
Step 5: Making the Stylesheet
Stylesheets are pretty easy to make usually, sometimes they just take a bit of messing around with to create the desired effect. To begin our stylesheet, we will first set the background color of the document to the same background color we had in our document. To edit the background of our entire document, we are going to style the "<body>" tag. In "styles.css", add the following:
| body {
background:#3d2729; /*Replace with the background color of your document*/ } |
You can also style things like page margins and fonts in your body tag, but I will leave that up to you.
Now we need to style the different parts of our document, such as the header, footer, and content areas. I will post the source for my stylesheet, but you will need to change the widths and heights to match your images dimensions:
| #header {
background:url(images/header.gif) no-repeat; width:573px; height:49px; } #footer { background:url(images/footer.gif) no-repeat; width:573px; height:49px; } #content { background:url(images/content.gif) repeat-y; width:573px; } |
As you can see, I started each style with a "#". The # is used to symbolize an "ID". So when I have #header, it really means, 'Use this style for id="header".'
The backgrounds for these divs are declared after the background:url(imagelocation.ext). The no-repeat means, "do not repeat this background", while the repeat-y means "Repeat this in the vertical axis".
Finally, let's style the <p> tag so we don't get any messy margin errors on our page.
| p {
margin:0px 40px; padding-bottom:20px; line-height:1.5em; } |
If we load our page now, it should look similar to this example journal page .
Congratulations! You have completed a journal themed website using CSS! For more photoshop tutorials and CSS Tutorials, be sure to visit some of our other great tutorials!
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com