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.

            

Week 2 Demonstration

Today we received a demo on basic HTML tags, To go with the demo we had to create a basic HTML page that showed the elements. I did a very basic resume page to show my knowledge of the HTML tags. I have attached a screenshot below of the page that I created.

Site Critique

            Today I looked over and critiqued two web pages. One of these web pages was HTML and the other was in Flash. I would like to share the links to, I will then discuss my thoughts on one of the web sites.

HTML: http://www.pixar.com/

Flash: http://struckcreative.com/

            I am going to discuss the HTML site from www.pixar.com. We are all familiar with Pixar they are a large movie creator, and are the leader in animated movies. They have developed a lot of new fun children’s movies that adults also like. I am going to answer 3 questions about this site.

1.     What makes this site successful?

a.     When I first navigate to the Pixar web page I realize that it is simple and easy to read, they use interesting imagery from their shows to interest you in their web page. I feel that if there are interesting things to look at it keeps the viewer more engaged in the site. Pixar also does not have advertizing from other companies about their site to distract you from them. The Pixar has some interactivity for the user, but most if it is for fun but holds the users attention.

2.     Describe the Navigation?

a.     The navigation on the Pixar site is very simple, Pixar used a typographic banner for their navigation, to go to the different areas of the site you click you’re way though the web site. This banner gets you through to the different sections. Then inside of each section there is a different navigation process through that section tailored to that section of the site. There is only one way to get through this site. Though I like the navigation I feel that this site lacks a roadmap within itself.

3.     Describe, discuss and question how this site uses the following to communicate information:

a.     This web page used visual hierarchy, with typography on most of the pages through the site. As the viewer browses through the site you can see that the viewer followed a grid to keep everything organized. The site also limits the information for each page to keep the viewer from having to scroll as often. Through the site there are video shorts, and user interactivity as Pixar shows you examples of their work, trailers and give the viewer a basic tour of the companies process.

4.     What type of content is on this site and what is the site’s purpose?

a.     The content on this site is mostly image and animation; there is some text to support the imagery. They use some video to show examples of their movies.

5.     Who is the sites audience? What have they done to effectively communicate with the user?

a.     Pixar had an interesting dynamic as they have a very broad client, they have to create a movie that is entertaining to a child, but it needs to sell to an adult. The same goes with their web site. Children may want to browse around the site to look at their favorite movies, while an adult wants to look around the site to get information on the movies. Pixar used a cross between multiple generations of users, they created a site using visual hierarchy with supporting text that keeps the site interesting to those that cant read, but can deliver some fun information to those that can read.  I am drawn to the web page when I navigate here, but so was my 2 year old daughter as she was recognizing her favorite movies. I feel that they successfully drew in multiple audiences.

I have a few ideas on what I want to do for my web page for class. I have thought about doing a web page introducing people to the hobby of amateur radio that will have information on getting started and links to supporting web pages. I have also thought about doing a portfolio site for a friend of mine who is a photographer. Though I am not yet set on what I will do for my web page I have a good start on my ideas.