Bookmarklets - Design tools

Things have a funny way of coming together in a user group. At our last meeting, there was a question about converting RGB values to hexadecimal numbers (or it might have been the other way around). I said that a search online would probably show some kind of converter, but I was not aware of one off-hand.

We also talked briefly about bookmarklets, and I demonstrated one that shows the structure of an HTML document. Member Ken T. mentioned his experience with these little javascripts, and a couple of days later, he was good enough to send me some links to sites about bookmarklets.

Here's where it comes together: This particular page about Bookmarklets - Design tools has some web design bookmarklets, and one of them is a converter for RGB values to Hex and vice versa. Try it out--it's a nice tool to have.

April Notes: Colors and Parent-Child

At our April 16 session, we finished up the topic of color, at least for now. We covered the properties of { color: } (which sets the foreground color of an element, which, in a web page, is the text color) and { background-color: }. There are other color properties in CSS, and we will get to them in the future.

We then began to consider the topic of Parent-Child, which gets us into the concept of inheritence. I pointed out a nice tool that shows you the structure of an HTML document: View Page Structure - CSS. This Javascript bookmarklet is not only instructive, but it also is a convenient way to check your page structure to see why your styles might not be working correctly.

Along the way, we were side-tracked a little by the evident misuse of the SPAN tag in some browsers. We will have more to say on that topic next month.

Next month's meeting is on May 21. We should finish up with Parent-Child, then get into the Box Model. Things will start to get real interesting then.

Jemima's Chevron

We looked at this site at the April meeting as a creative example of using CSS: Jemima's Chevron. This site is where I picked up one of the color wheels that we are using. This page is a nice example of where we want to go with CSS. Not only is it very stylish, but the underlying page itself is written in basic and clean HTML. Check the source to see what I mean. If you look at it in Firefox, you can turn off the style sheet and see what the underlying HTML looks like unstyled. [View/PageStyle/No Style]

If you are using Internet Explorer, you can save the page to your Desktop [File/Save as], then open the HTML file in any editor, delete the reference to the style sheet, save the file, and open it in a browser. You will see the page unstyled.

April 16 Meeting Announcement

Our next session will be on Saturday, April 16, at our usual time, 9-10 am.

We will finish the topic we left with last month, color. I will quickly go through some examples of defining colors in CSS. We will then move on to the topic of parent-child so that we can understand the concept of inheritence. I will use a cool app that lets you see the structure of a web page in a graphical manner. It is a great way to understand the structure of a page and also to diagnose occasional problems with your CSS.

After that, I want to get into the box model, but I expect that we will not get there until May.

See you Saturday.

March notes: Class and ID Selectors and Colors

At our March meeting, we finished up on the topic of class selectors. We discussed how class selectors can be combined but noted that Internet Explorer does not properly render pages with compound class selectors. I used this sample page to show the problem. Open it in IE and in a more standards-compliant browser like Firefox to see the difference. If you save the page, you can play with the source to understand the problem better. I have notes there.

We briefly touched on the ID selector and discussed appropriate uses for it. We will be getting back to ID's when we get to style precedents.

We then moved on to color and began with a review of the basics of color in HTML. CSS does not give us more colors to work with. It does provide more options for defining colors, though, making it easier to match colors, such as by RGB numbers or percentages. In the Resources page of this site, I have added a number of locations for color information.

At our next meeting, we will finish with color and move on to the parent-child concept.

7 Compelling Reasons to Start Using CSS

This article at SiteProNews is one designer's take on why he started using CSS. Not much really new, but it is an interesting perspective from a practical viewpoint. SiteProNews is a free newsletter and webmaster resource site--if I recall correctly, member Barb S. told me about it.