How to Create CSS Classes for Web Page Layouts

Save

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.

Things You'll Need

  • Text editor
  • Web browser

Setup the CSS file

  • 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>

  • Create a directory within the HTML documents directory and call it "styles".

  • Make a new file in the "styles" directory called "style.css". It should be an empty text file.

  • 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

  • Edit the HTML file.

  • Create a generic box that you will use to apply styles For example:

    <div class="classname"></div>

  • Replace "classname" with a name that best describes your class.

  • 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.

  • For each group elements that has a unique style, assign a new class for it.

Specify styles for classes

  • Edit the CSS file.

  • Create an entry for each class that you have assigned using the following format:

    .classname { }

  • Assign attributes to the classes. For example:

    .classname {height: 30px; background-color: #ffffff}

  • Repeat the same steps for each class, and be sure to save your documents periodically.

  • Open the HTML file in a web browser at any time to check your work, and also check the code with a CSS validator.

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.

References

Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!