How to Create a CSS Web Site
Creating a CSS website allows the designer to create layout, color and fonts for a web site. The designer can change these features without changing the webpage contents at any time. CSS is stored in a separate CSS file or in the HTML file for you website. Storing the CSS in its own .css file allows for easy switching of files if the designer decides the change the layout at a later time. Just like HTML, CSS is created in a text editor.
Other People Are Reading
Instructions
-
-
1
Open your text editor. Create a new file by clicking on "File", then "New". Save the file as index.html. This will be your main web page file.
-
2
Create another new file using the same steps above. Save the file as style.css this will be your CSS file.
-
-
3
Add the basic web HTML to the web site. This is the HTML that ever web page needs so the browser recognizes it as a web page. For example:
<html>
<head>
<title> My page</title>
</head>
<body>
</body>
</html>
-
4
Add the content to your web page. Surround the content with DIV tags. This will be between the BODY tags. For example, an article will have title and several paragraphs of text:
<html>
<head>
<title> My page</title>
</head>
<body>
<div>
<h1>My Article</h1>
<p>This is a paragraph.</p>
<p>This is also a paragraph.</p>
</div>
</body>
</html>
-
5
Give the DIV tag an ID. This will tell the browser that it needs to look in the CSS file for that ID and apply the styles for that ID. For example:
<div id="article">
The name of the ID can be anything you want as long as there are no spaces.
-
6
Link the CSS file by using in the LINK tag between the HEAD tags.
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
The elements of the LINK tag tell the browser that it is looking for a style sheet, the name of the style sheet, the type of code in the style sheet and what the style sheet is for, which in this case is for the computer screen. Save the HTML file.
-
7
Create the CSS layout and colors in the CSS file. CSS requires you to define the element and the properties for that element. For this page, we will change the color of the background, center the page and style the article. CSS can style HTML tags, IDs and Classes. In the example we have several tags, BODY, H1 and P. We also have one ID, article. First, layout these elements in the CSS file. For example:
body {}
#article {}
h1 {}
p {}
The ID is defined in the CSS file by the # mark. Tags are listed without the <>.
-
8
Add properties to style the CSS elements. There are a lot of ways to do this. For example:
body {
background:#ff0000;
color:#000000;
margins:0;
padding:0;
font: Times 12px;}
For the body, the background is set to red using the hex code for red. You can get other hex codes by using a color picker. The color property sets the text color to black. Margins and padding are set to zero so it covers the entire browser window. Font sets the font and size of font for the entire web page.
#article {
width: 1000px;
margin: auto 0;
padding: 15px;
background: #ffffff;
border: 3px solid #000000;}
In the article ID, we have set the width to 1000 pixels and the margins to auto 0 so that the browser will automatically center the article. The padding moves the text away from the edge of the box by 15 pixels. The background is set to white and there is a border around the box which is black, a solid line and 3 pixels in width.
h1{
color:#0000ff;
text-align: center;
}
The heading is set to blue using the color property and centered in the article box. The paragraphs have already had the color, size and font defined in the body element. However, you can style the P tags further:
p {
line-height: 130%;
}
Line height separates the text by putting more space between lines. This makes the text easier to read.
-
9
Save your CSS file.
-
1
