Tryangled Solutions web designing tips tricks

The cascade lets you use multiple rules to specify the properties for an element. You can either redefine the same property or define additional properties. Let’s say you have the following markup:

1. <p class=”update”>Update: Lorem ipsum dolor set</p>

In the CSS, you can use separate rules to specify the properties that are common to all p elements and those that are specific to p elements with class=”update”:

1. p {
2. margin:1em 0;
3. font-size:1em;
4. color:#333;
5. }
6. .update {
7. font-weight:bold;
8. color:#600;
9. }

The two rules will be combined for p elements with class=”update”. Since a class selector is more specific than a type selector, the properties defined in the second rule will be used when a conflict occurs, as for color in this case.

More info on how the specificity of CSS rules is calculated can be found in Calculating a selector’s specificity in the CSS 2.1 specification.

The values of many properties are inherited by any descendants of the element that you specify the property for. color and the font related properties are the most common examples of such properties.

Be aware that some properties may be overridden by browser specific user agent style sheets, i.e. the browser’s defaults. That’s why you can’t make all headings non bold with the following rule:

1. body { font-weight:normal; }

The browser’s predefined rules are more specific because of the cascade, which is described next.

You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value. This is especially important to consider when you use shorthand properties, since any unset properties are assigned the default values of the corresponding individual property.

Some common default values are 0 for padding (though there are exceptions to this), and transparent for background-color.

Since there are slight differences in the default values between browsers, some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets:

1. * {
2. margin:0;
3. padding:0;
4. }

When writing selectors that target an element with a certain class or id value, you can omit the element type before the . (class selector) or # (id selector).

So, instead of writing

1. div#content { /* declarations */ }
2. fieldset.details { /* declarations */ }

you can write

1. #content { /* declarations */ }
2. .details { /* declarations */ }

and save a few bytes for each selector.

This is especially useful for id selectors since they must be unique in a document, which reduces the risk of rules conflicting with each other. class names on the other hand can be used any number of times in a document, and different element types can be assigned the same class name (or names). To style element types with the same class name differently you will need to specify the element types in the selector.

Be aware that the above rules are not identical. If you write one rule with and one rule without the element type in the selector, the rule that uses the element type will have higher specificity.

This tip is in the shorthand article mentioned earlier, but I use it so much I’ll repeat it here: in CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit:

#000 is the same as #000000, #369 is the same as #336699.

And remember that octothorpe (#) before the colour code.

Another colour related tip is that you can specify web safe colours by using only digits that are multiples of 3 for the red, green, and blue values: 0, 3, 6, 9, C, and F. #99c is a web safe colour, #98c is not.

When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors.

Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names. If for some reason you do use mixed case, make doubly sure to match the case in your CSS with that in the markup.

You can create an HTML mouseover text description, similar to an image alt tag or pop up text description, that will be viewed when your mouse is placed over the text link. Place “title=”your text description”" within your HTML link code.

<A HREF=”http://www.blog.tryangled.com/” TITLE=”Web Designing Company”>Your Text</A>