LIS 390W1A - Lab 6: Introduction to CSS

Part I

  1. Open a terminal window (or ssh client) and ssh into one of the classroom servers, e.g.:

    % ssh netid@classrm02.lis.illinois.edu

  2. Change directory as follows:

    % cd /homei/users/netid/courseweb_html/

  3. Type in the following command:

    % cp -r constitution_valid constitution_css
  4. Open up a local copy of the constitution files in your text editor (e.g. Textwrangler).

Assignment

This small set of tasks will introduce you to the basics of using CSS. CSS is a way to add visual styling to an HTML page. So far, if you’ve been using HTML properly, your pages should look boring: black text on a white background, displayed top to bottom. As you continue with CSS, we’ll fix that.

The submission for this lab will be to email Ingbert both the links of the files you have changed, and a separate write-up in HTML about the assignment, so be sure to take notes as you complete the exercise.

  1. Create a simple CSS file

    There are three ways to connect CSS to your page. We’ll focus on the one of these approaches: keeping your CSS styles in a separate file and loading it from your HTML. Doing this respects the separation between the two, so you can keep pack structure in the HTML file and style in the CSS file.

    • Open a new text document.

    • Add the following text to your document:

      body {
font-family: Arial;
}
    • Save your file as style.css in the same folder as your HTML.

  2. Link to your new CSS file from your HTML document.

    • Open your constitution articles page in a text editor.

    • Add the following inside the <head>:

      <link rel="stylesheet" href="style.css" />

      This tells a browser that it should look for style information in a file called style.css when it loads your document.

    Try loading your document in a browser. What happened?

    You should see the font change. If not, check the steps again.

  3. What did I do?

    Let’s go back to the style.css file and figure out what happened. This is what we had pasted in: 

    body {
font-family: Arial;
}

    What you see is a selector and declarations for that selector.

    The selector specifies what should be styled. Here it says "body": this means that everything within the <body> tag will be affected.

    Declarations are listed in curly braces after the selector, each ending with a semi-colon. Here we have only one declaration (i.e. "font-family:Arial").

  4. Playing with Selectors.

    You’ll learn more about selectors in later weeks. Here are three types of selections:

    A tag selector styles an entire HTML tag, such as <body>. When you only have the tag name as the selector (e.g. "p", "section", "h1", etc.), your browser will think it’s a tag.

    • e.g. body

    A class selector lets you style all HTML tags that have a class. For a class selector, use a period at the start, as in .classname.

    • e.g. If you have a paragraph that looks like this: <p class="important">....</p>, you can select it with .important

    An id selector lets you style an HTML element with a given id. For an id selector, use a # at the start of the selector, as in #idname.

    • e.g. #preamble
    • Try to change the "body" selector in your style.css to "h2".

    What happened?

    • Change your selector again, to "section"

    Now what happened?

  5. Adding another declaration

    Try adding another declaration for styling the body.

    • Add "font-size: 2em;" to your body tag, within the curly braces and on a new line.

    Try refreshing the HTML document. Did your font size become larger?

    Troubleshooting: Did you remember the semi-colon? Is the new declaration within the curly braces after "body"?

  6. Understanding Declarations

    A declaration has two parts: a property and a value, separated by a semi-colon. In our previous examples, we saw the following:

    property value
    font-family Arial
    font-size 2em

  7. Playing with values.

    Each possible property has a number of possibilities for values. A good reference to see what you can do to each property is the Mozilla Developer Network (MDN).

  8. Adding more selectors.

    To style more parts of the page, just add new lines with the same pattern as before: 

    selector {
    property:value;
    property:value;
}

    • Add styling to your header by making it centered:

      header {
    text-align: center;
}

  9. Cascading selectors

    What if you style a tag, then style one of its children? This is where we get the C in CSS: it cascades!

    • Add a rule for the "h3" selector for a new font of your choice, but not Arial. Use font-family. Note that the name of the font is sometimes case-sensitive.
    • Refresh your document.

    How did it change? If you have <h3> elements within your <section> elements, you've set the font on that heading twice now: notice that it is using the font that you just put in.

    As your browser reads the rules in your CSS, it applies them in order (i.e. from the top down), and more specific selectors take priority. In our case, <h3> is deeper in the DOM tree than <section> (i.e. more specific), so the computer uses that.

  10. Some fun new properties.

    There are many properties to try. Mozilla Developer Network has a good reference on many of them:

    https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

    • Add the following declarations (with new properties) to your stylesheet, to whatever selectors that you like:

          color: green;
    background: whitesmoke;
    padding: 20px;
    border-radius: 20px;
    width: 400px;
    margin: 20px;
    • What do each of them do? can you try changing the colors, or the sizes?

    Remember, this can make your page look very beautiful or very ugly; don’t go overboard!

Submission

Write up your experience in a separate HTML file. Be sure to address the questions or exercises in each of the numbered parts of the assignment above. Add some basic CSS to style the HTML of this write-up. Be sure to validate both the HTML & CSS and put appropriate validation links in the footers of each file:

To submit this assignment, send me a URL of each file you changed, and to the write-up.

Grading Criteria

Out of 25 points total.

  • For completing each section of the above assignment, including the write-up: 2 points each (20 points total)

  • Valid HTML with validator link in the footer of each page: 2 points

  • Valid CSS with validator link in the footer of each page: 2 points

  • Good organization & writing of write-up: 1 point