St. Petersburg Web Design Blog

Archive for the ‘CSS’ Category

Three reasons to use selectors as little as possible.

There are lots of articles on how to use selectors to apply styles to a web page.  If you’ve dabbled with this or viewed someone elses code who did this you know it can be quite complicated.   Most of thsoe tutorials and articles  missed a main point – WHY uses selectors at all?

Here’s why you shouldn’t:

1 – Breaks the rules – Selectors are based on the id attribute, each of which is supposed to be unique and not repeated. This kinda defeats the purpose of using CSS if your style unique elements regularly.
2- It messes up your programmer. He needs to use those id and name attributes for other things. He’s expensive. don’t waste his time.
3- It’s already hard enough for others to read your CSS without finding yet another place to set the style rules for elements. Don’t be a player hater and make it even harder for someone to find where you’ve applied a style, or part of the styles to an element.

Today we announce a new theme. This one isn’t just a WordPress Theme, it’s also been ported form many other content management systems and even a plain HTML/CSS version.

Simple and clean, the Desert Sage Theme has two columns, has a fixed width of 1000 pixels and has clean color scheme of light browns. It has a Search Engine friendly text Headline and Tag line space in the header.

• Drupal
• Joomla
• HTML
• DotNetNuke

Support, download and preview links after the fold below:
Continue reading “Free Theme – Desert Sage” »

Not exactly the way I’d do it but he introduces many important topics. This video also demonstrates how to use the Dreamweaver CS3 interface to create CSS rules.

Sadly he was wrong about the “Page Properties” they only apply to the page that’s open, not “every page that we create from now on” so odd that he got such a basic piece of info wrong . . . We try to actually put these CSS style rules that he’s creating in a separate ” style sheet (a text file, written with proper css syntax and uses the .css extension). Once this is done you can go to every page you have or create anew and tell the page to use the style sheet.

On a professional scale we use “Dynamic Web Templates” to force pages to use certian style sheets and accept changes made to a master template. Because there’s so much more to a web site than it’s CSS.

Web Design Screen Shot

We’ve just completed a website design for a Sarasota Business. Sarasota Home Care is a small business serving Sarasota. They provide non medical home care for elderly (and other) residents. Things like, well just read the sight.

This is a 100 valid XHTML and CSS site.  It’s completely table free.  It uses horizontal lists in places.  It also applies CSS styling by using id attribute instead of the class= attribute like we usually do.  I don’t think I’ll switch to this method permanently.  It like to use the ID tag to call programmed actions often instead.  But it can be handy if your already assigning unique ID’s to elements because of programmed objects then you don’t have to clutter your code with css.  Plus that means a web designer can edit it in the future itself a programmer or myself . . .

I was working on a project at home today and wanted to set the first letter of the FAQ paragraphs (The “Q” and the “A”) be larger than the rest of the letters. I knew I use CSS to do this quickly and easily, but had forgotten how. It may be a surprise to some of those I’ve taught, but I am not, in fact, able to remember every single tag in every single language there ever was or is currently, pretty close to all of them, but not quite 100%.

I realized tat my CSS reference book was out on loan. Hmmm, I tried looking it up in Dreamweavers reference section, but it wasn’t there. So I turned to the to internet. I was shocked at how complicated some people think this is. Some people use a span tag and then pseudo classes of the span tag. Some people were even using JavaScript! This is how is done, the quick and easy and proper way:
.YourClassNameHere p {font-size: 12pt}
p:first-letter {color:#ff0000;font-size:xx-large}

Feel free to substitute “xx-large” with whatever value is appropriate.
This will . . . well I hope at this point it’s obvious what this code will do.