Image via Wikipedia

The w3schools website is where I learned a lot of the beginner Cascading Style Sheet writing.  The Cascading Style Sheets or CSS, is the set of instructions that formats your blog.  All the elements are put on the page with html, and we make them look pretty with CSS.

If you head to your admin panels and look in Appearance>> Editor, and click on the Stylesheet towards the bottom of the list on the right hand side, you will see a page of CSS code.  This code really is not hard to write.  Here’s an example:

Lets say we want to put a border around a post.

We go to our admin panels, click “edit” on the subject post.  Click on the HTML editor.  At the top of the post, put this code:
<div style="border: 1px solid black;">
THAT, my friends is all there is to it!  This example is called “inline styling” as it isn’t written in the stylesheet, but in line with the HTML.  This is only done on the rare occasion and only for one time things.  If you want every post to have a border, then you can do that with one line of code in the stylesheet.

To find out how to get a particular style or where to place the code in a stylesheet check out the w3schools website.

Isn’t that just so cool?

W3Schools

Here is the list of their references:

HTML & CSS
REFERENCES
HTML Tag Reference
HTML Event Reference
HTML Color Reference
XHTML Tag Reference
CSS Reference

XML Languages
REFERENCES
XML DOM Reference
XSL Reference
XSLT Reference
XSL-FO Reference
XPath Reference
XQuery Reference
XLink Reference
Schema Reference
XForms Reference
RDF Reference
RSS Reference
WAP Reference

Browser Scripting
REFERENCES
JavaScript Reference
HTML DOM Reference
VBScript Reference
E4X Reference
WMLScript Reference

Server Scripting
REFERENCES
SQL Reference
ASP Reference
ADO Reference
PHP Reference
ASP.NET Reference
.NET Mobile Reference

Multimedia
REFERENCES
Media Reference
SMIL Reference
SVG Reference
WAP Reference

A lot of you use <br> tags to accomplish a space between sidebar items.  Although this will work, it will interfere with validating your site, it will probably be deprecated pretty soon, AND it doesn’t make very good use of your time.

Did you know that if you add the proper HTML tags, you can style everything with ONE line in the stylesheet?  <– if that sounds like complete geekeze to you – do not fear!  This is only my way of convincing you to do it properly. If the reasons why don’t make sense to you, then just do it my way ’cause I said somovingrightalong.

So, if you happen to want a line break in between your images, you can REMOVE the <br> tags, and add the proper tags depending on what you are trying to accomplish.  Do you want a new paragraph?  Then use a <p> tag.  Do you want a list of items with each item on its own line?  Then use <li> tags.  M’kay?

If, in the rare case, you actually do want a ‘soft return’ or line break, as opposed to a ‘hard return’ or new line, then this is the occasion for a <br> tag.  Here’s how to use it:

As with all other HTML tags, it requires a beginning and an END.  So please, for the love of all your techy friends, use this tag: <br />.    The line breaking tag doesn’t surround anything.  Rather it defines an action.  So you can use this, and include the ending slash right in the tag.  This is very similar to the <img> tag.

For some reason I can NEVER remember where to put that end slash.  I have to look it up every time!  Anybody have an easy-to-remember trick for me?

Next time – we discuss what on earth I mean by <li> tags…

Happy Blogging,

Cathy

• text widgets

• HTML editor

• theme Editor

So, if you use those three areas of your blog, you need to know a thing or two about HTML.  Remember – whatever you put in those areas will go directly to the web – it will not get filtered and published by your friendly WordPress engine.   Now, unless you know HTML, you really should NOT be using the html editor in the add-new post screen.  And unless you know css AND html, you should not be tweaking your theme through the theme editor.

The text widgets are something that all of us use to one extent or another to put stuff in our sidebars.  We use it for our RSS / feed subscribe buttons, for our twitter buttons, and for any other image or text that we want to put in there.  Unfortunately, those text widgets will break your blog.  Let’s go through the <p> tag to use it properly, and prevent a mishap with an unruly sidebar.

Lesson #1: the <p> tag

If you’ve used a word processor, you know that if you press <enter> key on your keyboard, you get what is called a “hard return”.  This creates the space between paragraphs.  If you press the <shift> and <enter> keys, you get a soft return (on a mac, I believe it is <ctrl> and <enter>).  It just moves the curser to the next line without an extra line.

The <p> tag stands for “paragraph” and is used in HTML to create a hard return. If your theme is styled correctly, it will create a space between your paragraphs.  To USE html tags, you need to know one thing: What you start, you must finish, without exception.  This is especially true if your theme is written in xhtml.  If you open a paragraph with <p> then you must close it with a </p>.

Note: If you are typing away and press “enter” and get a new paragraph on your screen – that is a word processor type of function.  HTML is NOT a word processor.  If you want a new paragraph, you have to wrap your text in <p> </p> tags.

For example:

<P> This is my short paragraph. I am using some shortcuts to show you how to write a paragraph.  For some editors, I really should code the punctuation instead of typing it like I am now. </p>

If I did not use the closing </p> tag, then the internet would assume that everything for the rest of that page was in the same paragraph.  So if you forget to close your sidebar <p> tags, then your sidebar MAY swing to an unexpected position.  If you want to be sure that you don’t get weird sections all over your page, be sure to close the html tags that you use.

I’ve also seen some people use <p> like a page break or section break.  This is the WRONG use for it.  When some web browsers are reading this type of html it will read it wrong, and your page could be read or displayed with weird sections.

This post is part of a series on Desperately Seeking WordPress called, “Save the Sidebar!”  Click here to go to the beginning of the series:

We’ll cover how to create section breaks and page breaks in our next tutorial:  Sidebar Fix #2: the <br> tag.