Skip to content

4.8 CSS

Jump to bottom Edit New page
juyaolongpaul edited this page Apr 16, 2018 · 2 revisions

In 4.4 base.html, we did not look at the code between <head> and <body> since it defines a series of CSS configurations:

<head>
        <title>Blog Project</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        {# MEDIUM STYLE EDITOR#}
        <script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">


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

        {# Fonts#}
        <link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One" rel="stylesheet">

        <!-- all these CSS files gives you a RANGE of classes which you can call to decorate any HTML style to make into the style you want -->

As we can see, it refers to a few CSS files to turn the web pages into a style which the developer like. One could also specify the style within each web page, but it is much less flexible and versatile, duplicating a lot of style codes. CSS is called Cascading Style Sheets, which defines the style of the web page in a single .css file, which you can link to the web page (.html) to apply the style, like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

Of course, you can define and write you own .css file to display the style and font you like. The complete syntax is explained here. But in this example, we use a pre-defined CSS file that is found online, which is powered by a framework called Bootstrap, one of the most popular HTML and CSS frameworks for developing beautiful websites. With Bootstrap, you can access, use and access pre-defined CSS files easily, providing stylish design and useful functionalities for your website. Please follow the tutorial to understand Bootstrap, and hopefully, when you finish learning, you will understand the meaning of the code above in base.html and why it shows the style we see on the blog website.

Add a custom footer
Add a custom sidebar
Clone this wiki locally