JavaScript Workshop » CSS

All modern browsers support the most common media attributes, which are supplied within the link element to target specific style sheets in a specific situation. For example, to ensure only visitors viewing the web site on a monitor, you add media = "screen" to the link element to call your default style sheet. Underneath that a second link element can be used with media = "print" added to call a print style sheet with only basic styling, such as black text on a plain white background, and all graphics removed.

(read more...)

When you create your CSS styles for a website you will have at least one style sheet for your layout and maybe another one for content, etc. (or just all in one). No matter how you organize your styles, every user will see your content the same.

Question: Can you give visitors a choice on how to view your content?

Answer: A JavaScript-powered style switcher is one way.

(read more...)

I admit it. I use tables when I need to layout a form. It is just so quick and easy to do. Though as we all know (or should know), tables were only intended to be used for layout of tabular data. So with all the buzz about semantic markup and accessiblity, I thought I'd look into learning how to layout a simple form the right way. After a few hours of head scratching, I finally came up with a form that uses CSS that looks practically the same as one using tables.

(read more...)

The visibilty of an element is a powerful tool that can be used in JavaScript to create everything from animations and effects to fast templating. More importantly, however, it can also be used to quickly hide an element from view, providing users with some basic user interaction capabilities.

Within CSS there are two different ways of effectively hiding an element from view; both have their benefits but can provide unintented consquences, depending on how you use them:

(read more...)

Every element in a document is an object. Every one of these objects has a whole collection of properties as we have discussed in previous meetings. There's one property called style which every element node has. It contains information about the styles attached to the element. Querying this property doesn’t return a simple string, it returns an object. Style information is stored as properties of this style object:

element.style.property

(read more...)

Have you ever seen a web site that has clickable blocks of text?

Ever wondered how they were done?

Well, I found out how from Christian Watson.

Here is a simple example and the code (.zip).

I know the basics of CSS (Cascading Style Sheets), but beyond that I sometimes need to bumble and fumble around looking for answers in books or online. One aspect of CSS that gives me some occasional problems (and I'm sure others as well) are floats.

When you float an element, it becomes a block-level element that can then be shifted to the left or right on the current line. A floated box is laid out according to the normal flow of elements, but it's then taken out of the flow and shifted to the left or right as far as the containing element will allow. Floats are a must for placing images in context, creating columns and other neat design ideas.

(read more...)

One way to enhance a table style is to introduce a hover effect on the table rows: when the user is moving across the table with their mouse, the current row they are on will change color.  This is something that you frequently see in interface design in internal web applications which help users view a particlar row of data.

(read more...)

If you want to build modern web sites, you need to know about Cascading Style Sheets (CSS). CSS gives you the power to style and lay out web sites so they are usable, compact, good looking, well structured, and easy to maintain. The basic purpose of CSS is to allow the designer to define style declarations, and to apply those styles to selected portions of HTML pages using selectors which are references to an element or grop of elements to which the style is applied.

(read more...)