CSS – make it pretty!

Part of this chapter is based on tutorials by Django Girls Tutorial : https://tutorial.djangogirls.org

Our site still looks pretty ugly, right? Time to make it nice! We will use CSS for that.

What is CSS?

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a website written in a markup language (like HTML). Treat it as make-up for our web page. ;)

But we don't want to start from scratch again, right? Once more, we'll use something that programmers released on the Internet for free. Reinventing the wheel is no fun, you know.

Let's use Bootstrap!

Bootstrap is one of the most popular HTML and CSS frameworks for developing beautiful websites:https://getbootstrap.com/

It was written by programmers who worked for Twitter. Now it's developed by volunteers from all over the world!

Install Bootstrap

To install Bootstrap, you need to add this to your<head>in myfirstgame/templates/myfirstgame/index.html:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

This doesn't add any files to your project. It just points to files that exist on the Internet. Just go ahead, open your website and refresh the page. Here it is!

Looking nicer already!

Static files in Django

Finally we will take a closer look at these things we've been calling static files. Static files are all your CSS and images. Their content doesn't depend on the request context and will be the same for every user.

Where to put static files for Django

Django already knows where to find the static files for the built-in "admin" app. Now we just need to add some static files for our own app, myfirstgame.

We do that by creating a folder calledstaticinside the myfirstgame app:

textbasegame
├── myfirstgame
│   ├── migrations
│   ├── static
│   └── templates
└── tbgsite

Django will automatically find any folders called "static" inside any of your apps' folders. Then it will be able to use their contents as static files.

Your first CSS file!

Let's create a CSS file now, to add your own style to your web page.

Create a new directory calledcssinside yourstaticdirectory.
Then create a new file called myfirstgame.css inside thiscssdirectory. Ready?

textbasedgame
└─── myfirstgame
     └─── static
          └─── css
               └─── myfirstgame.css

Time to write some CSS! Open up the myfirstgame/static/css/myfirstgame.css file in your code editor.

We won't be going too deep into customizing and learning about CSS here. There is a recommendation for a free CSS course at the end of this page if you would like to learn more.

But let's do at least a little. Maybe we could change the color of our header?

To understand colours, computers use special codes. These codes start with#followed by 6 letters (A–F) and numbers (0–9). For example, the code for blue is#0000FF. You can find the colour codes for many colours here:http://www.colorpicker.com/. You may also use predefined colors, such asredandgreen.

In yourmyfirstgame/static/css/myfirstgame.cssfile you should add the following code:

h1 {
    color: #FCA205;
}

Save the file.

h1is a CSS Selector. This means we're applying our styles to anyh1element. So when we have something like<h1>This is some text</h1>, theh1style will apply. In this case, we're telling it to change its colour to#FCA205, which is orange. Of course, you can put your own colour here!

In a CSS file we determine styles for elements in the HTML file. The first way we identify elements is with the element name. You might remember these as tags from the HTML section. Things likea,h1, andbodyare all examples of element names.

We also identify elements by the attributeclassor the attributeid.

Class and id are names you give the element by yourself. Classes define groups of elements, and ids point to specific elements. For example, you could identify the following tag by using the tag namea, the classexternal_link, or the idlink_to_wiki_page:

<a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">

You can read more about CSS Selectors at w3schools.

We also need to tell our HTML template that we added some CSS. Open the myfirstgame/templates/myfirstgame/index.html file and add this line at the very beginning of it:

{% load staticfiles %}

We're just loading static files here. :) Between the <head> and </head> tags, after the links to the Bootstrap CSS files, add this line:

<link rel="stylesheet" href="{% static 'css/myfirstgame.css' %}">

The browser reads the files in the order they're given, so we need to make sure this is in the right place. Otherwise the code in our file may be overriden by code in Bootstrap files. We just told our template where our CSS file is located.

Your file should now look like this:

{% load staticfiles %}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="{% static 'css/myfirstgame.css' %}">
    <title>Welcome to Text-Based Adventure Game in Django</title>
  </head>
  <body>
    <h1>Welcome to Text-Based Adventure Game in Django</h1>
    <h2>Come back soon when we add more functionality</h2>
    <p>This is a <em>choose your own adventure game</em>.</p>
    <div>
        <h3>List of players in order of latest who played</h3>
        <ul>
        {% for player in players %}
            <li>Name: {{ player.name }} - Game Over on <em>{{ player.game_end }}</em></li>
        {% endfor %}
        </ul>
    </div>
  </body>
</html>

Save the file and go to http://127.0.0.1:8000/ to see the results. It should be like the following:

Nice work! Maybe we would also like to give our website a little air and increase the margin on the left side?

Let's edit myfirstgame/static/css/myfirstgame.css

body {
    padding-left: 15px;
}

Save the file and go to http://127.0.0.1:8000/ to see the results. It should be like the following:Maybe we can customize the font in our header? Paste this into your <head> in myfirstgame/templates/myfirstgame/index.html file:

<link href="//fonts.googleapis.com/css?family=Aladin&subset=latin,latin-ext" rel="stylesheet" type="text/css">

As before, check the order and place before the link toblog/static/css/blog.css. This line will import a font called_Lobster_from Google Fonts (https://www.google.com/fonts).

Find theh1declaration block (the code between braces{and}) in the CSS file myfirstgame/static/css/myfirstgame.css. Now add the linefont-family: 'Lobster';between the braces.

h1 {
    color: #FCA205;
    font-family: 'Aladin';
}

Save the file and go to http://127.0.0.1:8000/ to see the results. It should be like the following:

Great!

As mentioned above, CSS has a concept of classes. These allow you to name a part of the HTML code and apply styles only to this part, without affecting other parts. This can be super helpful! Maybe you have two divs that are doing something different (like your header and your post). A class can help you make them look different.

Go ahead and name some parts of the HTML code in myfirstgame/templates/myfirstgame/index.html. Add a class called page-header to your div that contains your header, like this:

<div class="page-header">
    <h1>Welcome to Text-Based Adventure Game in Django</h1>
</div>

Now add a class called player-list to the ul element

<ul class="player-list">
{% for player in players %}
    <li><span class="player">{{ player.name }}</span> - Game Over on <em>{{ player.game_end }}</em></li>
{% endfor %}
</ul>

Save the file.

We will now add declaration blocks to different selectors. Selectors starting with . relate to classes. There are many great tutorials and explanations about CSS on the Web that can help you understand the following code. For now, just copy and paste it into your myfirstgame/static/css/myfirstgame.css file:

h1, h2, h3, h4 {
    font-family: 'Aladin', cursive;
}

h1 {
    color: #FFF;
    font-family: 'Aladin';
    font-size: 36pt;
}

.player-list {
    font-family: 'Aladin', cursive;
}

.player {
    color: #FC055F;    
}


#player-listings {
    color: #A205FC;
}

.page-header {
    background-color: #ff9400;
    margin-top: 0;
    margin-bottom: 20px;
    padding: 20px 20px 20px 40px;
}

Save the file and go to http://127.0.0.1:8000/ to see the results. It should be like the following:

We are going to modify code in myfirstgame/templates/myfirstgame/index.html and use Bootstrap grid layout.

Find the following section of code:

<h2>Come back soon when we add more functionality</h2>
<p>This is a <em>choose your own adventure game</em>.</p>
<div>
    <h3>List of players in order of latest who played</h3>
    <ul>
    {% for player in players %}
        <li>Name: {{ player.name }} - Game Over on <em>{{ player.game_end }}</em></li>
    {% endfor %}
    </ul>
</div>

And replace with:

<div class="content container">
    <div class="row">
        <div class="col-md-12">
            <h2>Come back soon when we add more functionality</h2>
            <p>This is a <em>choose your own adventure game</em>.</p>
        </div>
    </div>
    <div class="row">
         <div class="col-md-12">
            <h3 id="player-listings">List of players in order of latest who played</h3>
            <ul class="player-list">
            {% for player in players %}
                <li><span class="player">{{ player.name }}</span> - Game Over on <em>{{ player.game_end }}</em></li>
            {% endfor %}
            </ul>
        </div>
    </div>
</div>

Save the file and go to http://127.0.0.1:8000/ to see the results. It should be like the following:Woohoo! Looks awesome, right? Look at the code we just pasted to find the places where we added classes in the HTML and used them in the CSS. Where would you make the change if you wanted the date to be turquoise?

Don't be afraid to tinker with this CSS a little bit and try to change some things. Playing with the CSS can help you understand what the different things are doing. If you break something, don't worry – you can always undo it!

We really recommend taking this free online Codeacademy HTML & CSS course. It can help you learn all about making your websites prettier with CSS.

Ready for the next chapter?! :)

CSS - make it pretty

CSS – make it pretty!

What is CSS?

Let's use Bootstrap!

Install Bootstrap

Static files in Django

Where to put static files for Django

Your first CSS file!

results matching ""

No results matching ""