CSS is here! – Mr. Chastkavich's Website

Shape of the Day:

http://oldweb.today/ – Check out what the web used to look like so long ago!

Try to recall: Why is CSS used and what is it? If HTML obtains all the content (links, paragraphs, headlines, etc.) then CSS does what to the content?
See what happens when you take away the CSS from a simple webpage. Click here to view the example – you can download it so it is a local file on your computer, or you can try to sift through the extra code from Office 365. Disable the CSS using the Chrome Developer Tools (right click > inspect) by deleting the <style> tag in the <head> tag. What is left?
Check out this webpage: http://www.csszengarden.com/ – follow the instructions at the top and download the HTML File and the CSS File onto your computer IN THE SAME FOLDER. Find the file on the your computer and open the HTML file. Now go to the original webpage and delete the CSS (Mr. Chastkavich will show you how to do this). Do the same thing for the downloaded HTML file. What do you notice?
What is the CSS syntax? – Start with Pointy Brackets for <style> tag in <head> section, curly brackets {} in the style sheet and semi-colons at the end of every line.
Take a look at this example. Change the background to pink, h1 to purple and make the text-align to the left. Make the paragraph font-family Arial as well as change the font-size to 16 pixels.
Understanding CSS Vocabulary – What does CSS stand for? Identify the following: Selector, property and value. What is a style sheet?
Practice with CSS:

1. Add CSS and apply it to your HTML
2. Change the background colour of your page
3. Add a background image to your page
4. Change the font style
5. Change the text colour and the size

- - Set up basic webpage: Set up a new HTML document using Brackets, ensure the document has the <html> <head> <title> and <body> tags. Save this file as csspractice1.html. Add a headline and a paragraph, we need some content to play with when we style it with CSS. Your headline can be a word that summed up your September, and the paragraph can highlight what you remembered about September 2019.
  - Add some CSS – begin by adding the style tags to the head section. Add selectors to change the headline and paragraph of your HTML. Change the colours of your headline and paragraph. Change the background colour of your webpage. Change the font as well.
  - Find background image for your page. Ensure you are using the appropriate websites. Add the background image to your CSS using the code here.
  - You can make your background a fixed image if you have content that you need to see by scrolling – check it out here.
Understanding CSS Colours

1. To choose colours with CSS, you can either use colour names, RGB values (click here to see what these look like), or hex colour codes.
2. Hex colour code examples:

- - #ffffff (white) (full color)
  - #000000(black) (no color)
  - #ff0000 (red)
  - #00ff00 (green)
  - #0000ff (blue)