How to Create CSS Classes for Web Page Layouts
Classes of Cascading Style Sheets (CSS) allow web designers to assign similar attributes to multiple HTML tags without having to create entries for each one. Rather than placing styles, such as color, font size, height and width directly in the HTML tags, all style attributes are placed in a separate file called a CSS file. The HTML file is linked to the CSS, and when a website visitor accesses the HTML file in a web browser, the HTML loads the attributes in the CSS file and applies them to the appropriate HTML tags.
Other People Are Reading
Instructions
-
Setup the CSS file
-
1
Create a regular HTML file. It must at least contain the following tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website Name</title>
</head>
<body>
</body>
</html> -
2
Create a directory within the HTML documents directory and call it "styles".
-
-
3
Make a new file in the "styles" directory called "style.css". It should be an empty text file.
-
4
Edit the HTML file and add the following line directly above the </head> tag:
<link rel="stylesheet" type="text/css" href="styles/style.css" />
Assign Classes
-
5
Edit the HTML file.
-
6
Create a generic box that you will use to apply styles For example:
<div class="classname"></div>
-
7
Replace "classname" with a name that best describes your class.
-
8
Assign the same class name to any tag you want to have the same features. For example, if you have 10 boxes and five of them will have the exact same look, assign the class to those five tags.
-
9
For each group elements that has a unique style, assign a new class for it.
Specify styles for classes
-
10
Edit the CSS file.
-
11
Create an entry for each class that you have assigned using the following format:
.classname { }
-
12
Assign attributes to the classes. For example:
.classname {height: 30px; background-color: #ffffff}
-
13
Repeat the same steps for each class, and be sure to save your documents periodically.
-
14
Open the HTML file in a web browser at any time to check your work, and also check the code with a CSS validator.
-
1
Tips & Warnings
The are hundreds of CSS styles that you can assign. Use the link listed in Resources to learn more about them. Remember to save your documents and check your work frequently.
