CSS

Reference for presentations, exercises and handouts.

Lesson 1: Basic CSS

Using the Element Selector

Setup the files

  1. Create a folder called OnionStyle.
  2. Create a index.html file in that folder and copy the html in the example into it.
  3. In that folder, create a css folder and a styles.css file inside of it. Copy the CSS from the css tab in the example into it.
  4. Lastly, link that CSS file from the HTML file: <link rel="stylesheet" href="css/styles.css" />

You should end up with the following structure

  • OnionStyle
    • index.html
    • css
      • styles.css

Style the article

  • Make the main headline dark green.
  • Use the font family "Georgia" for the main headline and the subheadline.
  • Center the text of the main headline and the subheadline.
  • Make the paragraphs have a font-size of 16 pixels and a line height of 26 pixels.
  • Remove the underline from the links.
  • Make the "You might also like" label all uppercase.
  • Bonus: Make an underline appear only when you hover over a link.

Lesson 2: Styling with Classes

Style it like Twitter using the element selector, and classes

Setup the files

  1. Create a folder called TweetStyle.
  2. Create a index.html file in that folder and copy the html in the example into it.
  3. In that folder, create a css folder and a styles.css file inside of it. Copy the CSS from the css tab in the example into it.
  4. Lastly, link that CSS file from the HTML file: <link rel="stylesheet" href="css/styles.css" />

You should end up with the following structure

  • TweetStyle
    • index.html
    • css
      • styles.css

Style It

Make it look like the image to the left by creating class definitions in your css file.

Here are some of the CSS rules you'll need to write:

  • Write a CSS rule for the "fullname" class that makes the color "#333333" and a font-size of 18px.
  • Make the "username" class gray and not bold
  • Make the "tweet-text" class a font size of 18 pixels
  • Make all the links have the color "#008AB9"
  • Make all of the text Arial or another sans-serif font
  • Make the "tweet-text" text a serif font.

Lesson 3: Working with the Box and Floats

Style it like Twitter using the element selector, and classes

Setup the files

  1. Create a folder called TweetStyleFloat.
  2. Create a index.html file in that folder and copy the html in the example into it.
  3. In that folder, create a css folder and a styles.css file inside of it. Copy the CSS from the css tab in the example into it.
  4. Lastly, link that CSS file from the HTML file: <link rel="stylesheet" href="css/styles.css" />

You should end up with the following structure

  • TweetStyleFloat
    • index.html
    • css
      • styles.css

Style It

Make it look like the image to the left by creating and modifying class definitions in your css file.

Here are some of the things you'll need to do:

  • Make the page background light gray(#CCCCCC)
  • Make the tweet background white (#FFFFFF)
  • Add a 5px border radius to each tweet.
  • Add 20 pixels of padding around each tweet
  • Add a rule that makes an underline appear when you mouseover links
  • Make each tweet 400 pixels wide
  • Float the tweets so that you have two tweets in each row
  • Make each tweet have 20 pixels of space between each one.