How To Use CSS To Rock Your Posts Even If You Don't Understand Coding Well

Friday, May 13, 2016

Paper Bindings - How To Use CSS To Rock Your Posts Even If You Don't Understand Coding Well


Earlier this week I shared with you HTML Book Bloggers Need To Know In Order To Be Successful. Now we are going to take that basic knowledge and dazzle it.





What Does CSS Look Like On The Page?


Take a look at the categories in my sidebar. Images?

Nope.

What about this guy? Fancy table?


Nope.

This one? Did I just change the font?


Nope.


CSS coding looks like this: 


.quotation {
font-size: 14px;
color: #000000;
}

or

#apples{
font-size: 12px;
color: #0893c0;
}

It's that easy to write. 

  • First you name your coding: .quotation
  • Then you add a { which tells the computer everything that follows the bracket is connected.
  • Then you pick the attributes you want to change. (I've listed several common ones below for your convenience.)
  • Add a ; after each item you add.
  • Close it all up with the other end of the bracket }

The Selector:
  • Whatever word you write after the . and before the { is the word that you will use reference later. 
  • The selector links up your HTML (paragraph/div/image/etc) with your CSS design. 
  • It cannot start with a number for either the unique ids (#) or class (.) ids.

It Is Important To Note:
  • That if you use ".p" then all your paragraphs will styled like that. If you want just one to be decked out, then give it a unique name.
  • Ids should only be used once, whereas you can use the same class multiple times.

Not Working Correctly?:
  • Did you use the } to close the coding?
  • Do you have a ; between each different attribute to separate them? 
  • Is there a # before each color code?
RELATED: Common Reasons Why CSS Breaks




Common Attributes That Can Be Changed With CSS

background-color
border
color
font-size
height
letter-spacing
margin-bottom
margin-left
margin-right
margin-top
padding
text-align
width

RELATED: W3Schools - Color Codes

CSS Coding Is Placed In The <Head> Tag Of A Page

Thankfully with the blogging platforms available now, most of us aren't coding the entire page/design by ourselves. We have a cheat available.


How To Set Up CSS In Blogger:

(Blogger is the only system I have access to.)

Paper Bindings - How To Use CSS To Rock Your Posts Even If You Don't Understand Coding Well

Paper Bindings - How To Use CSS To Rock Your Posts Even If You Don't Understand Coding Well

Paper Bindings - How To Use CSS To Rock Your Posts Even If You Don't Understand Coding Well

Paper Bindings - How To Use CSS To Rock Your Posts Even If You Don't Understand Coding Well
Easy, right?



Getting It On The Page

To add the CSS into your post, you simply need to reference it once it has been added to your blog's CSS section.

<div class="quotation">Text</a>
<p id="apples">Text</p>



Why You Should Use CSS

Back in my Geocities days, I used frames and tables like they were the cornerstones of the html world. And back then, at least according to the people who taught me HTML, they were. I could make a table do anything I wanted it to.

However, when you wanted to change things up, you had to redo the each page the change affected.

Have 5 pages on your website? It's a pain, but doable.

1000 blog posts on your blog? That's nervous breakdown territory. Been there, done that. TWICE.

Learn from me, folks. CSS is going to be your new best friend and you will never want to be without it in your blogging life again.


Your Free Guide

Paper Bindings - How To Use CSS To Rock Your Posts Even If You Don't Understand Coding Well

No Comments Yet, Leave Yours!

Thank you for visiting and taking the time to sharing your thoughts with us.

Related Posts Plugin for WordPress, Blogger...