the hidden rock {dot} com » Design

Learning CSS Part 1

kasia — Thu, 12 Mar 2009 01:11:03 +0000

I’ve talked about CSS (cascading style sheets) before in my post about changing the text color in your WordPress blog.

Today I want to introduce you to a great resource for learning CSS and what it’s all about (I’ll be posting more CSS resources in the next couple of days). This tutorials covers all the basics so it’s perfect for anyone just starting out. All you need to know is a little bit of html, as css works with your html documents controlling the design elements.

As I’ve mentioned before, HTML is the content of your website whereas CSS is the presentation of your website.

CSS tutorial by w3schools.com

This is a great place to start learning CSS. This step-by-step tutorial will:

walk you through how CCS works
define and demonstrate syntax, grouping, selectors, etc
show you how to insert a sylesheet into your html document
provide you with plenty of examples on working with backgrounds, colors, fonts, tables, lists … the list goes on

There’s also a quiz you can take after finishing up the tutorial to test your CSS skills and make sure you understand everything. And once you’re done, don’t forget to bookmark the CSS Reference for future use.

So if you’re ready to start learning CSS today click and get started!

Learning html — images, fonts & colors

kasia — Mon, 02 Feb 2009 18:10:07 +0000

This week I learned more fun html stuff and the some practical things as well.

DOCTYPES

Document Type Declaration (aka DOCTYPE) helps browsers understand what version of HTML the page is using. Wikipedia defines it as:

“…an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.”

No robots

I also learned a neat trick to prevent search engines from indexing our pages. All you have to do is add this line of code to your section:

resources

Here are some good resources for learning html and how to build a website:

html

images

fonts & colors

| originally posted on my classes.tametheweb.com blog |

Another quick fix: changing the text color of your WordPress theme

kasia — Sat, 24 Jan 2009 21:26:15 +0000

In my last article I showed you how to change the color of specific text within single posts and pages with a really easy addition of some extra code.

Today we’ll go over another quick fix — changing the text color in your WordPress theme — so it affects every post and page. The fun thing is that you can specify a different color for links (like I did here, did you notice? all my links are in blue so they stand out more and when you hover over them the color changes to pink.

In a future post I’ll go over a few different text effects you can do for links — like underline, or change the color of links when you hover over them, and stuff. It’s really cool. But for now let’s get the basics.

How to change the text color in your entire theme

Let’s change the text color of your whole theme, every word on every page. This might be a bit more difficult, but the good news is if you do it once you won’t have to do it again. Unless you want to, of course.

The design of your site, including the text color, is controlled in your css file, otherwise known as the stylesheet.

To find your stylesheet, click on the Design tab and then Theme Editor:

Now, locate your Stylesheet (style.css) under the Theme Files on the right:

A note about stylesheets:

WordPress is all about stylesheets, as are many newer websites.

Stylesheets have made it much easier to change design elements, such as color, and page layouts of websites.

CSS stands for Cascading Style Sheets — and basically what it does is it controls the design elements of your entire theme all from a single (occasionally multiple) file. Makes sense?

Think of it this way: HTML is the content of your website — and — CSS is the presentation of your website.

As WordPress Codex puts it: CSS "allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update."

If you want to read up on CSS in WordPress check out this article from the WP codex.

And for more about the layout and design of a WordPress blog see this helpful list of links that cover everything from basics to specific, and advanced design including information on themes, templates and customization.

Changing the text color in your WordPress theme

Each theme is different, and each stylesheet will also be different. To understand what each tag in your stylesheet does you will need a bit of patience and some experimenting. I’m going to be using the default WordPress theme Kubrick for this example and you can experiment with that theme as well, until you get a hang of it.

Now, as I explained in my previous post colors are represented by hexadecimal numbers that look like this: #FF0000 and sometimes like this: #333. They can have letters and/or numbers and can have 6 or 3 hexadecimal characters, but will always start with the # notation.

Without going through and trying to understand what every single thing in your stylesheet does (since all you want to do is simply change the color of some text), take a close look at your stylesheet and notice where these codes are listed. These are going to be the areas of your site (text, background color, borders, etc.) that are in color.

Please note: before making any changes, make sure to do a backup of your original stylesheet in case you want to go back to it. And if you haven’t already you might need to make your css file writable before editing it in WordPress.

The Kubrick theme, like many themes, makes it easy by labeling the different section of the stylesheet. So once you’re in the stylesheet you’ll notice this:

The comment area lets you know that this is the Typography and Colors area, and this is where we can experiment with some colors.

Go ahead and start by changing color: # 333; to color: # F6358A;

This quick change should have switched all of your paragraph text into a nice, pretty pink :)

Easy huh?

Now go experiment and see what color combination you can come up with to personalize your WordPress blog!

Quick fix: changing the text color in your WordPress blog

kasia — Sun, 18 Jan 2009 00:30:12 +0000

One of the easiest ways of making a quick change to your WordPress theme is changing the text color.

Sure images can make a world of difference, but for a blog with no images this might be the only customization you can make to your theme. And the good news is — it’s a quick and easy change!

Today I’m going to show you how to change the color in selective pieces of text only. My next post will explain how to change the text color in every post and page on your blog — and how to make your links stand out with a different color.

How to change the text color in a single post or page

If you just want to change the text color of a few words or sentences — and not make the change to your whole theme there’s an extra piece of code you can add in that will do that for you.

First make sure that you’re viewing the html of your post, so click on the HTML tab in your Post box:

Then all you have to do is put in this code:

Of course, remember to substitute the Enter text here with whatever words you want to change the color of and make sure that you select the right color — #000000 is just black.

Now you can use the word black instead of the number #000000 — the color change will still work, but I would recommend the numbers (for a number of reasons that I’m not going to go in here, just trust me it will work better).

If you’re not familiar with the number codes for all colors, don’t worry you’re not alone. There are plenty of places to find them.

One site I use for quick reference is this CSS Color Chart — all you have to do is find the color you like and write down the hex number:

And by the way if you want to make the HTML tab in your posts and pages to be permanent (which I actually recommend, because it will force you to learn html) you can go to your User Account under Users, and Your Profile, and in your Personal Options section at the top uncheck the box that says Use the visual editor when writing:

You might hate the change at first, but six months from now when you’re bragging to your friends that you know html — you’ll thank me :)

…

I hope this quick fix helps. My next post will discuss how to make the color change global, so it affects the text in your entire theme.