Add css styling

garethcastillo_reading/bookshelf/static/style.css

+.unaligned_header {
+    color:rgb(0,70,254);
+    font-family: "Comic Sans", cursive;
+    font-size: 50px;
+}
+
+.aligned_left_header {
+    text-align: left;
+    color:rgb(0,70,254);
+    font-family: "Comic Sans", cursive;
+    font-size: 50px;
+}
+
+.unaligned_paragraph {
+    color:rgb(0,70,254);
+    font-family: "Bradley Hand", cursive;
+    font-size: 50px;
+}
+
+.aligned_left_paragraph_small {
+    text-align: left;
+    color:rgb(0,70,254);
+    font-family: "Bradley Hand", cursive;
+    font-size: 20px;
+}
+
+a {
+    color:rgb(0,70,254);
+    font-family: "Century Gothic", sans-serif;
+}
+
+li { 
+    text-align: left;
+    color:rgb(0,70,254);
+    font-family: "Bradley Hand", cursive;
+    font-size: 20px;
+}
+
+body {
+    text-align: center;
+    background-color: hotpink;
+}
\ No newline at end of file

garethcastillo_reading/bookshelf/templates/bookshelf/author_details.html

@@ -4,20 +4,22 @@
 {% block title %}{{author.first_name}} {{author.last_name}}{% endblock %}
 
 {% block content %}
-<h1>{{author.first_name}} {{author.last_name}}</h1>
-<p>
+<header class = "aligned_left_header">{{author.first_name}} {{author.last_name}}</header>
+<p class = "aligned_left_paragraph_small">
     {{author.age}} <br />
     {{author.nationality}} <br />
     {{author.bio}} <br />
 
     Books by {{author.first_name}} {{author.last_name}} I love:
-    <ol>
+    <ul>
         {% for object in books %}
             <li><a href = "../../../books/{{object.pk}}/details/">{{ object.title }}</a></li>
         {% empty %}
             <li>No books registered.</li>
         {% endfor %}
-    </ol>
+    </ul>
+</p>
+<p class = "unaligned_paragraph">
     <br />
     <br />
     <br />

garethcastillo_reading/bookshelf/templates/bookshelf/authors.html

@@ -4,18 +4,16 @@
 {% block title %}My Favorite Authors:{% endblock %}
 
 {% block content %}
-<h1>Gareth's Favorite Authors:</h1>
-<ol>
+<header class = "aligned_left_header">Gareth's Favorite Authors:</header>
+<ul>
     {% for object in object_list %}
         <li><a href = "{{ object.id }}/details/">{{ object.first_name }} {{ object.last_name }}</a></li>
     {% empty %}
         <li>No books registered.</li>
     {% endfor %}
-</ol>
+</ul>
 
-<p>
-    <br />
-    <br />
+<p class = "unaligned_paragraph">
     <br />
     <a href = "../home/">Home</a>
     <a href = "../books/">Books</a>

garethcastillo_reading/bookshelf/templates/bookshelf/book_details.html

@@ -4,13 +4,15 @@
 {% block title %}{{book.title}}{% endblock %}
 
 {% block content %}
-<h1>{{book.title}}</h1>
-<p>
+<header class = "aligned_left_header">{{book.title}}</header>
+<p class = "aligned_left_paragraph_small">
     <a href = "../../../authors/{{book.author.pk}}/details/">{{book.author.first_name}} {{book.author.last_name}}</a> <br />
     {{book.publisher}} <br />
     {{book.year_published}} <br />
     {{book.isbn}} <br />
     {{book.blurb}} <br />
+</p>
+<p class = "unaligned_paragraph">
     <br />
     <br />
     <br />

garethcastillo_reading/bookshelf/templates/bookshelf/books.html

@@ -4,20 +4,18 @@
 {% block title %}My Favorite Books:{% endblock %}
 
 {% block content %}
-<h1>Gareth's Favorite Books:</h1>
-<ol>
+<header class = "aligned_left_header">Gareth's Favorite Books:</header>
+<ul>
     {% for object in object_list %}
         <li><a href = "{{ object.id }}/details/">{{ object.title }}</a></li>
     {% empty %}
         <li>No books registered.</li>
     {% endfor %}
-</ol>
+</ul>
 
-<p>
+<p class = "unaligned_paragraph">
     <br />
-    <br />
-    <br />
-    <a href = "../home/">Home</a>
+    <a href = "../home/">Home</a> 
     <a href = "../authors/">Authors</a>
-</p>
+</p class = "unaligned_paragraph">
 {% endblock %}
\ No newline at end of file

garethcastillo_reading/bookshelf/templates/bookshelf/home.html

@@ -4,9 +4,9 @@
 {% block title %}My Favorite Books and Authors{% endblock %}
 
 {% block content %}
-<h1>Welcome to Gareth's Database of Favorite Books and Authors!</h1>
-<p>I enjoy a variety of genres, no specific one, as long as it is good.
-    <br />
+<h class = "unaligned_header">Welcome to Gareth's Database of Favorite Books and Authors!</h>
+<p class = "unaligned_paragraph">I enjoy a variety of genres, no specific one, as long as it is good.</p>
+<p class = "unaligned_paragraph">
     <br />
     <br />
     <a href = "../books/">Books</a>

garethcastillo_reading/templates/base.html

-<html lang="en">
+{% load static %} <html lang="en">
 <head>
-    <!--<link rel="stylesheet" href="style.css">-->
+    <link rel="stylesheet" href="{% static 'style.css' %}">
     <title>{% block title %}My amazing site{% endblock %}</title>
     {% block styles %}{% endblock %}
 </head>