CSS is here!

Posted on by tchastkavich

Shape of the Day:

  • Complete inspirational quote graphic
  • Complete Colours lesson from Friday
  • Start on CSS lesson

Website of the Day:

http://the100meterscroll.com/ – The ultimate finger workout

1. Double check Assignment #7 on Teams. The instructions have been updated. Ensure you have attached all work.

2. Lets start on some CSS

  • 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). What do you notice?
  • Try the other CSS templates available on the zengarden website. Mr. Chastkavich will show you where to find them if you do not see them.
  • What is the CSS syntax? – If using CSS in the <head> tag of your single HTML document, then you 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. The components of each element in a CSS document are: 
    selector { Property: value; }
  • 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 and ask Mr. Chastkavich if you get stuck with any of the following:
    1. Add CSS and apply it to your HTML Dictation Challenge file.
    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

3. Your first CSS assignment

  • Set up basic webpage: Set up a new HTML document using Visual Studio, 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 2022.
  • 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 a 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

4. Listen to or Read the following article on colours:

5. Here are some Infographics, check them out and see if they are helpful. They were obtained from this website here.

6.Try out some of these colour tools:

7. Complete the following form:

8. Test how well you know your colours with this fun game.