CSS Class ID Tutorial

CSS Tutorial –class Selector

Overview

            In css the Class selector work in such a way that you can select a specific style  for a group of elements. In this tutorial you will learn how to use the class selector to style parts of your web site.

Materials

             Tutorial folder from the class FTP server at ftp://fall10.graphicinterfacedesign.com/students/tcarlisl/tutorial/tutorial.zip

Instructions

            The Class Selector

The class selector is used to identify a number of elements as being part of a conceptual group. These elements can then be modified with a single style making it easier to change the style among an element such as all the h1 elements or all the p elements.

In the example below you will see how we code the html, please download our file from wired, and make changes to our file.

                     In this example we see that in our head we have declared that we are using css styles, and                        

                    then in the style we see the .objective {color: red;} this states that all class objects in our  code will have red text. Now lets take a look at our in-text code.

 In this screen capture we have the body of our HTML, this is where we specified our class as objective, In 2 areas we specified class the first is in the paragraph at the top we specified <p class=”objective”>  </p> and lower we specified a h3 as part of the objective class. If you test this file you will see that the text in these two classes are red instead of black. Now take a moment to change the colors or create other classes in this document.

 Contact Information

            Now you have learned about Class Selectors, have fun playing with them around your web sites. And please feel free to play with our file in learning how it works.

Contact Information

            Thomas Carlisle is a student at Utah State University; he is focusing his studies on Graphic Arts, Management Information Systems, and Multimedia Development. He has a family, wife and two children who are very supportive of his educational goals. If you have questions for Thomas, feel free to E-mail him at kf7ebx@gmail.com.