The goal of these sample web pages and associated style sheets will be to provide the student with a high level overview of the most basic CSS concepts. Mastery of CSS is not the end goal of these examples.

After reviewing these samples the student should have an awareness of:

• the difference ways to add CSS styles to a document
• class and id selectors
• the different display options
• the CSS box model
• float and clear
• responsive images
• pseudo-classes
• how to center content
• media queries
• how to use less CSS preprocessor

What are the different ways to add CSS styles to an HTML document?

What is the difference between a class selector and an id selector?

When would you choose to to apply a class to an element vs. using an id?

What is the difference between "display:none" and "visibility:hidden"?

Briefly name and describe the different areas of the CSS box model.

Describe what happens to elements that follow an element that has a float on the page? How can this problem be fixed?

What is the advantage of using percentages as the value of element widths?

What is one way to center content on a page?

How can you make images more responsive on a page?

Name a couple different pseudo-classes.

What is the benefit of styling a page as "mobile first"?

How can media queries help aid in responsive design?

What are the different ways that we can use the less CSS preprocessor?