Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS chapter - added explanations about CSS and fixed some language mistakes #54

Merged
merged 4 commits into from
Jul 26, 2014
Merged

CSS chapter - added explanations about CSS and fixed some language mistakes #54

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
976e6f1
Update README.md
shmool Jul 26, 2014
c1865f4
Update README.md
shmool Jul 26, 2014
2d2adf8
Update README.md
shmool Jul 26, 2014
54f087b
Update README.md
shmool Jul 26, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 23 additions & 17 deletions css/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Our blog still looks pretty ugly, right? Time to make it nice! We will use CSS f

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

But we don't want to start from scratch again, right? We will, again, use something that has already been done by programmers and released in the Internet for free. You know, inventing a wheel once again is no fun.
But we don't want to start from scratch again, right? We will, again, use something that has already been done by programmers and released in the Internet for free. You know, reinventing the wheel is no fun.

## Let's use Bootstrap!

Expand All @@ -16,13 +16,14 @@ It was written by programmers who worked for Twitter and is now developed by vol

## Install Boostrap

To install Bootstrap, you need to add this to your `<head>` in you `.html` file (`mysite/blog/templates/blog/post_list.html`):
To install Bootstrap, you need to add this to your `<head>` in your `.html` file (`mysite/blog/templates/blog/post_list.html`):
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are changes in the master branch that are clashing with yours :)

change mysite/blog/templates to blog/templates


<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">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Then just go ahead, open your website and refresh page. Here it is!
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!

![Figure 14.1](images/bootstrap1.png)

Expand All @@ -41,19 +42,17 @@ First, we need to create a folder to store our static files in. Go ahead and cre
mysite
└───static

Now we need to tell Django how it can find it. Open up the `mysite/mysite/settings.py` file, scroll to the bottom of it and add the following lines:
Now we need to tell Django where it can find it. Open up the `mysite/mysite/settings.py` file, scroll to the bottom of it and add the following lines:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mysite/mysite/settings.py -> mysite/settings.py


STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)

This way Django will know where your static files are.

That's it! Time to see if it works :)

## Your first CSS file!

First things first: let's create a CSS file now. Create a new folder called `css` inside your `static` folder. Then create a new file called `blog.css` inside this `css` directory. Ready?
Let's create a CSS file now, to add your own style to your web-page. Create a new folder called `css` inside your `static` folder. Then create a new file called `blog.css` inside this `css` directory. Ready?

mysite
└───static
Expand All @@ -64,21 +63,27 @@ Time to write some CSS! Open up the `mysite/static/css/blog.css` file in your co

We won't be going too deep into customizing and learning about CSS here, because it's pretty easy and you can learn it on your own after this workshop. We really recommend doing this [Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web) to learn everything you need to know about making your websites more pretty with CSS.

But let's do at least a little. Maybe we could change the color of our header? To understand colors, computer use special codes. They start with `#` and are followed by 6 letters (A-F) and numbers (0-9). You can find color codes for example here: http://www.colorpicker.com/
But let's do at least a little. Maybe we could change the color of our header? To understand colors, computers use special codes. They start with `#` and are followed by 6 letters (A-F) and numbers (0-9). You can find color codes for example here: http://www.colorpicker.com/. You may also use [predefined colors](http://www.w3schools.com/cssref/css_colornames.asp), such as `red` and `green`.

In your `mysite/static/css/blog.css` file you should add following code:

h1 a {
color: #FCA205;
}

`a` inside of `h1` (i.e. when we have in code something like: `<h1><a href="">link</a></h1>`) is the tag we're applying our styles to, and we're telling it to change color to `#FCA205`. Of course, you can put your own color here!
`h1 a` is a CSS Selector. `a` element inside of `h1` element (i.e. when we have in code something like: `<h1><a href="">link</a></h1>`) is the tag we're applying our styles to, and we're telling it to change color to `#FCA205`, which is orange. Of course, you can put your own color here!

In a CSS file we determine styles for elements in the HTML file. The elements are identified by the element name (i.e. `a`, `h1`, `body`), the element class or the element id. Class and id are names you give the element by yourself. Classes define groups of elements, and ids point out to specific elements. For example, the following tag may be identified by CSS using the tag name `a`, the class `external_link`, or the id `link_to_wiki_page`:

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

Read about [CSS Selectors in w3schools](http://www.w3schools.com/cssref/css_selectors.asp).

Then, we need to also tell our HTML template that we added some CSS. Open the `mysite/blog/templates/blog/post_list.html` file and add this line at the very beginning of it:

{% load staticfiles %}

We're just loading static files here :). Then, between the `<head>` and `</head>` add this line:
We're just loading static files here :). Then, between the `<head>` and `</head>`, after the links to the Bootstrap CSS files (the browser reads the files in the order they're given, so code in our file may override code in Bootstrap files), add this line:

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

Expand All @@ -91,8 +96,8 @@ Your file should look like this at this point:
<head>
<title>Django Girls blog</title>
<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">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
Expand Down Expand Up @@ -128,7 +133,7 @@ Maybe we can customize the font in our header? Paste this into your `<head>` in

This line will import a font called *Lobster* from Google Fonts (https://www.google.com/fonts).

Now add this line in `mysite/static/css/blog.css` and refresh the page:
Now add the line `font-family: 'Lobster';` in the CSS file `mysite/static/css/blog.css` inside the `h1 a` declaration block (the code between the braces `{` and `}`) and refresh the page:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mysite/static/css -> static/css


h1 a {
color: #FCA205;
Expand All @@ -139,7 +144,8 @@ Now add this line in `mysite/static/css/blog.css` and refresh the page:

Great!

CSS has a concept of classes, which basically allows you to name a part of our HTML code and apply styles only to this part, not affecting others. It's super helpful if you have two divs, but they're doing something very different (like your header and your post), so you don't want them to look the same.

As mentioned above, CSS has a concept of classes, which basically allows you to name a part of the HTML code and apply styles only to this part, not affecting others. It's super helpful if you have two divs, but they're doing something very different (like your header and your post), so you don't want them to look the same.

Go ahead and name some parts of the HTML code. Add a class called `page-header` to your `div` that contains header, like this:

Expand All @@ -155,7 +161,7 @@ And now add a class `post` to your `div` containing blogposts.
<p>{{ post.text }}</p>
</div>

All right. We have only one day, so we need to speed things up a little! We can't explain you every little detail about CSS. For now just copy and paste following code into your `mysite/static/css/blog.css` 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 to help you understand the following code. For now, just copy and paste it into your `mysite/static/css/blog.css` file:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mysite/static -> static


.page-header {
background-color: #ff9400;
Expand Down Expand Up @@ -205,7 +211,7 @@ All right. We have only one day, so we need to speed things up a little! We can'
color: #000000;
}

Then also replace this:
Then surround the HTML code which desplayes the posts with declarations of classes. Replace this:

{% for post in posts %}
<div class="post">
Expand Down Expand Up @@ -239,7 +245,7 @@ Wohoo! Looks awesome, right? The code we just pasted is not really so hard to un

Don't be afraid to tinker with this CSS a little bit and try to change some things. If you break something, don't worry, you can always undo this!

Anyway, we really recommend taking this free online [Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web) as a post-workshop homework to learn everything you need to know about making your websites more pretty with CSS.
Anyway, we really recommend taking this free online [Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web) as a post-workshop homework to learn everything you need to know about making your websites prettier with CSS.

Ready for next chapter?! :)