CSS: Cascading Style Sheets


Slides

 Today's Lecture

Additional Info

In Class Exercises (ICEs)

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:
  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

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)

Part 3: Practice Using Some Basic CSS Styles

  1. Open the HTML file you created to hold HTML resources in the last lecture. Make sure thatyou add an internal stylesheet by adding a style element into the head element.  Augment your HTML by experimenting 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.
  3. You can always add more information to store some CSS resources.

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.

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.

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.

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.

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.

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.