The Scary CSS: Tuesday Tutorials

Is CSS a scary acronym to you? Well hopefully I am about to make the scary CSS a little less scary for you. Going to share with you 5 basic CSS hacks to help you tackle the scary CSS.

What is CSS?

Before I get into the basics few things you should know about CSS. In case you didn’t know CSS stands for Cascading Style Sheets. With CSS you are trying to style a specific HTML element. Your have 3 different ways of doing CSS.

1. Inline – within the actual HTML element itself
2. Internal – in the HTMLsection
3. External – external CSS stylesheet (Custom CSS for WordPress)

For your CSS to work you have to wrap it in brackets like these {}. Then to start the style you have to identify the HTML element, class, or ID you want to style. To style the body element you would just see body to start the CSS. If your are trying to style a class you would see a period to start with the class name. Then if it is an ID you would see a hashtag with the ID name to start the CSS.

5 Basic CSS Hacks

Here are some examples of some simple CSS styles you could use.

1. Color – You can use this CSS to change the color of your text

As you can tell in the example above that is changing the color of the text for the entry-time class.  You just need the RGB number of the color you want to change it too.

2. Border – This will add a border around the section.  The CSS is in the example about as to how I did it.  Basically you just tell it how you want the border to look.  You tell it if you want a double line, solid line, or dashed line.  Tell it what color you want it with the RGB color, and how thick with the number of pixels.  You can see this in action on my homepage.

3. Margins – This adjust the margins of the element you are trying to change.  You would probably use this if you need to move your section up or down.  You can see this in the same example above.  The sample is just moving the top and left margins of the section.  If you are wanting to change all margins you can use just margin and not margin-top, etc.

4. Background Color – This CSS will change the background color.  Like what I did on my Read More button

As you can see above is similar to color.  In this case I wanted it transparent instead of a color, but if you want color just use the RGB like you did in color.

5.  Fonts –  This one simply changes the font being used for the section.

As seen above with the font property.  You can change the font-family, font-weight, and font-size.  This will tell it what font you want to use, and how big you want it to be.

These are simple, and can really make a big difference in the look of your blog.  Hopefully you find these useful.

Any other CSS styles you would like to know?  Let me know in comments below.  W3 Schools is a great place for help with CSS.

Is there something you have wanted to change on your blog, and just can’t figure out how to change it? Just fill out the Tuesday Tutorial Request Form, and I will help you. If I don’t know how to do it I will find out how, and share.

Want to have the next Tuesday Tutorial come right to your inbox? Just signup for the Lewis Lane Newsletter.