Exercise 6: css research

CSS: Exercises: Their are two parts to this exercise:

Part 1. In groups of 5 to 6, create a web presentation for next week that answers one of the following questions:

– What is CSS and how does it work?
– Through examples, explain how the CSS syntax works
– Through examples, explain the difference between id and class
– Through examples, explain the difference between external style sheet, internal  style sheet and inline style, when is it better to use one over the other?
– Through examples, explain the box model
– Through examples, explain what floating and position do. What is the difference?
– Through examples, explain css grouping/nesting
– Through examples, explain how to align elements
–  Through examples, explain how to build a css navigation bar
– Through examples, explain how to build a css based image gallery

Part 2.In groups of 5, research how to create a Liquid three column CSS layout

Post on your individual blogs a link to a presentation (multimedia based, such as powerpoint) that demonstrates the steps necessary to create a common layout for a website using CSS.

Part 3: Individually: Create a css liquid layout for your ijndex page. It  must include three columns using the following layout:

css layout

Your layout has to

– Load the same background image in three different pages.
– Position a background image in the right hand column away from the text
– Align the text in the Header to the left
– Align the text in the right hand column to the right
– Remove the line under all links, change their color to a color of your choice.
– Specify the width of the right and left column to be 300 px
– Make sure you use padding and margin to create the same text flow as in the example.

—-

Post your answers as 1 comment to this post which includes links to each presentation and your css layout.

 

37 thoughts on “Exercise 6: css research

  1. Pingback: Week 7 | MPM17 Research for Experience Design, Fall Term

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s