icon for lab

CT310

Recitation 4 - Styling(CSS)

In this recitation, we will:

From lecture, we learned Cascading Style Sheets (CSS) are used to define the way a browser will display a webpage.

A wonderful resource to look at is w3schools.com because they lay out for you the different pieces that make up CSS.

If you can't remember the name of a specific attribute or what options there are for one, look it up! We don't expect you to memorize every single one, but commonly used ones are good to know.

Remember, you can also look at website's CSS if you're ever curious what they did for cool elements. Be warned, some of these files aren't organized well.

Having a separate file for CSS helps the organization of your code and reduces redundancy for your webpages. Let's add some CSS to our recipe page.

  1. Create a file called "recipe.css"

    2. All of your CSS code will go in here. However, it will need to be linked to your HTML file.

  2. Open "recipe.html"

    3. Typically, CSS references are within a "head" tag. Within "head", add a "link" tag and insert the following into your

    • <link rel="stylesheet" type="text/css" href="recipe.css">

  3. Font Change

    4. Let's change the font style of our recipe. In your new CSS file, add the following:

    • body {
    • font-family: Arial, Helvetica, serif;
    • }

    This will tell the browser that the preferred font is Arial Serif. If it's not available, it will display using Helvetica Serif.

  4. Background

    5. Now, let's change the background color.

    • body {
    • font-family: Arial, Helvetica,-sans-serif;
    • background-color: [color];
    • }

    Change the color into anything you want. (CSS color picker)

  5. Heading Style

    6. Headings are great on their own, but adding a bit of CSS can make them pop out!

    • header h1 {
    • font-family: Arial, Helvetica, sans-serif;
    • text-shadow: 0.5px, 1.5px, 2px [color];
    • }

    If your "h1" instance is not in your "header" tag, replace "header" in the above code with the correct element tag.

  6. ID's and Classes

    7. Define similar elements with the "class" attribute. Anything in the same class with be formatted and display with the same style. "id" is used to define an element with a unique style. Both id and class can also be used for similar and unqie actions, respectively, with JavaScript.

    If you wanted to specify the ingredients list of your recipe differently than the instructions you need to specify the id/class in the CSS file:

    For class:
    • .ingredients {
    • font-family: Times New Roman, Times, serif;
    • font-style: oblique;
    • color: darkblue;
    • }
    For id:
    • #ingredients {
    • font-family: Arial, Helvetica, serif;
    • font-style: oblique;
    • color: darkblue;
    • }

  7. Example

    8. Here is an example styled recipe page: example