Style with CSS

CSS is a language for giving color and shape to your website. As you've seen in the HTML lesson, we have already included Picnic CSS as a solid foundation to build the rest of the style. There are many libraries like this, including the famous but complex Bootstrap.

The CSS always modifies HTML elements. 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.

Selectors and properties

To know which HTML element we are modifying, we'll use what is called a selector. Every one of the style definition that we make on this selector is called a property. For example, to give some margin to all of the paragraphs of a website:

p {
  margin: 5px;
}

The selector is the "p" that we find in the first line. What it does is selecting all the paragraph elements from the HTML.

After the selector we will always find braces "{}" that surround all the properties that we want to define for the elements selected.

Finally, the properties are pairs of name: value;. In this example we only have the margin as a name and 5px as a value. So we are saying that al of the paragraphs in the site have a margin of 5px.

We can add several properties to a single selector, for instance to add margin AND to change the background of all the paragraphs:

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

Classes

There are several kind of selectors. As you might remember from the previous lesson, classes have a special meaning. For instance, 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 (Cascade 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 websites can and probably should be designed from the general items to the specific. First we design the layout of the website we want to build:

When we want to make it in HTML+CSS, we first need to take into account the elements from the outside, which also makes it much easier:

Now let's program it. Since it's really generic, we will be using <div> and classes for layout elements. First, the line that surrounds them all:

<div class="gallery">

  <!-- Everything else goes here -->

</div>

As we see, we assign the class gallery for the container. We will need to remember this class for giving it style later on. Then, each of the components will have the class element:

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

Right now our elements don't have any style or content. Let's give it to them. While we could do it with CSS, we'll be using Picnic CSS to make it easier. For this, we will need a class called flex on our gallery and some wrapping div elements:

<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 letters spaced horizontally. However we cannot see it clearly. Let's give some basic style to the elements to see them better:

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

You can see how it looks in this jsfiddle. It looks a lot more like our general 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?

Selec­tors and pro­pert­ies

Clas­ses

Layouts

Box Model

Sizing things

Selectors and properties

Classes