Great, we have progressed quite a bit.
We have a Python script that generates a
Flask app, and we have two functions.
And each of them maps to HTML pages to
two different URLs. And this is our website
with two webpages. In this
lecture, we will add some CSS styling to
this website, so that this looks just
like any other modern website, and it is
visually appealing, and it doesn't look
like in the 80s, all right.
[No audio]
To do that, we have to do basically two things. The
first thing is we need to create a CSS
file and write the CSS code inside it.
And the second thing is, once we are in
this CSS code, once we have the CSS
file, we need to link to it from our
layout.html file. CSS is as easy as
HTML. So if you don't know, I would
suggest you look at some tutorials.
And I'm sure you'll get used to CSS very
quickly. And I already have the CSS file
that will stylize my website.
[No audio]
I'll cut this, and put it in a folder, which I'll
call static. Inside here, I'll create
another folder and call it css, and
I'll paste the CSS file just inside here.
So let me close this. As you see the
folder I created, and the file has been
reflected in the tree view here inside
atom. So the idea is that Python looks
for static files in the static folder.
So here inside static folder, you can
put different files. For example, if you
want to add an image to your website,
you'd create a folder here called
images, and then put images in inside
the folder, then you can link those static
files from your layout.html page, or
from any other pages. Now, before
opening the css file, and going quickly
through it, I'll like to show you how you
can link to the css file. Now remember,
the visible parts of an HTML code goes
inside the body tags, while links, like
links to JavaScript files, or links to
css files go outside of it, and those
should be put inside head tags. So head here
[No audio]
and head there, and then we have the link tag.
[No audio]
And the rel there means the
relationship, so the relationship to the
file, we're linking to is the stylesheet. So
we're sort of declaring the type of the
file we are linking to. So it's a CSS
stylesheet. And then we have the
reference here, which will be equal to
the url_for function, which takes as
argument folder name, where the file is
located, and filename parameter, which
is equal to css/main.css. So what
we got here is, we declared the type of
the file link to and then we put the link of
the file, and these should be in quotes.
So all of this.
[No audio]
And I'd also like to add a title
[Author typing]
for the website, let's say Flask App.
[No audio]
That's it. I'll save this.
And I'll go and try out the website. Oh!
Can you see the difference? Yep. We have
the menu here, very nicely, about page, home
page, and we have the title, this here.
And then the content of the webpage
goes here. Now all these bars here, the
background color, the paddings. All of
these have been defined using css. So
let's go ahead and have a look at the
css code. Here it is. I believe this is
quite self explanatory. But anyway, what
we have is basically this is an HTML
element. So the body is here, and once
we write the HTML element in the css
script, we use curly brackets and then
inside of curly brackets, we define
these attributes. So the margin, the
padding, and the font-family for the text,
and the color of the text. If you want
to change this, let's say 999, save and
go to the webpage, reload, you'll see
that the text got some different color.
So this is quite grayed out.
[No audio]
So that means this attribute here is affecting
the body of the website. I'll put this back
to 444, then you have the header
element, which is responsible for this
header here, so at the top.
[No audio]
Then if you want to stylize a specific part of your
webpage, let's say only the logo,
[No audio]
which is this one here. You would have to refer to
the header first and then to the h1
element, and then you refer to the logo
class. So this is a class name, just here,
and so on and so forth. You can
look at this code at your own pace, I
believe. So the logic is the same. Great.
And now we are ready to deploy
this website online on the cloud.
[No audio]
So we'll do that in the next lectures.
See you there.