Intro To CSS-Cascading Style Sheets

This post is in tune with the geek in me. I see a lot of people looking kinda confused when you start mentioning CSS and customizing the design of their WordPress blog, so I thought I’d do a little series of posts on CSS or Cascading Style Sheets.

First of all, let’s clear this up: unless you buy the Custom Design upgrade, you don’t have to worry about it at all. You can’t mess with the code, and you can’t break anything. If you decide to be adventurous and buy the Custom Design upgrade, again, you have nothing to fear. Even if you copy/ enter the code for CSS wrong, nothing will break. The worst that can happen is it won’t work, as in you won’t see any changes or it will look a bit funky.

Okay, enough of the chit chat, let’s see what CSS is and what can you do with it.

What Is CSS?

CSS stands for Cascading Style Sheets and it controls how you site looks. With CSS, you can change the color of your background, the posts, add borders to your sidebars, images, or individual posts, change the font, as well as the font size and the font color.

In it’s most simplistic form, a line of CSS code looks like this:
selector{property: value;}.

Selector is the thing you want to style. It refers to any HTML tag that you see when you right-click on any web page and select view source. An HTML tag is surrounded by <> brackets and looks like this:

< body>Content of a web page < /body>. There is no space between the name of the tag (in this case body) and the brackets. 

Basically, anything that is wrapped in those angle brackets, is an HTML tag and as such can be styled with CSS.

Property is the quality of the selector you want to modify; like color, font size, text color, image alignment, position, width, height…

Value is …. the new value that you are assigning to the item you want to modify.

In layman’s terms, think of it like this: Let’s say your hair color is brown. But you really like the red hair color and think you would look great with it. Using CSS, it would be as easy as:  hair{color: red;}. Voila! Your hair is now red. *sigh*. If only it would be that easy in real life…

To apply this to an actual HTML element, let’s say you want to change the background of your website. To do this, all you have to do is specify the selector – in this case body, and tell the editor you want the color to be blue.

body{background-color:blue;}

See? I told you it was easy.

Now you know what CSS is and how it looks like. Stay tuned for the next post where I will go into more detail about CSS as well as posting links where you can get more information on CSS.

Advertisements

2 thoughts on “Intro To CSS-Cascading Style Sheets

  1. Ok, your dummy husband does understand that. But you are probably correct in your assertion today that I don’t give myself enough credit for knowing some of this stuff.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s