Skip to content

step 2: css basics

Jump to bottom Edit New page
Khurram Virani edited this page Oct 14, 2015 · 5 revisions

Migrated

This has been migrated into Compass.

objectives

  • explain lib css files from step/1
  • learn CSS basics
    • selectors
    • properties
    • cascade order
  • apply basics to augment lib.css with own stylesheet (app.css)

tutorial

understanding the lib <link>s

Remember those three <link> tags we added at the end of the last step?

<head>
  <link rel="stylesheet" href="../../public/stylesheets/normalize.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,700italic,700,300">
  <link rel="stylesheet" href="../../public/stylesheets/lib.css">
  <title>Finstagram</title>
</head>

Yeah, these! These are CSS stylesheets that are a little shortcut for us as we build Finstagram.

The href attribute you see is analogous to the href you remember from <a> tags. The value points to the location of your stylesheet. Let's prove it.

In Sublime, open up public/stylesheets/normalize.css. Yep, something there! We can't dive too deep here, but you can read about how this file makes our lives easier here.

Next is a Google Fonts file. It's an external stylesheet you can see by visiting the href value (http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,700italic,700,300). Without using a webfont like this, your CSS choices are pretty limited.

The third <link> points to another local file we've set up specifically for this application. Check it out at public/stylesheets/lib.css. Feel free to use for reference.

adding more content

Let's add a few more posts to see how our application will actually look when it's in use. Our main section should look like this:

<main role="main">
  <article class="post">
    <div class="user-info">
      <img src="http://naserca.com/images/sharky_j.jpg" alt="sharky_j">
      <h2>sharky_j</h2>
      <h3>15 minutes ago</h3>
    </div>
    <a class="photo" href="#">
      <img src="http://naserca.com/images/shark.png" alt="post from sharky_j">
    </a>
    <div class="actions">
      0 likes
      <span class="comment-count">0 comments</span>
    </div>
    <ul class="comments">
      <li>
        <p>
          sharky_j: Out for the long weekend... too embarrassed to show y'all the beach bod!
        </p>
      </li>
    </ul>
  </article>
  <article class="post">
    <div class="user-info">
      <img src="http://naserca.com/images/kirk_whalum.jpg" alt="kirk_whalum">
      <h2>kirk_whalum</h2>
      <h3>1 hour ago</h3>
    </div>
    <a class="photo" href="#">
      <img src="http://naserca.com/images/whale.jpg" alt="post from kirk_whalum">
    </a>
    <div class="actions">
      0 likes
      <span class="comment-count">0 comments</span>
    </div>
    <ul class="comments">
      <li>
        <p>
          kirk_whalum: #weekendvibes
        </p>
      </li>
    </ul>
  </article>
  <article class="post">
    <div class="user-info">
      <img src="http://naserca.com/images/marlin_peppa.jpg" alt="marlin_peppa">
      <h2>marlin_peppa</h2>
      <h3>3 hours ago</h3>
    </div>
    <a class="photo" href="#">
      <img src="http://naserca.com/images/marlin.jpg" alt="post from marlin_peppa">
    </a>
    <div class="actions">
      0 likes
      <span class="comment-count">0 comments</span>
    </div>
    <ul class="comments">
      <li>
        <p>
          marlin_peppa: lunchtime! ;)
        </p>
      </li>
    </ul>
  </article>
</main>

Refresh the page and check it out. Pretty slick. But I think we could improve a few things...

adding a stylesheet

It's looking pretty good, but let's make things a bit... gooder. To start, we're going to add a new file: public/stylesheets/app.css. This is the only CSS file you'll be editing.

First, let's add a background-color to our <header>. Here are two easy steps to adding style:

  1. target the element(s) you need

     header {}

  2. add your styles

     header {
   background-color: #244751;
 }

Make sure you don't forget:

  • opening and closing {}
  • semicolon at the end of every line

Notice we didn't need a special class on the <header> because there's only one. We can target the element with the name of the tag itself. No problem.

Refresh your page to check things out. Uh oh. We can't see the text in the header. Let's check why. Open up the Developer Tools in Chrome. Your screen should look something like this. Click on your <header> tag in the source HTML and notice there are two main style declarations: one from lib.css (we set that up for you) and one from app.css (you just did this!).

Notice the dev tools also show you exactly what line your styles are coming from. When something unexpected happens with your front-end code, head to the dev tools. The browser doesn't lie!

Anyway, if you scroll down a bit further, you'll see the cause of the mysterious, invisible header text: body! Our preloaded css makes the body text dark blue by default.

Let's change it! From within our header declaration, let's add a color property:

header {
  background-color: #244751;
  color: #E8FDFF;
}

Much nicer!

But wait: if we already had a color that was being applied to our header, how does the browser decide which one to use? The cascade, of course!

There are a bunch of kind-of-confusing rules about which rules take precedence over others, but know a couple general concepts:

  • the more specific a rule, the more likely it is to have precedence
  • rules declared after other rules (all else equal) will take precedence

In our header color example, we're declaring our rule both more specifically (header is more specific than body) and after the other rule. Tada.

To add a little depth to our site, let's add a background-color property to the body:

body {
  background-color: whitesmoke;
}

Whoa! CSS can handle a ton of English color names like this.

To add some contrast, let's add a background-color to the <main role="main">:

main {
  background-color: white;
}

And to refine it a bit, let's add some padding inside main:

main {
  background-color: white;
  padding: 16px;
}

Looking great!

px should look familiar to you. We're simply measuring in pixels. There are other, advanced ways to measure as you style. But px is a good starting point.

If you want a bit more or less padding on main, try experimenting with the dev tools.

A quick shortcut to inspecting a specific element is to actually... ahem... Inspect Element. If you right-click directly on an element, the dev tools will open, highlighting that element.

Now that we're highlighting main, try clicking directly on the padding rule and changing it right in the browser. [brain melts]

You can (and should!) do this as often as possible as you're styling. Switching back and forth between your external stylesheet and browser is tedious and offers more chances for mishaps. Get it how you want in the browser; then just copy it over.

Let's space out our posts a little bit. To target elements of a certain class, we use this pattern:

.<class> { }

To target an element of a certain id, we use:

#<class> { }

. == class. # == id. Unmelt your brain and burn this into it.

But our posts have a helpful class attribute "post", so let's add some css to space them out using our dot syntax:

.post {
  margin-bottom: 48px;
}

This will target any and all elements with class="post" and apply a margin-bottom. Roomy!

We can even target inside other targets. (Super topical reference ahead) Targetception:

.post .user-info img {
  border-radius: 50%;
}

Yep, this means we're targeting all img elements inside elements with class="user-info" which are also inside elements with class="post". And we're applying this border-radius property. What do you think it does?

Ah yes, the classic Instag— er... Finstagram look. Experiment around with the border-radius property in dev tools. (You can use px units too.)

We'll continue to work with css and styling as we build out Finstagram, but for now take a deep breath and enjoy having a nice lookin' website!

Add a custom footer
Add a custom sidebar
Clone this wiki locally