Class Wednesday, November 1, 2017

 Today’s goals:

  • Learn how to change the computer cursor using CSS
  • Learn and practice more CSS: internal & external style sheets; selectors, properties, and values

 Today’s featured websites:

 Important Announcements

  • Year Up will be coming to recruit students on Thursday, November 9th during 6th period. Year Up is an amazing program for our graduating seniors – they offer professional development, paid internships at amazing organizations like Harvard, Google and State Street, and also help our student start meaningful careers once they graduate. Year Up students make an average of $36,000 the year they finish. See Mr. Klein for more info and/or let me know if you want me to sign you up for Nov. 9.
  • There is a free tech workshop at Tufts starting in November for high school students; more info here. This is a fantastic opportunity and I plan on going to the first session!
  • Get festive and download a desktop background for November!

 Change the Cursor with CSS

  • Let’s use the default options. Open any CSS practice page you have and add just the cursor property line to your body section. 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.

 CSS Questions to Explore in Pairs:

  1. What does CSS stand for and is a style sheet?
  2. Can a webpage have more than one style sheet?
  3. What is the difference between an internal style sheet and an external style sheet?
  4. Check out the CSS code of the school website (launch site in Firefox and use CSS tool in the developer tools) and write down some things that are familiar and some things that are unfamiliar.
  5. Check out the CSS code of a website of your choice and write down some things that are familiar and some things that are unfamiliar. Again, use the Firefox developer tools to view the CSS code.
  6. Make a list of all of the things you’ve learned to do so far with CSS.
  7. Go to this site and see CSS Demo – One HTML Page – Multiple Styles!. Click on all of the style sheets, and no style sheet, to see the differences. Write down all of the differences you see (color, layout, etc.)

 CSS Properties and Values

  • 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.
  • To do: Open Notepad++ to a recent CSS practice page. What are the selectors? What are the properties? What are the values?