How to Create a CSS Web Page
Most websites today use a combination of CSS (Cascading Style Sheets) and HTML (Hypertext Markup Language) or XHTML (Extensible Hypertext Markup Language). While the HTML/XHTML handle the structure and content of your site, the CSS determines the style and appearance of elements on your page.
Other People Are Reading
Instructions
-
Creating Files and Folders
-
1
Before you start writing your stylesheet, you will want to set up the basic layout for your website. To do so, copy and paste the following structure into a blank notepad document:
<html>
<head>
<title>Basic CSS Tutorial</title>
</head><body>
</body></html>
-
2
Once you've copied and pasted the text, save the file as "index.html" into a new folder called "CSS Website." When saving, make sure that the file type is ".html".
-
-
3
Open a new document in your text editor and at the top, write the following:
/* Simple CSS Website
Master Stylesheet
Author: Your Name Here
*/This beginning of your stylesheet declares the title of the style sheet and the author. While not essential, it is a good practice and should be included at the top of every CSS file.
-
4
Once you've written the text, save this file as "style.css" in your folder labeled "CSS Website". Make sure to change the file type from ".html" to ".css". This is absolutely necessary, as your stylesheet will not function properly without the ".css" extension.
-
5
Now that you have your HTML and CSS documents, you must link them. To do so, add a few spaces under the line "<title>Basic CSS Website</title>" and write the following:
<link rel="stylesheet" type="text/css" href="style.css" />
Once you've done this, your stylesheet and markup will be linked. You can now begin to build your site using CSS.
Writing Markup and CSS
-
6
The first thing we'll do with CSS is create a basic page layout. In your "index.html" between the <body></body> tags, write the following:
<div id="container"> <!--The container holds all of the pages content-->
<div id="header">
</div>
<div id="column-1">
</div>
<div id="column-2">
</div>
<div id="footer">
</div>
</div> <!--The container DIV ends here-->
This code creates elements called "DIVs," which is short for divisions. These invisible boxes wrap around your site's content. With your stylesheet, you can tell these boxes where to appear on the page.
-
7
Now, we'll make a few things appear. In your stylesheet labeled style.css, write the following below your declaration:
body {
margin: 0;
padding: 0;
}#container {
width: 960px;
margin: auto;
}#header {
background: #000;
height: 250px;
}We've added a lot here so let's break down what we've done. First, we set the borders and padding of the browser window to 0. This insures that our site is flush with the browser's window and does not add unnecessary spacing.
Next, we gave our container DIV a width and set its margin to auto. You'll notice that the container DIV contains all of the elements on a page. By setting the margin to auto, we're telling this box and its contents to center in the browser window. The width, 960px, tells the box how wide to be. This can be changed, however, keep in mind that the average user has a 1024px screen width.
Finally, we added some style to the header DIV. We've set its background color to black (using the hex code #000) and given it a height of 250px.
When you preview your "index.html" file in a browser, you should now see a black box that is 250px tall and flush with the top of the window.
-
8
Next, we'll finish styling the rest of the content boxes. Write the following in your style.css file:
#column1 {
float: left;
clear: right;
background: #0099ff;
width: 480px;
height: 350px;
}#column2 {
float: right;
background: #999;
width: 480px;
height: 350px;
}#footer {
clear: both;
background: #555;
height: 50px;
}You will notice that in addition to changing the background of these boxes, we've also added a few more elements: float, clear, and width. The float element tells the box which side to go to. In this example, we're telling the column1 box to float or move to the left and the column2 box to float or move to the right. The clear element on the first column, allows for the second box to appear directly next to it. The width property added to these two columns is to determine how they fill the box. By default, (empty) floated boxes will not display unless given a width.
-
9
Now that you can see your four boxes, it's time to start adding and styling our content. In your "Index.html" file, write the following:
1.) Between the <div id="header"></div> tags, write: <p>Basic CSS Tutorial</p>.
2.) Between the <div id="column1"></div> tags, write: <p>This is a basic tutorial about the use of Cascading Style Sheets.</p>.
3.) Between the <div id="column2"></div> tags, write: <p>This tutorial was created by the author and followed by me.</p>.
4.) Between the <div id="footer"></div> tags, write: <p>© 200X me. All rights reserved.</p>.
What we've done is added some text to our site that is ready for styling. Now, go back to your "style.css" file and we'll style our text.
-
10
With your "style.css" file open, write the following beneath the existing properties:
#header p {
font-family: Arial, Helvetica, Sans-serif;
font-size: 30px;
text-align: top;
color: #fff;
text-transform: uppercase;
}#column1 p {
font-family: Arial, Helvetica, Sans-serif;
font-size: 18px;
color: #fff;
text-transform: capitalize;
}#column2 p {
font-family: Arial, Helvetica, Sans-serif;
font-size: 18px;
color: #fff;
}#footer p {
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
color: #fff;
}We've done a lot, so let's take a look at what has been added. First, all of the text was given three similar properties: font-family, font-size, and color. The font-family property defines what font the text will be displayed in. Font-size sets the size of the text, and color sets the color. Another property added to the header and column 1 text is: text-transform. This allows you to control the capitalization of your text. For the header, we set all text as uppercase and in column 1, the first letter of each word is capitalized.
-
1
