There truly is no right or wrong way to create Cascading Style Sheets (CSS) for your JavaScript applications, but using an organized approach can make the task go more quickly and produce better results with fewer errors. After all, CSS is really about providing an organized and pleasant page appearance so that the user spends more time viewing the information rather than trying to figure out where the information resides.
The following steps provide one process you can use to create CSS:
Define a basic design for the site as a whole.
Decide how you want to place elements onscreen. For example, determine where you want to place a menu. If the site will use headers and footers, you need to consider how these elements will appear. The main content should appear in the center of the page, but many sites also rely on sidebars to provide details about items the user selects. Here’s a typical example of a page design:
Develop a template for your pages that uses this basic design and then use this template to create the actual pages.
The template should contain all the elements of your basic design. Use <div> tags to create the elements. Add a test entry in each of the areas so you can see how well the CSS is working. Here’s an example of a template you might use with the layout for this example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Sample.css" />
<title>Working with CSS</title>
</head>
<body>
<div id="Menu">
<p>Menu</p>
</div>
<div id="Header">
<p>Header</p>
</div>
<div id="Sidebar">
<p>Sidebar</p>
</div>
<div id="Content">
<p>Content</p>
</div>
<div id="Footer">
<p>Footer</p>
</div>
</body>
</html>
Create a list of the elements you want to style.
The template provides a list of basic elements that you must include in your .CSS file. It’s important to think through the layout process. The element list acts like an outline for your layout. You use it to ensure the resulting CSS will perform as expected.
Develop a .CSS file to go with your template.
The .CSS file should contain all the information required to make your layout a reality. Here is a basic example of what the CSS might look like for this example:
div
{
text-align: center;
font-family: sans-serif;
font-size: 20px;
border: 0px;
padding: 0px;
}
#Menu
{
position: absolute;
background-color: #bfbfff;
width: 90%;
height: 80px;
}
#Header
{
position: absolute;
top: 80px;
background-color: #ffff00;
width: 90%;
height: 80px;
}
#Sidebar
{
position: absolute;
top: 160px;
background-color: #00ff00;
width: 30%;
height: 200px;
}
#Content
{
position: absolute;
top: 160px;
left: 31%;
background-color: #ff8080;
width: 60%;
height: 200px;
}
#Footer
{
position: absolute;
top: 360px;
background-color: #00ffff;
width: 90%;
height: 80px;
}
Test the layout in all of the browsers you intend to support for the application.
Testing is an essential part of creating a layout. Sometimes you have to tweak some of the layout parameters to get the desired result. Here’s how the layout looks in Chrome. The layout looks essentially the same in Firefox and Internet explorer as well.