Linked Style and the Cascade

One challenge many Web designers and developers new to CSS face is to understand the various facets of the Cascade. The Cascade is a hierarchy of application and provides us with rules to both apply CSS in a hierarchical fashion if we so decide to do so and to help us resolve conflicts that might appear within our styles.

In recent articles, I’ve covered the various types of style sheets, including user, author, and browser, and then reviewed the primary author styles: inline, embedded, and linked. I discussed what the Cascade offers in terms of how it applies styles in this hierarchical fashion. What I haven’t yet discussed is the use of multiple linked style sheets in a given document, why this can be helpful, and how the Cascade applies in the instance of multiple style sheets and multiple conflicting rules.

Read More

CSS From the Ground Up: Linked Style

While inline and embedded style are also considered part of CSS’s application hierarchy, grouped within “author styles,” it is the linked style sheet that gives designers and developers the utmost power over their work.

This power isn’t limited to design, of course. It also involves several other critical issues, as I’ll examine with you in detail in this installment of CSS from the Ground Up on DMXzone.

Linked Style within the Cascade

As mentioned in previous articles, there are three groups of style sheets: Browser, User, and Author styles. Browser styles are those styles that are defaults provided by the Web browser. If you don’t apply a style to some element, the default browser styles come into play. Browser styles take the least precedence over other styles.

On the other side of the fence, there’s user style, which is style created by a user. This is typically done for those individuals with accessibility needs that require they have high contrast or large fonts. User styles are typically the most powerful of all, due to the fact that they were intended for this kind of special need. In the middle we find the author styles, which are the styles we as authors create for our pages. Author styles include inline style, which controls the style of one element; embedded style, which controls the style of one document; and finally, linked style – the holy grail of CSS.

So why would I call linked style “the holy grail” of style sheets? Well, there are plenty of reasons. Let’s take a look at some of them.

Read More

CSS From the Ground Up: Embedded Style

In the past few articles, I’ve been discussing various forms of style sheets and how you can use Dreamweaver to create and work with them. As you’ve read along, you’ve noticed that I’ve been describing what is known as the “Cascade” within CSS. This is one of the primary concepts of CSS that helps us create a hierarchy of application for our styles.

In this article, the focus is on embedded style. While many readers will have likely used embedded style at some point, some might not know about how embedded style works within the Cascade. Some readers might also know when and where to decide to use embedded style and what the problems with using it as much as what the benefits are.

Read More

Free! - CSS shorthand properties

One of the main advantages of using CSS is the large reduction in web page download time. To style text, you used to have to use the <font> tag over and over again. You probably also laid out your site with tables, nested tables and spacer gifs. Now all that presentational information can be placed in one CSS document, with each command listed just once.

But why stop there? By using CSS shorthand properties you can reduce the size of your CSS document even more.

Read More

Free! - Ten CSS tricks you may not know

1. CSS font shorthand rule

When styling fonts with CSS you may be doing this:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-family: verdana,serif

There's no need though as you can use this CSS shorthand property:

font: 1em/1.5em bold italic small-caps verdana,serif

Much better! Just a couple of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. Also, if you don't specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.

Read More

CSS From the Ground Up: Inline Style

Inline Style

Used in Dreamweaver for some time to manage the Draw Layer feature, inline styles play an important role within the Cascade. Because inline styles are applied to a single element only, this gives designers an unambiguous, precise ability to hone in on styling that one element. But that level of control also carries a price, as you’ll soon find out.

In the first two articles of this series, Browser Styles and User Styles I described how browser styles and user styles can be considered opposite ends of the application hierarchy that is the Cascade. Browser styles are at the bottom-most level, and user styles are at the top-most level (Figure 1).

Figure 1:  The hierarchy so far: User styles dominate the Cascade, browser styles are at the bottommost level. Inline style is more powerful than other author styles and browser style, but can be overridden by user style.

Read More

CSS From the Ground Up: User Styles

User Styles

User style sheets may well be the unsung heroes of CSS. Around since CSS1, the ability for a user to create a style sheet to override any author styles has significance that most of us have missed out on. User styles are those styles created by the user of a site rather than the site’s developer.

Last week, we took a look at browser styles, which fall to the extreme bottom of the Cascade. To review, the Cascade is a hierarchy of application which defines how various styles integrated with documents are applied. Browser styles are those styles that define the browser styles, and it makes sense that they take the bottommost place on the totem pole when it comes to application. Browser styles are only applied when no other styles are present. This is why h1’s look big, bold, and ugly if we don’t style them.

User styles are at the very top of the heap. Styles created by the user take precedence over any other style with only one exception that I’ll discuss in a bit.  You’ll learn to create and implement a user style sheet with Dreamweaver, but before we get to that, I want to give you some more detailed background so as to understand the rationale for user style.

Read More

Exploring Browser Style

New Series Overview:

Welcome to a new premium content series on CSS and Dreamweaver. CSS from the Ground Up is a bit different than the other CSS series and articles found currently on DMXzone. This series, instead of focusing on an individual technique per article, will teach you to become not only a good CSS designer, but one who understands the language in-depth as well as being capable of gaining great results within the Dreamweaver work environment. But instead of each article being heavy on theory, the majority of learning is achieved within the context of Dreamweaver, allowing you to learn how to work with CSS on an expert level without having to leave the comfort of the design and development environment with which you are familiar.

Read More

Free! - Ten accessibility blunders of the big players

Web accessibility is about making your website accessible to all Internet users (both disabled and non-disabled), regardless of what browsing technology they're using.

More and more countries have passed laws stating that websites must be accessible to blind and disabled people. With this kind of legal pressure, and the many benefits of accessibility, the big players on the web must surely have accessible websites, right? Let's find out...

Read More

A Beginners' Guide to CSS Backgrounds

Backgrounds are one of the cornerstones of CSS-based design. At a basic level they allow you to put some colour or an image behind your elements. Sure, that doesn't sound too fancy. But once you get the hang of applying backgrounds to boxes you'll have a tool that is flexible and powerful.

In this tutorial Matt is going to take us through the basics of CSS backgrounds, how they work and some techniques that make them useful. In particular he'll be focusing on how to use them in Dreamweaver MX 2004.

Read More

Transforming a table based layout into valid XHTML/CSS

As we know, XHTML and CSS should help us to; reduce load times and bandwidth costs, ease maintenance and associated costs and ensure compatibility with newer browsers and web browsing user agents.

But what happens when we've got an existing web site – it's all laid out just so, but it's not in valid CSS/XHTML and, worse than that, there are TABLES everywhere?

Well, Michael Koch's put together a nice sample project here that will show us step-by-step how to take a table-based multi search engine site and convert it into valid XHTML/CSS markup. The article is accompanied by a resource file to help you replicate the venture.

Read More

CSS Units

This tutorial is about the units used in CSS, about the uses and pitfalls of the various methods of measuring CSS styled elements. Starting with font sizes we'll move on to boxes and positioning elements. Looking at the advantages and disadvantages of the different units of measurement we'll try to give you some clues on what you could use where (and some things to avoid). Oh, and of course we'll make sure we take into account the idiosyncrasies of different browsers along the way. 

So, if you're confused about ems, or perplexed by percentages, this is a good introduction to the hows and whys of unit setting.

Read More