Today’s goals:

• CSS Review
• Learn and practice more CSS: internal & external style sheets; selectors, properties, and values
• Learn how to change the computer cursor using CSS
• Up next: the box model and new seats!

 Today’s featured website:

• https://www.google.com/maps/space/earth– Google Maps for space!

 CSS Review

1. Let’s set up a basic webpage with opening and closing html, head, title, style, and body tags
2. Let’s add a headline h1 in the body section that says No School Tomorrow!
3. Let’s style the headline:
   1. Add an h1 selector in the style tags in the head section
   2. Center the headline using the text-align property
   3. Add the font-size property to make the headline 35px
   4. Add the color property to make the headline purple
   5. Add a Google Font by copying/pasting the link to the font in the head section and the font-family with the h1 CSS
4. How can we add a background color to our page? What selector do we need in our CSS? What property do we use? What value?

 CSS Properties, Values, and Vocabulary

• Identify & define on our webpage:
  • CSS selectors
  • CSS properties
  • CSS values
• CSS Vocabulary: Let’s look at http://apps.workflower.fi/vocabs/css/en and review some key terms.
• What is a rule-set? Where you have already used a pseudo-element?
• Selectors: CSS selectors select something on your webpage to be styled- an HTML element such as a headline, a div (section of a webpage), or a class (group of properties that get applied to certain things). So far we’ve only selected elements (headlines, paragraphs) and our body section. We will learn about divs and classes soon.
• CSS properties and values: CSS properties and values are applied to the different selectors to style them. Let’s check some out here.
• CSS questions to explore in pairs:
  • What is a style sheet?
  • Can a webpage have more than one style sheet?
  • What is an internal style sheet?
  • What is an external style sheet?
  • What is the difference between an internal style sheet and an external style sheet?
  • What have we been using in class to practice CSS, an internal style sheet or an external style sheet?

 Change the Cursor with CSS

• Let’s use the default options. Let’s add the cursor property to the body declaration block in our CSS. Example- cursor: zoom-in;
• Let’s do a custom cursor using our own image! First, try this- cursor:url(https://www.mhswebdesign.com/storage/2017/10/pumpkin.png), auto;. Next, create your own. Replace the image name with yours in the above code. You will have to find another image to use, preferably small.
• Question: How could you change the cursor at specific times, for example, when someone hovers their mouse over a certain part of the page or certain content, such as our headline?