CSS points to remember…
-
Margins can even have negative values, but you can’t use negative values for padding.
-
Inherit: The keyword “inherit” can be used on every CSS property. Setting a CSS property to “inherit” causes its value to be taken from the element’s parent (“inherit” is not supported by Internet Explorer).
- Specify a unit unless the value is 0
-
Not specifying a unit for length values is a very common mistake among CSS beginners.
-
In HTML you can get away with that, but in CSS all length values must have a unit. There are two exceptions: line-height and 0 (zero) values.
-
example 1: line-height:12;
-
example 2: margin:12px 0 11px 0;
-
-
The value must be immediately followed by the unit – do not insert a space between them.
-
-
Remember case sensitivity
-
When CSS is used with XHTML, element names in selectors are case sensitive. Always use lowercase for element names in CSS selectors.
-
- Web safe colours
- 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
- Eliminate element types for class and id selectors
-
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
div#content { /* declarations */ }
fieldset.details { /* declarations */ }you can write
#content { /* declarations */ }
.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).
-
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.
-
-
Don’t redeclare inherited values
-
The values of many properties are inherited by any descendants of the element that you specify the property for.
-
body { font-weight:normal; }
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 above rule:
-
Specify link styles in the right order
-
:link :visited :hover :active.
-
-
How big is that box?
-
When something goes wrong, start by validating your CSS. Anybody can make a typo.
-
If there are no errors in the CSS you need to start analysing what’s going on. I like applying background colours to the elements I’m having trouble with to clearly see the space they occupy. Some people suggest using borders, which is fine in many cases. The problem with that approach is that borders will increase an element’s dimensions, and top and bottom borders will prevent vertical margins from collapsing. Background colours are generally safer.
-
-
Faster loading of large TABLES?
-
The CSS table-layout property allows you to fix the table layout so that the table renders much faster.
table { table-layout:fixed }
<table style=”table-layout:fixed;width:600px;”>Without the table-layout property, on large tables, users won’t see any part of the table until the browser has rendered the whole table. This can give the impression that your page loads very slowly. On the other hand, if you use the table-layout property, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker.
-
