When I started blogging, I didn't realise how much I would come to love blog designing. At least twice a month, I am researching different CSS codes and altering my blog ever so slightly. Today I am going to be sharing with you some helpful CSS code that you can use if you have a blog with Blogger

What actually is CSS?
I am going to give you some helpful CSS which you can copy and paste and apply to your blog! CSS stands for Cascading Style Sheets. CSS codes are basically bits of code that you can use to customise your blog. On blogger, there is a section in the template editor, so you don't have to go messing around with your blog HTML which can be critical! 

To find the CSS box on blogger, go to Template< Customise < Advanced < Add CSS. It should look like this:

Customising your post title
This first code is for customizing your post title. You can get so many outcomes from it and make it completely you. 

.post-title {
text-align: center;
font:normal normal 14px 'Coming Soon';
letter-spacing: 2px;
text-transform: uppercase;
}

Change the text in pink to left, right or center to change the alignment.
Change the text in blue to change the size and font type. 
Change the number in purple to change the letter spacing. If you don't want any spacing, set it to 0 or delete the line.
Change the text in green to uppercase or lowercase, depending on how you want it. If you want it normal, then don't type anything there. 

Fading Images
This makes it so that when the mouse hovers over an image, it fades gradually. This is a lot simpler than the last one because all you have to do is copy and paste it into the CSS box.

img {
opacity: 1.0;transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-webkit-transition: opacity 1s ease-in-out;}
a:hover img {opacity: .6;transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-webkit-transition: opacity 1s ease-in-out;}

Getting rid of the border on photos
Blogger does this thing where it puts a border on photos, which I personally don't like. You can get rid of it by using this CSS code:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

I hope these codes have helped people in some way and let me know if it doesn't turn out how you want. 

Lots of Love
Laura xx