The main.css File¶

Why?¶

Just our HTML on its own wouldn't provide for a very pleasant experience when viewing our cat images. That's where the CSS file comes into place - it allows us to format the page to be something useful.

Solution¶

Our CSS is very simple and just makes the rows and columns "functionality" work.

I never wrote it, as the comment at the top states:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* Copy/pasted from: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp */

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }

  /* Create four equal columns that sits next to each other */
  .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }

  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }

  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }

I don't know modern CSS very well, so I've adopted work from other people to keep this book moving along. You're welcome to

Committing the Code¶

1. Set your working directory to the application/httpcats repository
2. Create the static/css directory by using mkdir: mkdir static/css
3. Move into the static/css directory: cd static/css
4. Save the file as main.css and use git add main.css to add it to the Git staging area
5. Use git commit -am 'making our HTML beautiful' to commit the file to our repository
6. Push the code to GitLab.com: git push