Want to Learn CSS?

If you’d rather get a jump-start with CSS instead of learning from the ground up you can purchase the SuperSimple theme framework which is only $10.

If you’ve got time to learn, not to fear, CSS (Cascading Style Sheets) is easier to learn that you might think.

What is CSS?

CSS is a style sheet (coding) language used primarily to style HTML in websites and webpages, colors, fonts, divs (boxes), padding, borders, margins, background images and more.

How to Specify Areas to Style?

With selectors, generally ids, classes and HTML tags. The syntax is: selector{property:value}

IDs

In CSS: #whatever{color:#fff}
(an ID is to be used only once per page)

In HTML:

...content...

Classes

In CSS: .whatever{color:#fff}
(a class can be used for repeating style on pages)

In HTML:

...content...

HTML Tags

When styling established HTML tags there is no need for a # or .

Whether it’s html, body, header, nav, article, footer, p, a or whatever, you just style it as is:

body{color:#fff}

How to Find Your Site’s Selectors in Order to Style Them?

Meet your two new best friends:

Once you have that setup Firebug is very easy to use:

– Click on the bug icon, you can’t miss it (Firebug panel will open)
– Top left of the panel, click on the little blue arrow/pointer
– Now hover anywhere over your page and you’ll be able to highlight different sections
– Click on the area you want to gather selector and style info from
– You can now test new styles in real-time before actually making the changes in your stylesheet

Let’s Get Down to the Styling Shall We?

First to get to your theme’s stylesheet, from the admin go to:

Appearance > Editor > Stylesheet (style.css)

Common Styles

Set the main font for your pages: body{font-family:arial,helvetica,sans-serif}
see web safe fonts

Set the main font color for pages (adding to the above):
body{font-family:arial,helvetica,sans-serif;color:#555}
see hex colors

Set the text link style for pages:

a{font-family:georgia,'times new roman',serif;color:#09f;text-decoration:none}
a:hover{text-decoration:underline}

Set a background image: body{url(IMAGE-URL-HERE)}
(upload images to the Media area in the WP admin then copy the image URL)

Hiding Stuff

If you’re not quite comfortable digging into the PHP code of your files to alter the look or remove things just yet or you simply are not sure if you want to make permanent changes or only want to make post/page by post/page changes you can use this quick and dirty trick to hide anything:

.whatever{display:none}

Specificity

Specificity is often the most difficult concept of CSS to grasp at first. Here’s a quick breakdown.

– CSS is read from top to bottom, so if you had .box{color:red} at the top of the stylesheet and .box{color:blue} at the bottom, the snippet that declares a blue color will take precedence because it is read last and has the last say, the box will be blue.

– However, if the snippet that declares the red color was more specific it might take precedence. For example body #content .box{color:red}

– If you ever find that a CSS style you’re implementing absolutely will not stick you might try the !important declaration .box{color:red !important}

Lots More to Learn

Completely Learn CSS | Check Your Work | CSS3 | Visit Us in the CSS Help Forum

Thanks, TidyThemes