Test Yourself: CSS3

Making sure you've covered everything you need to know for the coming projects..

Scroll down...

Content

Resources

Comments

You've learned a lot so we've got a lot of questions for you to answer. Some of these things may not have been covered explicitly in the readings or assignments so it may be worth looking them up if you don't know!

Introduction to CSS3

What does CSS stand for?
What are a few new CSS3 features?
What are browser prefixes?

CSS Basics

What are selectors?
In general, how specific should you be when targeting elements using selectors?
What's the difference between using %, em and rem to specify sizes?
How do you select an element inside another element?
How do you target the immediate child of an element?
How do you target a class inside a class?
How do you target a class inside an ID?
How would you target "all the links inside li elements that have the class axes which are inside the unordered list with the id tools-listing"?
What are the three ways to include CSS in your project?
How do you import an external stylesheet?
What is the browser's default stylesheet?
What is a "CSS Reset" file and why is it helpful?
Which stylesheet has preference if you import multiple ones and there are overlapping styles?
What is the order of priority of selectors (e.g. if you specify that the <body> has color black but <h1> tags have the color blue but class main-title has the color red, which will be used by <body style="color:yellow"><h1 class="main-title" style="color:green">Howdy!</h1><body>?)

The CSS Box Model

What's the difference between margin and padding?
How do borders affect the size of the box?
How can margins be used to center an element horizontally on the page?
What does it mean that "margins are collapsed"?
What is the difference between block, inline-block and inline elements when thinking about the box model?
When are you required to specify the width of an element vs letting the browser figure it out for you?
How can you check an element's box model in your developer tools (it's a helpful graphic)?

Positioning Elements with CSS

What is the DOM?
How do elements get placed in the DOM by default?
How can you override element positioning using the position attribute?
When are you able to use the top left right and bottom attributes?
What is the difference between float and position?
Which element acts as the parent for a floated element?
What is the difference between floating right and floating left?
If you have a bunch of elements floated next to each other and you make the browser narrower, what happens?
What's the practical difference between relative and absolute positioning?
Which element acts as the parent for an absolutely or relatively positioned element?
How would you set up a grid of 20x20 boxes on the page using floats? Using lists?
What are negative margins useful for?

Working with Fonts and Typography in CSS

What are "web safe fonts"?
What are a few examples of web safe fonts?
What are generic "catch all" or "fail safe" fonts?
What are a few examples of generic "catch all" fonts?
How do you set the default font for the entire document?
How do you change the font size with CSS? Thickness?
How would you go about importing a font from Google Fonts?

Applying Backgrounds and Gradients with CSS

How do you set the background of an element to be a solid color?
How do you set the background to be a repeating image?
How would you make the image fill the entire background no matter what screen size is viewing it?
How do you create a background gradient with CSS?

Styling Lists in CSS

How do you change the list item style type with CSS? How does this effect ordered vs. unordered lists?
What two approaches are there to display lists in a single line?
When floating list items, to which element does the .clearfix class get applied?

Working with Images and Other Media

What CSS would be applied to an image to make it responsive?
What are common attributes of image tags?
How do you load a smaller version of an image?
How do you get an image to fill up an element?
How can you save load times by using appropriately sized images?
When should you store images externally vs on your server?
What are the main types of image files and how are they different?
Which file types let you use animation?
Which file types let you use transparent colors?
Which file types are best for photos? Graphics?
Which file type lets you scale an image as big as you want without affecting file size (and why)?
What's the difference between raster and vector images?

Styling Tables in CSS

What CSS must be applied to a table to make its borders display as connected lines?
To which elements will you likely be applying most of your styles in a table?

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: The Viking CSS Garden

Onward!

or go to previous lesson...

Welcome to the Basic Prep!