Simply Green Journal CSS Walkthough

4 min read
0 Favourites
2 Comments
843 Views
Okay, in this walk through I'm going to walk you through, step-by-step, our simply green journal CSS so you can see what makes the CSS actually work.
Okay, let's get started

      .journalbox {
      background-color: #ffffff;
      }


Okay, we'll start off with the .journalbox selector this
is basically the box that is entire journal in is
including the content, moods, title, time/date etc.

Okay, All were doing here is
saying that the background-color of the entire journal
is going to be white.

This property doesn't apply to some selectors such as
.journaltop, .journalbox .a etc.
Anyway we'll get to that later.


      .journaltop {
      background-color: #222222;
      color: #ffffff;
      text-align: center;
      padding-top: 70px;
      height: 55px;
      border-bottom: #98e839 solid 12px;
      }


Ok the selector .journaltop is where the journal title
and the date the journal was written goes.
Now let's try understand some of this syntax

Basically the first line says we want the background-color
to be a dark Grey. The property "color" is just the text color
and we just want our text to be white.
Then on the third line we say we want the text to be aligned to
the center of the selector.

Ok padding is a bit difficult to explain but I'll try my best
Padding is a specified distance you want the content to be
from the specified constraint, Eg. padding-top, padding-left etc.
one thing with padding is that you have to add the overall padding to
the height or width, if you have those properties.
Such as above the height is 55 and the padding-top is 70
so add 55+70 = 125
So .journaltop is 125px high.

The last line says that we want a border and the bottom of
the .journaltop selector that is a light green, 12px thick and is solid.


      .journaltext {
      width: 410px;
      margin: 0 auto;
      border-top: #222222 solid 25px;
      border-left: #dddddd solid 1px;
      border-right: #dddddd solid 1px;
      border-bottom: #dddddd solid 1px;
      padding: 20px;
      margin-bottom: 20px;
      margin-top: 20px;
      }


Ok most of the stuff in here we know, except for margins
Margin: 0 auto; means that you want the selector to be positioned
in the center of what ever it is in.
But margin-bottom:20px; means that you want 20px space between
the bottom of this selector and the top of the next one.
And vice-versa with margin-top.
Oops before I move on I forgot to mention that .journaltext
Is the main content box


      .journalbox .list {
      width: 350px;
      margin: 0 auto;
      border-top: #222222 solid 25px;
      border-left: #dddddd solid 1px;
      border-right: #dddddd solid 1px;
      border-bottom: #dddddd solid 1px;
      margin-bottom: 20px;
      margin-top: 20px;
      }


OK onto the last big block.
.journalbox .list is the mood box down the bottom of your journal
All this is basically the same as the .journaltext syntax so we won't go
over it.


      .journalbox .a {
      background-color: #ffffff;
      }

      .journaltop h2 {
      color: #ffffff;
      font-family: "arial";
      }

      .journaltop img {
      display: none;
      }


I might as well knock over the last three at once.
Ok well .journalbox .a is the even numbered row in
the moods box. so if you want to have different style
on each alternate row you can do that.

Anyway moving on, .journaltop h2
is the main title of the journal. I've just said in here that I want the
font color to be white. the property "family-family" is basically
what the font is. But remember when you are creating a layout
of any kind use default fonts and not ones that you have downloaded,
because they will not show up if that person does not have that font
on the computer.

Ok onto our last selector. now the .journaltop img selector is
the image of a journal in the top left corner of the journal.
Here I've just said that I want to hide that image.


Ok that's it Congratulations you should know what all that CSS
syntax means. Anyway hope you enjoyed this walkthough, or at
least found it helpful :).



Some helpful links/resources

w3schools.com/css/css_intro.as… - w3school CSS tutorials
thespook.deviantart.com/art/Jo… - Journal CSS selectors

I'll add more as I find them


   jimmy-tm
Published:
© 2008 - 2021 StylizedSociety
Comments2
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In