Style with CSS

CSS is a lan­guage for giv­ing color and shape to your web­site. As you've seen in the HTML les­son, we have al­ready in­cluded Pic­nic CSS as a solid foun­da­tion to build the rest of the style. There are many li­bra­ries like this, in­clud­ing the fam­ous but com­plex Bootstrap.

The CSS al­ways modif­ies HTML ele­ments. Let's see how the HTML and CSS work together. First create a file called "style.css", where we will include all the css examples explained here.

Selec­tors and pro­pert­ies

To know which HTML ele­ment we are modify­ing, we'll use what is cal­led a selec­tor. Every one of the style de­fini­tion that we make on this selec­tor is cal­led a pro­per­ty. For ex­am­ple, to give some mar­gin to all of the para­graphs of a web­site:

p {
  margin: 5px;
}

The selec­tor is the "p" that we find in the first line. What it does is select­ing all the para­graph ele­ments from the HTML.

After the selec­tor we will al­ways find braces "{}" that sur­round all the pro­pert­ies that we want to de­fine for the ele­ments selec­ted.

Fin­al­ly, the pro­pert­ies are pairs of name: value;. In this ex­am­ple we only have the mar­gin as a name and 5px as a value. So we are say­ing that al of the para­graphs in the site have a mar­gin of 5px.

We can add sever­al pro­pert­ies to a single selec­tor, for in­stan­ce to add mar­gin AND to chan­ge the background of all the para­graphs:

p {
  margin: 5px;
  background: rgb(200, 100, 100);
}

Clas­ses

There are sever­al kind of selec­tors. As you might re­memb­er from the pre­vi­ous les­son, clas­ses have a speci­al mean­ing. For in­stan­ce, for this HTML:

<section class="flex three">
  <div class="hello">Hello</div>
  <div class="hello world">Hello world</div>
  <div class="bye">Bye</div>
</section>

We can style it with CSS (Cas­cade Style Sheet):

/* Style for all of the <div> */
div {
  background: red;
}

/* Style for all elements with the class "hello" */
.hello {
  background: green;
}

/* Style for all elements with the classes "hello" AND "world" */
.hello.world {
  background: blue;
}

Quick recap: we can select an element such as <p> ... </p> with the selector p, however to select an element with a class such as <a class="important"> ... </a>  you will have to use the class name preceded by a dot such as .important.

Exercise: for the following HTML block, make that all of the links <a> ... </a> look like a button. Tip: use Google to search CSS Button:

<p>Should you <a href="#clickme">click it</a>? asked Alice, incredulous.</p>
<p>At least push the <a href="#redbutton">red button</a>! Se demanded.</p>

Exercise: for the following HTML block, give the style you want only to the paragraphs with the class "quote":

<p>This is a plain paragraph</p>
<p class="quote">This is a styled quote</p>
<a class="quote">this should have no style (;</a>
<div>Good luck!</div>

Layouts

Most web­sites can and probably should be de­sig­ned from the gener­al items to the specific. First we design the layout of the web­site we want to build:

When we want to make it in HTML+CSS, we first need to take into ac­count the ele­ments from the outside, which also makes it much easier:

Now let's pro­gram it. Since it's rea­l­ly generic, we will be using <div> and clas­ses for layout ele­ments. First, the line that sur­rounds them all:

<div class="gallery">

  <!-- Everything else goes here -->

</div>

As we see, we as­sign the class gal­le­ry for the con­tain­er. We will need to re­memb­er this class for giv­ing it style later on. Then, each of the com­ponents will have the class ele­ment:

<div class="gallery">
  <div class="element">A</div>
  <div class="element">B</div>
  <div class="element">C</div>
</div>

Right now our ele­ments don't have any style or con­tent. Let's give it to them. While we could do it with CSS, we'll be using Pic­nic CSS to make it eas­i­er. For this, we will need a class cal­led flex on our gal­le­ry and some wrapping div ele­ments:

<div class="gallery">
  <div class="flex three">
    <div>
      <div class="element">A</div>
    </div>
    <div>
      <div class="element">B</div>
    </div>
    <div>
      <div class="element">C</div>
    </div>
  </div>
</div>

Check it out in this jsfiddle. There we can see the three lett­ers spaced horizon­tal­ly. Howev­er we can­not see it clear­ly. Let's give some basic style to the ele­ments to see them bet­t­er:

.element {
  background: #eee;
  padding: 10px 15px;
  height: 120px;
}

You can see how it looks in this jsfiddle. It looks a lot more like our gener­al layout:

So now let's add some separation around the gallery. For this we will be using the properties margin on the element with the class .gallery:

.gallery {
  margin: 10px;
}

It looks like this:

You can see it in this jsfiddle.

Box Model

There are three different things that can go around your element and they change the size of it. Let's see their representation first:

The margin is the outer-most space, and it mainly spaces the distance from one element to the next one. For example, these buttons are separated with margins:

Then there is the border. This is a visual element that surrounds your element. For example, input boxes <input> use this normally and here you can see many:

Finally, the padding represents the space from the border to the content itself. If the background of the element is set, the padding will be filled with color but the margin will not. Example of different paddings:

Note that line-height also affects the height, that's why we see that even that no-padding seems to have a bit of vertical padding (but it's not padding).

Next, we will focus on building the elements. For this, we will also be using HTML, but we will focus on the first one and then we'll continue with to the rest.

So what is inside our element? It seems that we want one image and two buttons. So let's do it:

<div class="element">
  <img src="http://placekitten.com/320/240">
  <button>Like</button>
  <button>Dislike</button>
</div>

But we have a problem, now we have two buttons but no way of giving style to only one and not the other. To solve this, we will add different classes to them:

<div class="element">
  <img src="http://placekitten.com/320/240">
  <button class="like">Like</button>
  <button class="dislike">Dislike</button>
</div>

And here you go:

Oops. Not so quick. What is the matter? Well, there are two issues so far:

- The image loads with the original size of the image. We were even lucky because we chose one similar to the displaying size, but it could be thousands of pixels. So we will set the width of the image.

- The height of the .element is forced to 120px because of the property height: 120pxthat we specified before. Normally, in CSS we won't specify heights and we will allow for the elements to size themselves. So we just remove this property.

Sizing things

Setting the width of objects is not so easy. Many times you want it to be 100%, so that the objects like images adjust to the width of the container. In this way, if a screen is larger it will become larger, not leaving empty spaces.

However, some times we want the elements to size themselves such as the buttons or the heights of the objects, so we will not set them. Lastly, some times you want an object to be of an specified size in pixels. This is useful for things like icons.

When we set the width of an image to 100%, the height will be automatically set so that it keeps the proportions. After fixing both of the mistakes explained above, we have this CSS:

.gallery {
  margin: 10px;
}

.element {
  background: #eee;
  padding: 10px 15px;
}

img {
  width: 100%;
}

Which makes the HTML to look like this:

The last thing that we need is to make sure that the Dislike button is on the right. Probably we also want it to be red, so we will do so with CSS:

.dislike {
  float: right;
  background: red;
}

Then we copy/paste* our element in the three of them so we get the expected layout. We used a small sizing trick to keep the kitten images different:

*we will learn later on how to do this properly

Enjoy the cats. Here you have the full code:

<div class="gallery">
  <div class="flex three">

    <div>
      <div class="element">
        <img src="http://placekitten.com/320/240">
        <button class="like">Like</button>
        <button class="dislike">Dislike</button>
      </div>
    </div>

    <div>
      <div class="element">
        <img src="http://placekitten.com/320/240">
        <button class="like">Like</button>
        <button class="dislike">Dislike</button>
      </div>
    </div>

    <div>
      <div class="element">
        <img src="http://placekitten.com/320/240">
        <button class="like">Like</button>
        <button class="dislike">Dislike</button>
      </div>
    </div>

  </div>
</div>

The CSS:

.gallery {
  margin: 10px;
}

.element {
  background: #eee;
  padding: 10px 15px;
}

img {
  width: 100%;
}

.dislike {
  float: right;
  background: red;
}

Now that you know the basics about layouts with HTML and CSS, you can begin to create your own layouts.

Exercise: create this layout in HTML+CSS in a similar way to the cats layout. What HTML element should the "Image title" be? And the heart?