ICE LECTURE Lecture 03 ICE

Note: Please keep the programs that you create today, in case you have a question about your grades for the ICEs at the end of the quarter. When you're working with a partner, each person should save their own, individual copy.

REMINDER: This quarter we will be concerned that your work displays correctly in Chrome only.

ICE Part 1: Identifying the CSS & HTML regions of a file

  1. For each of the following files, open the file in a browser and then right-click on the browser page and select either View Page Source (Firefox, Chrome) or View Source (Internet Explorer). Go through and clearly identify which regions of the file are CSS (and therefore obey the syntax rule of CSS) and which regions of the file are HTML (and therefore obey the syntax rules of HTML).
    Here are some sugestions for how you can identify the regions:
    • Print out the source (not the rendered page, but the source itself), and use pencil, pen, or highlighter to draw boxes around the different parts.  Make sure to clearly label the different parts!
    • Copy the source and paste it into something like Microsoft Word, and then highlight the CSS & HTML parts using different colors  (you can Google/Bing for something like "highlight in MS Word" for help, if you need it).
    • Do something else (such as Microsoft OneNote, which allows you to 'draw' on the page?).
      Please let your instructor know if you tried something else and it worked well!
  2. Because this is a very important, but fairly 'rote' skill, here are some instructions that should get you started on identifying the different regions
    1. To identify the external CSS files, go through the <head> element of the document and look for <link> elements that appear to link to .CSS files.
      Also, anything that appears to be a file ending in .CSS is probably an external CSS file.
    2. To identify internal CSS stylesheets go through the <head> element of the document and look for any <style> elements that contain CSS. Typically there's only one, although it's legal to have as many as you want.
    3. To identify inline CSS stylesheets go through the <body> element and look for any HTML elements that have a 'style' attribute.  Everything between the open double-quote and the ending double-quote is CSS (highlighted here in yellow), and obeys the rules of CSS.
      <p style="color:sienna; margin-left:20px; margin-right:600px;;">THIS</p>
  3. Finally, as you're doing this please remember that while it's good to understand both the inline and external stylesheets, we'll generally use the internal stylesheets for demonstration files, etc.
  4. Files for this exercise:
    1. InlineInternalExternalDemo.html  (Yes, this is the demo file :)  )
    2. IdentifyRegions_01.html
    3. IdentifyRegions_02.html
      For this one - in addition to identifying the regions, notice which styles are being applied to which elements by the internal style sheet and the inline styles.  Specifically, you should pay attention to the spans that are affected by both the internal and inlines styles - what happens when those two styles do not conflict?  What happens when those two styles do conflict?
    4. IdentifyRegions_03.html, which uses the file IdentifyRegions_03.css

ICE Part 2: Style A Page Using Selectors

  1. Open up this file: StyleAPageUsingSelectors.html, then save it to your local computer and open it in an editor of your choice (such as Brackets.io)
  2. Using only the internal stylesheet (the one near the top of the document, in the head) change the style of the document in the following ways:
    1. Change all the paragraph elements in some way.  At this point I don't expect you to have memorized all the CSS properties (or even a subset), but you do have several examples (from the prior exercise, and the in-class slides) that you can copy.
    2. Change the h1 with an id of "title" in some way. 
    3. Change all the div's with the class of "sidenote" in some way.
  3. Note that there are several h1's on the page (in order to help you make sure that you're only changing the one with an id of title) and that there are several divs on the page, some of which have the sidenote class, and some of which don't.
  4. For each of the above items, make sure that you use a unique style for each of 2.A, 2.B, and 2.C  - make sure that each style is visibly different from the others for easy verification (by yourself, mostly, but also by the instructor)

ICE Part 3: Practice Using Some Basic CSS Styles

  1. Create a new .HTML file, and make sure thatyou add an internal stylesheet by adding a style element into the head element.  Create enough HTML that you can experiment with each of the following CSS properties.

    For each properties there's a list of sub-items that you're expected to know from memory.  For example, you should be able to create a style that has a background-color of red from memory.
    1. both color and background-color
      1. red
      2. green
      3. blue
    2. font-family
      1. "Times New Roman",Times,serif
      2. Arial,Helvetica,sans-serif
    3. font-size
      1. 250%
      2. 10pt
      3. 2em
    4. font-style
      1. normal
      2. italic
    5. text-align
      1. left
      2. right
      3. center
      4. justify
  2. View the file in a browser as you do this.

ICE Part 4: Change Text Color Using an Inline CSS Style

Using the template.html file you created in ICE 03, create a new HTML file for this exercise and name/rename it ice03_01.html (or you can use the template.html file provided in today's Example Files).  Add some text to that page, then use an inline CSS style to change the color of the text to be something other than the default ('red', 'green', 'blue', or even a hexadecimal color such as #660099 (which is purple) all work well).

You may want to skim through the Lecture 3 Slide (Slides 7 - 10) or "Three Ways to Insert CSS" from W3Schools.

ICE Part 5: Change Text Color Using an Internal Stylesheet, an id, and a Class

Building on the page you created for the previous exercise, add a new paragraph that contains at least 5 sentences, then create an internal style sheet within that same page. Use a span and an id (and CSS, obviously) to change one sentence to a color of your choosing (it would be best to choose a new color, so it's clear that the color change is being caused by the work you're doing for this exercise). Use several spans to tag a couple of different sentences with a class, then use CSS to change the colors of all those sentences. It would be best if the sentences were not adjancent (so that it's clear that each span is working correctly).

You may want to skim through the Lecture 3 Slide (Slides 7 - 10) or "Three Ways to Insert CSS" from W3Schools.

ICE Part 6: Change Text Color Using an External Stylesheet, an id, and a Class

You should repeat the prior exercise (add at least 5 new sentences, and ultimately change the colors of sone of them using an ID + CSS, then a class + CSS), except that this time the stylesheet should be external (placed into a separate .css file).

You may want to skim through the Lecture 3 Slide (Slides 7 - 10) or "Three Ways to Insert CSS" from W3Schools.

It will be tempting to copy-and-paste both the stylesheet and the 5 sentences. While that might be a good place to start, make absolutely sure that you change the CSS selectors (and the ID's and class inside the HTML) to have new names. We haven't looked at how CSS actually cascades / combines so it's critical that the new paragraph not duplicate any CSS names (IDs or class names) from the prior paragraph.

Again, make sure to change the colors you're using so it's clear that you've successfully used the external style sheet.

ICE Part 7: Change Font

Add another paragraph to the page with some text inside (it doesn't matter how much). Add a style to the external style sheet, then use that style to change the font for the entire paragraph (you should apply the ID/class to the <p> element, rather than applying it to a span.

In order to do this you might want to skim through the "CSS Fonts" tutorial from W3Schools.

ICE Part 8: Make some Text Bold, Italicized, etc

Add another paragraph to the page with some text inside (it doesn't matter how much). Add a style to the external style sheet, then use that style to make part of the paragraph bold-faced, and part of it italicized.

In order to make the text bold and italicized, you'll probably want to skim the "CSS Font-Weight" and "CSS Font-Style" tutorials from W3Schools.

ICE Part 9: Go Look Up an Interesting CSS Property and Apply It To Your Web Page

Look up a CSS property that we haven't examined in class and apply it somewhere within a new paragraph in your web page.

ICE Part 10: Study Skills: Tracking Due Dates

You won't be able to get all your work done if you lose track of what is due and when it's due.  For almost everyone there's no way to remember all their due dates so we need to write the due dates down somewhere.  For this exercise, work in small groups (of 2-4 people) and talk about how you keep track of your due dates.  The goal here is to get you thinking about how to keep yourself organized by having you swap tips and tricks with your peers.

If your discussion ends early then please do the following:

List some pros and some cons of using each of the following technologies to keep track of your due dates:

  1. A paper notepad + pencil/pen
  2. An Excel spreadsheet, or a Google Docs spreadsheet
  3. An Online calendar
  4. A homework tracking app for your phone

If you get done with this before everyone else and the homework-tracking app sounds appealing to you then please feel free to search for such an app.

Regardless, be prepared to stand up and explain what you were talking about to the rest of the class.