Today’s Goals:
- Finish your Harvest of the Month graphics (click here for instructions)
- Learn and practice more CSS: internal & external style sheets; setting up a page wrapper
Today’s Featured Site:
- https://jenniferdewalt.com/color_clock.html– Watch the page color slowly change while the hex value changes
CSS Questions to Explore in Pairs:
- What is a style sheet?
- Can a webpage have more than one style sheet?
- What is the difference between an internal style sheet and an external style sheet?
- Check out the CSS code of the school website and write down what’s familiar and what’s unfamiliar.
- Check out the CSS code of a website of your choice and write down what’s familiar and what’s unfamiliar. Hint: Right click, select view page source, and look in the head section for a blue link to the style sheet; it should end in .css
- Make a list of all of the things you’ve learned to do so far with CSS.
- 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 Practice
- Let’s start a page from scratch and grab code as we need it from our other projects.
- Let’s set up a page with a background image.
- Now let’s set up a page wrapper. Wrappers or containers are used to contain elements on a webpage. You might see #content or #wrapper or #container in CSS. They have margins, padding, and height and width values (more on that later). We are just going to set up a basic one now.