Today’s goals:
- Review HTML and begin learning CSS
Today’s featured website:
- https://codepen.io/finnhvman/pen/xXpzVN– This addicting game is made entirely from CSS!
Beginning CSS
- What is CSS and why do we use it? HTML tells the browser what the content IS (link, paragraph, headline, etc.) while CSS STYLES the content (color, layout, positioning, font, etc.).
- Open Firefox, and let’s go to a few different sites to see the difference CSS makes in design. Let’s try YouTube and http://le-mugs.com/en/. Go to CSS in the web developer menu at the top and choose disable all styles. What differences do you notice?
- Same HTML, different CSS: http://www.csszengarden.com/. Different CSS styles create entirely different webpages using the same HTML!
- CSS syntax: Pointy brackets < > for style tags in head section, curly brackets { } in style sheet (next to the letter P on your keyboard; hit shift to make them) and semi-colons ; at the end of every line (next to the letter L, no shift key needed)
- Let’s look at this example
CSS Practice
- You will:
- Add CSS and apply it to your HTML
- Change the background color of your page
- Add a background image to your page
- Change the font
- Change the text color and size
- Set up basic webpage: Let’s set up a basic webpage with html, head, title, and body opening and closing tags. Save this as css1.html. Now, let’s add some content to style- a headline and a paragraph.
- Add some CSS: Begin by adding style tags in your head section. Next, let’s change the colors of our headline and paragraph. Now let’s change the background color of our webpage. Let’s also try changing the font.
- Let’s add a background image. We’ll use this image and this code to get started.
- Fixed background image Like this example.
Fun with CSS colors
- To choose colors with CSS, you can either use color names, RGB (red, green, blue) values, or hex color codes- check this out for examples.
- Hex value examples:
- #ffffff (white) (full color)
- #000000 (black) (no color)
- #ff0000 (red)
- #00ff00 (green)
- #0000ff (blue)
- Test your new color knowledge with this fun game!