Splash of Style...Macs, Photography, Design, and other Passions

Panic Releases Coda for Mac

April 24, 2007 by debbie T | CSS • Mac Software • Web Development • XHTML

Yesterday, Panic announced the release of Coda 1.0, an all in one web developer’s tool for Mac OS X. I love Panic’s FTP app Transmit, so I am looking forward to checking it out further.

Other Web Resources:

Hopefully tonight, I will have time to download the trial and experiment.

Get Naked - 2007

April 4, 2007 by debbie T | CSS • Web Design

Well it’s that time of year again, when all daring designers decide to get naked and show off their true form.

Tomorrow marks the Second Annual CSS Naked Day. Remove your CSS style sheets, IF YOU DARE! baahaahaa.

http://naked.dustindiaz.com/

Since I am using WordPress, it is easy to remove the CSS file link. I saved a copy of my theme’s “header.php” file, added the text explanation of why my site is so plain, and deleted the link to my style sheet file.

CSS Child & Adjacent Sibling Selectors

July 18, 2006 by debbie T | CSS

[This is an advanced CSS tutorial. To learn the basics of XHTML and CSS, please view my Web Design Made Simple tutorials.]

It started out with an email discussion with friends, and worked its way into a detailed experiment to grasp how CSS child and adjacent sibling selectors worked. (Important Note: some advanced selectors do not work in IE version 6 or below.)

CSS Children

What is a CSS child? It is a direct descendant of an element.

<div>
<p>This is <em>fun</em></p>
</div>

CSS Adjacent Siblings

What is a CSS adjacent sibling? It is an element that follows right after another, as long as they both have the same parent.

<div>
<h1>Heading</h1>
<p>This is fun</p>
<p>This is challenging too</p>
</div>

Now that we have the definitions out of the way, how do the selectors work?

CSS Descended Selectors

If you want to define a style for a descendant of an element, you would create a CSS rule with two selectors separated by a space.

div em {color:blue;}

The above CSS code would display all em text as blue as long as it was nested somewhere inside a div element.

CSS Child Selectors

If you only wanted to define a child, then the greater than special character is used.

div>em {color:blue;}

The above CSS rule would format em text only if it was located directly in the div element. Any em text nested in a paragraph or heading would not display blue.

CSS Adjacent Selectors

To define a CSS adjacent selector, the plus sign is used.

h1+p {color:blue;}

The above CSS code will format the first paragraph after any h1 headings as blue.

h1+p+p {color:blue;}

The above CSS code will format the second paragraph after any h1 headings as blue.

Experiment

The best way to understand CSS is to experiment with it; if you are intimidated to experiment with your own file at first, but if you would like to see an example, I am sharing my child.html file. View source to see the embedded CSS and detailed notes.

Have fun!

TechCheatSheets.com

July 16, 2006 by debbie T | CSS • Internet • Web Development • WordPress • XHTML

I love cheat sheets! Found a great resource at Tech Cheat Sheets.

Besides various cheatsheets for php, css, and html, you can also find WordPress Themes and Microformats cheatsheets.

I just used their easy submit form to send the URL for the Expression Engine Quick Reference cheat sheet.

An Easy Way to Remember CSS Comments

June 12, 2006 by debbie T | CSS

The syntax for a css comment is somewhat difficult to remember. I know I always had trouble until I thought of an easy way to remember.

Think of a game of tennis

/* tennis anyone */

The rackets are on the outside with the tennis balls inside. Don’t forget to add a space in before and after your css comment text.

For more CSS Basics, as well as xhtml tutorials, check out my Web Designs Made Simple web site.

Don’t Forget to Use CSS Background-color

June 7, 2006 by debbie T | CSS • Web Design • Web Development

I recently altered my Firefox preferences to display a custom peach color background. Initially the purpose was to ensure that my designs were displaying their CSS background colors properly.

Since that time, I have noticed other web pages were displaying my custom background instead of what the designers thought they had designed.

All it takes is a simple background declaration in the CSS file and this problem can be fixed.

body {background: #fff;}

So many designers either forget or take for granted that their default browser background color (usually white) will be the same default color for all their visitors. No so!

To change the settings in Firefox to display a custom background

set custom background color in firefox

I couldn’t find a preference setting for Safari, but for Opera users, choose Preferences>Web Pages.

You will be amazed at how many web sites will now display your custom background color. I have started a list of high profile pages:

Dan Cederholm on Inside the Net

April 26, 2006 by debbie T | CSS • Podcasting • Web Design • XHTML

This week, Dan Cederholm from Simple Bits was the guest interview on the Inside the Net podcast.

I think this has to be one of my all time favorite podcast interviews. Dan is so down to earth and it’s refreshing to hear conversation about standards and web design.

What Happened to My Styles??

April 4, 2006 by debbie T | CSS • Web Design

UPDATE: Styles are back. I figured since I started early, I will end it a little early.

Why does my web site look so plain and boring?

I decided to take off my CSS clothes, and run around naked for the day. April 5th is the official day to be bare, but since time-zones are all over the place, I deleted my style sheet tonight April 4, 6:10 EST.

For more info on Naked Day, check the official web site at http://www.dustindiaz.com/naked-day/

First Annual Naked Day

April 2, 2006 by debbie T | CSS • Web Design

http://www.dustindiaz.com/naked-day/

April 5th will be the first annual Naked Day - Remove all CSS from your site, and allow the true (x)html structure shine through.

It sounds like fun! Any takers? I signed up, but now I have to set up a reminder of some sort!

Redesigning Splash of Style

November 12, 2005 by debbie T | CSS • Web Design

I have been working for the past two days on the site redesign. I have most of it finished, but there is a big snafu on the single pages, where the side bar is not contained in the main division tag.

Oh well, back to the drawing board tomorrow.

UPDATE: After some research I found a web page that helped solve the problem I was having with containing floats within my division.

http://www.quirksmode.org/css/clearing.html

I chose to add the “clear: all” declaration to the footer id selector. It seems to work.