CSS Challenge, Changing a Cursor and CSS Box Model

Posted on by tchastkavich

Shape of the Day:

  • CSS Challenge Assignment
  • Learn how to change your Cursor with CSS
  • Discover/learn about the CSS Box Model

Website of the Day:

http://roblafratta.com/mariowario  – Cool costumes for Mario and Wario made with CSS!

1. Begin by opening the following websites and keep them all in a separate window as tabs. This will be your references window. Keep it handy or bookmark these pages!

2. Complete the following CSS Challenge Assignment:

3. CSS Box Model Assignment

Check out this online interactive demo: http://guyroutledge.github.io/box-model/

Here are some helpful code hints when working with components of the box model: margins, borders, padding, and box model

Show the Box Model on Paper

  1. CSS can style the “boxes” that all HTML elements contain around them.
  2. Here are the specific box model properties: margins (this is the furthest outside of the box), borders (a visible line outside of the box but inside the margins – only visible if style and color are provided),  and padding (empty space between the content/box and the edge of the border of the box).
  3. Draw a webpage on a piece of paper, draw a wrapper, and then draw an image in the wrapper. Identify where the margins, borders, and padding for both the wrapper and the image would be.

Now try the following instructions:

Create a webpage

Begin with this code here

To help you with this new code, you can read the comments sections, or you can read the following:

Wrapper - sets up elements on a page like a container of "things"

#ID selector - new CSS selector followed by a # on a style sheet. ID's are usually used to identify specific sections on a page (wrapper, menu, header, sidebar) to help with navigation, organization and quick editing ability

Div tags - often used with CSS to style specific areas of content

Height and Width - these are the properties used to provide elements with height and width values. These can be in pixels or percentages.

Direction properties: You can specify top, right, bottom, and left for margins, borders, and padding. You can use none of them, some of them, or all of them! They can all be different values too.

Add this code to your style tag img rule-set: margin-top 150px; and margin-left: 250px; Did you notice what this did?

Add a border to your img rule-set: border-color:black; border-style: dashed; border-width: 3px

This can also be written in short hand like so - border: 3 px dashed black;

Add padding: 2px;

Are you able to add a background-color to your img? Try it!