Web Design 35S‎ > ‎CSS‎ > ‎

Using CSS

(You don't need a sketch for this assignment.)

Today we're going to start playing with style sheets. Style sheets are a very powerful tool if used properly. They allow you to change your style in one place

Follow the directions below to create each of the paragraphs shown. This will (hopefully) give you a clearer idea how to use CSS style sheets.

    Coloring your text

  1. Create a folder. Call it something like Using CSS.
  2. Open Notepad.
    1. Save your Notepad file as stylesheet.css. Save it in the folder you created.
  3. Open Notepad again.
    1. In your folder save your file as index.html.
    2. At the top of your file type <html>
    3. Then hit enter and type <head>
    4. Next hit enter and on that line type <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    5. Then hit enter and type </head>
    6. Save your file.
  4. You have created two different files; one is called index.html. One is called stylesheet.css/
  5. Now go back to your file called stylesheet.css.
    1. Type in p{color:red;}
    2. Save your file.
  6. Now go back to your file called index.html
    1. Start a new paragraph like this one. <p> I am so very, very cool.</p>
    2. Save your file.
  7. Find your file in your part on the server.
    1. Double click on it.
    2. It should open up in your browser and you should have a paragraph like the one below. The text should be red and the background color should not change.

    I am so very, very cool.

    Coloring your background

  8. Go back to your stylesheet.css file and change the information about your paragraph.
    1. Add one line like this: p{color:red; background-color:blue}
    2. Save your index.html file.
    3. Reload your browser.
    4. Your paragraph should look like the one below.

    I am so very, very cool.

    Aligning the text

  9. Now make another change to your paragraph information in your stylesheet.css file.
    1. Your new like should read: p{color:red; background-color:blue; text-align:right}
    2. Save your stylesheet.css file.
    3. In your browser reload your file.
    4. Once more your paragraph should change and your text should jump to the right.
    5. Pretty, isn't it?

    I am so very, very cool.

    Decorating the text

  10. Go back to your stylesheet.css and add another change to your paragraph information.
    1. Let's move that back where it belongs. Take out the "text-align:right" command like so: p{color:red; background-color:blue;}
    2. Your new like should read: p{color:red; background-color:blue; text-decoration:line-through;}
    3. Save your file and reload in your browswer.
    4. Admire your nice new effect.

    I am so very, very cool.

  11. Okay, now that crossing out thing doesn't look so good, does it? Take that part out of your paragraph instructions.
    1. Now your information looks like this: p{color:red; background-color:blue;}
    2. Let's make everything capitalized. Add one new command like this: p{color:red; background-color:blue; text-transform:uppercase;}

    Controlling the letters in a text

    I am so very, very cool.

    Changing the font

  12. That was fun, wasn't it? Now change the font like this:
    1. p{color:red; background-color:blue; text-transform:uppercase; font-family:"Georgia";}

    I am so very, very cool.

    Borders

  13. Now let's set a very simple border for your paragraph like this.
    1. p{color:red; background-color:blue; text-transform:uppercase; font-family:Georgia; border-style:dotted}
    2. This should give you a red dotted line around your paragraph.

    I am so very, very cool.

    Your assignment

  14. Now create a webpage with a style sheet. All of the following items should be done using a style sheet. You should have:
    1. Green text
    2. A blue background for the text
    3. A Verdana font
    4. A dashed border
    5. Underlined text (using the style sheet)
    6. Text that's right justified.
ĉ
Using CSS marking guide.docx
(15k)
James Dykstra,
Dec 11, 2012, 8:11 AM
v.1
Comments