What is value?

Value is a 'physical' characteristic of the property. Property declares what should be formatted, e.g. FONT while value suggests how the property should be formatted, e.g. 12pt. By setting the value 12pt to the property FONT it is suggested that the formatted text be displayed in a 12 point font. There must always be a corresponding property to each value or set of values.

H1 {font: bold 180%}
In the example above the H1 selector is declared the FONT property which in its turn is declared the values BOLD and 180%.
The values suggesting alternatives are specified in a comma separated list, e.g.
H1 {font-family: font1, font2}

 

What is initial value?

Initial value is a default value of the property, that is the value given to the root element of the document tree. All properties have an initial value. If no specific value is set and/or if a property is not inherited the initial value is used. For example the background property is not inherited, however, the background of the parent element shines through because the initial value of background property is transparent.

<P style="background: red">Hello <strong>World </strong> </P>
Content of the element P will also have red background

 

How frustrating is it to write a specification knowing that you're at the browser vendors' mercy?

That's part of the game. I don't think any specification has a birthright to be fully supported by all browsers. There should be healthy competition between different specifications. I believe simple, author-friendly specifications will prevail in this environment.
Microformats are another way of developing new formats. Instead of having to convince browser vendors to support your favorite specification, microformats add semantics to HTML through the CLASS attribute. And style it with CSS.

 

How far can CSS be taken beyond the web page--that is, have generalized or non-web specific features for such things as page formatting or type setting?

Yes, it's possible to take CSS further in several directions. W3C just published a new Working Draft which describes features for printing, e.g., footnotes, cross-references, and even generated indexes.
Another great opportunity for CSS is Web Applications. Just like documents, applications need to be styled and CSS is an intrinsic component of AJAX. The "AJAX" name sounds great.

 

How To Style Table Cells?

Margin, Border and Padding are difficult to apply to inline elements. Officially, the <TD> tag is a block level element because it can contain other block level elements (see Basics - Elements).
If you need to set special margins, borders, or padding inside a table cell, then use this markup:

<td>
yourtext </div></td>
to apply the CSS rules to the div inside the cell. </p>

 

How To Style Forms?

Forms and form elements like SELECT, INPUT etc. can be styled with CSS - partially.
Checkboxes and Radiobuttons do not yet accept styles, and Netscape 4.xx has certain issues, but here is a tutorial that explains the application of CSS Styles on Form Elements.

 

How do I get my footer to sit at the bottom...?

Margin, Border and Padding are difficult to apply to inline elements. Officially, the <TD> tag is a block level element because it can contain other block level elements (see Basics - Elements).
If you need to set special margins, borders, or padding inside a table cell, then use this markup:

<td>
yourtext </div></td>
to apply the CSS rules to the div inside the cell. </p>

How To Style Forms?
Forms and form elements like SELECT, INPUT etc. can be styled with CSS - partially.
Checkboxes and Radiobuttons do not yet accept styles, and Netscape 4.xx has certain issues, but here is a tutorial that explains the application of CSS Styles on Form Elements.

How do I get my footer to sit at the bottom...?
Need a div which makes space at the bottom of the main page (inside the #wrap div). Then, the footer (being inside #wrap) can be placed in that space by using absolute positioning. Like this :

CSS body, html {
height:100%;
}
body {
margin:0;
padding:0;
}
#wrap {
position:relative;
width:780px;
margin:auto; min-height:100%;
}
* html #wrap {
height:100%;
}
# clearfooter {
height:50px;
overflow:hidden;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:50px;
}

HTML
<div id="wrap">
...content goes here...
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>

 

Can I attach more than one declaration to a selector?

Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list, e.g.;

Selector {declaration1; declaration2}
P {background: white; color: black}

Border around a table?

Try the following:

.tblboda {
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
}
/*color, thickness and style can be altered*/


You put this style declaration either in
an external stylesheet, or you can stuff it in
the <head></head> section, like:

<style type="text/css">
(here you can place your styles)
</style>

and apply it to the table as follows:

<div class="tblboda">
<table yaddayadda>
<tr>
<td>Content text and more content</td>
</tr>
</table>
</div>


That should give you a grey thin border around this table.

If you want the border to 'shrink wrap' around the table, then you have to use the <span> tag instead the
tag. But that is not quite proper CSS or HTML, because a is for inline elements. A table is not an inline element, therefore the correct tag is a <div>. If you play around with it a bit then you have a good chance to achieve what you want and still have correct HTML/CSS.

The other way would be that you apply the class .tblboda directly to the table (for IE and other contemporary browsers), like <table ... class="tableboda"> and you define another class for each stylesheet: .tblboda2

In the NN4.xx stylesheet, you use the same properties as above, and in the IE and other contemporary browsers you carefully set all those properties to default, like {border-style: none;}

Then you wrap the table in the <div> with the class .tblboda2 (NN4.xx does that) (IE a.o.c.b. don't do anything, because the border-style is set to "none" = no border at all).

This way you have a table that is wrapped in a nice little border: .tblboda2 for NN4.xx, .tblboda for IE and other modern browsers.

 

How do you target a certain browser?

IE can be targetted by preceding your properties with '* html'. For example...

#nav {
position:fixed;
}
* html #nav { /* this will target IE */
position:absolute;
}

Another way to target IE is with conditional comments. Put this (below) in the head - just before the closing tag - and put anything you want to be directed only at IE in another stylesheet.
<!--[if IE]>
<link href="ieonly.css" rel="stylesheet" type="text/css">
<![endif]-->

If you need to target IE5x...

#wrap {
width:760px; /* for IE5x */
w\idth:780px; /* for all other major browsers */
}

 

How does inheritance work?

HTML documents are structured hierarchically. There is an ancestor, the top level element, the HTML element, from which all other elements (children) are descended. As in any other family also children of the HTML family can inherit their parents, e.g. color or size.

By letting the children inherit their parents a default style can be created for top level elements and their children. (Note: not all properties can be inherited). The inheritance starts at the oldest ancestor and is passed on to its children and then their children and the children's children and so on.

Inherited style can be overridden by declaring specific style to child element. For example if the EM element is not to inherit its parent P then own style must be declared to it. For example:

BODY {font-size: 10pt}
All text will be displayed in a 10 point font

BODY {font-size: 10pt}
H1 {font-size: 14pt} or H1 {font-size: 180%}

All text except for the level 1 headings will be displayed in a 10 point font. H1 will be displayed in a 14 point font (or in a font that is 80% larger than the one set to BODY). If the element H1 contains other elements, e.g. EM then the EM element will also be displayed in a 14 point font (or 180%) it will inherit the property of the parent H1. If the EM element is to be displayed in some other font then own font properties must be declared to it, e.g.:

BODY {font-size: 10pt}
H1 {font-size: 14pt} or H1 {font-size: 180%}
EM {font-size: 15pt} or EM {font-size: 110%}

The EM element will be displayed in a 15 point font or will be 10% larger than H1. NOTE: EM is, in this example, inside H1 therefore will inherit H1's properties and not Body's.

The above declaration will display all EM elements in 15 point font or font that is 10% larger than font declared to the parent element. If this specific font is to apply to EM elements but only if they are inside H1 and not every occurrence of EM then EM must take a form of a contextual selector.

H1 EM {font-size: 15pt} or H1 EM {font-size: 110%}

In the example above EM is a contextual selector. It will be displayed in specified font only if it will be found in the context of H1.

Not all properties are inherited. One such property is background. However, since it's initial value is transparent the background of the parent element will shine through by default unless it is explicitly set.

What is the percentage value in 'font-size' relative to?

It is relative to the parent element's font-size. For example, if the style sheet says:

H1 {font-size: 20pt;}
SUP {font-size: 80%;}

...then a <SUP> inside an <H1> will have a font-size of 80% times 20pt, or 16pt.

 

What is wrong with font-family: "Verdana, Arial, Helvetica"?

The quotes. This is actually a list with a single item containing the well-known 'Verdana, Arial, Helvetica' font family. It is probably intended to be a list of three items.

Unlike in most other CSS1 properties, values for the font-family are separated by a comma to indicate that they are alternatives. Font names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.

So to ask for two fonts foo and bar the syntax is:

font-family: foo, bar

To ask for the two fonts Revival 555 and Iodine you can do this:

font-family: "Revival 555", Iodine

You could also do this:

font-family: Revival 555, Iodine

which is equivalent. Notice that this is not three fonts; you can tell because after the "l" you didn't hit a comma, (more list items to come) a semicolon (end of that property, another property coming up) or a curly brace (end of that rule). This is also equivalent:

font-family: Revival 555, Iodine

^^^^^^ whole bunch of spaces converts to one space

But this next one is asking for a different font with two spaces in the name

font-family: "Revival 555", Iodine
^^two spaces, which are not converted

In general it is more tolerant of user typing to leave out the quotes. Sometimes you need them, for example there is a real font sold by Fontworks and designed in 1995 by Stephan Müller called Friday, Saturday, Sunday. Yes, two commas in the actual font name. CSS1 can handle this:

font-family: "Friday, Saturday, Sunday", cursive

Because it can handle this, the example in the title is syntactically correct. But what the author or tool wrote was almost certainly not what the document author intended.

 

How do I centre my page?

This is very easy. If we take the code in the last question and change it to this :
CSS
body, html {
height:100%;
}
body {
margin:0;
padding:0;
}
#wrap {
position:relative;
width:780px;
margin:auto; min-height:100%;
}
* html #wrap {
height:100%;
}

you get a page that fits an 800x600 resolution screen without a horizontal scrollbar, which will be centered at higher resolutions.

Must I quote property values?

Generally no. However, values containing white spaces, e.g. font-family names should be quoted as whitespaces surrounding the font name are ignored and whitespaces inside the font name are converted to a single space, thus font names made up of more than one word (e.g.) 'Times New Roman' are interpreted as three different names: Times, New and Roman.

 

Do any WYSIWYG editors support the creation of Style Sheets? Any text-based HTML editors?

As support for CSS in browsers has matured in the last year, both WYSIWYG and Text-based HTML editors have appeared that allow the creation or the assistance of creating Cascading Style Sheet syntax. There are now at least two dozen editors supporting CSS syntax in some form. The W3C maintains an up-to-date list of these WYSIWYG and text-based editors.

 

Which style specification method should be used? Why?

The answer to this one is tricky. The short answer is: "it depends." The long answer is, however, another story.

If you are planning on using more than one style specification method in your document, you must also worry about Cascading Order of Style methods (see question 11.) If you are going to use only one method, then some guidelines about the nature of each method need to be kept in mind. The answer to this question is also very much related to the advantages and disadvantages to using each of them (next question.)

Method 1: External Style Sheets (The LINK [-->Index DOT Html] element)
This method should be used if you want to apply the same style to multiple documents. Each document can reference the stand-alone style sheet and use the styles contained within. Using this method, the appearance of many documents can be controlled using a single or small number of style sheets. This can save a LOT of time for an author.

Method 2: Embedded Style Sheets (The Style [-->Index DOT Html] element)
The syntax used with Method 2 is the same as that for Method 1. This method is a happy medium between External Style Sheets and Inline Styles (see below.). It should be used in place of Method 1 if you only want to specify styles for a single document. This method should also be used when you want to specify a style for multiple tag types at once or the list of style definitions is of larger size. Method 3: Inline Styles (STYLE attribute to HTML elements)

If you only have to apply style to one or a few elements in a single document, your best bet will often be an Inline Style. This method attaches a style definition within the HTML element it is modifying.

 

Justified Text?

You redefine the <p> tag like:

p {text-align: justify;}

and that renders all <p>s with justified text.

Another possibility is to define a class, like:

.just {text-align: justify;}

and then you style the paragraphs in question like:

<td class="just">text </td>

Note that NN 4.xx has problems with the inheritance of styles; that some NN4.xx browsers have a funny way to interpret "justify"; and that you have to have at least one blank space between the last character and the </p> tag, because otherwise NN 4.xx likes to justify even a three word half-sentence... also, some browsers do a pretty ugly job of rendering justified text, adding spaces between words, instead of spaces between letters, as with word-processing programs.

Why can @import be at the top only?

A style sheet that is imported into another one has a lower ranking in the cascading order: the importing style sheet overrides the imported one. Programmers may recognize this as the same model as in Java, Modula, Object-Pascal, Oberon and other modular programming languages.
However, there is a competing model, well-known to C programmers, where the imported material is not lower in rank, but is expanded in-place and becomes an integral part of the importing document.
By allowing @import only at the top of the style sheet, people that think in terms of the second model (although in principle incorrect) will still get the expected results: as long as the @import is before any other overriding rules, the two models are equivalent.
Btw. In all the modular languages import statements are only allowed at the top. In C, the #include can be put elsewhere, but in practice everybody always puts it at the top. So there may not be that much need to allow @import elsewhere in the style sheet either.

 

Colored Horizontal Rule?

You can apply styles to Horizontal Rules <HR> in IE without problems, but NN4.xx can only render the silvery HR. But there is a way around it:

.rule {border-top-width: 1px;
border-top-style: solid;
border-color: #FF0000;
margin: 0px 2%;}

that, applied to a div, should give you a red HR in NN4.xx and IE, with a 2% gap on the left and right side.

CSSharky Logo
On this page is an Example of a coloured 'Horizontal Rule'.
Update:
Thanks to Matt Del Vecchio here is an improved format for the Horizontal Rule:

hr { height:0px;
border:0px;
border-top:1px solid #ff1493; }

....this works in both IE and Netscape. It tells the browser to not render the hr rule itself, and then sets a 1px border, which looks just how most folks want to render the hr rule. It uses the <hr> element and that is better than writing your own class as all devices will know what to do with an <hr> tag.

 

Do URL's have quotes or not?

Double or single quotes in URLs are optional. The tree following examples are equally valid:

BODY {background: url(pics/wave.png) blue}
BODY {background: url("pics/wave.png") blue}
BODY {background: url('pics/wave.png') blue}

 

To what are partial URLs relative?

Partial URLs are relative to the source of the style sheet. The style sheet source can either be linked or embedded. To which source partial URLs are relative to depends on their occurrence.
If a partial URL occurs in a linked style sheet then it is relative to the linked style sheet. The URL of the linked style sheet is the URL of the directory where the sheet is kept.
If a partial URL occurs in an embedded style sheet then it is relative to the embedded style sheet. The URL of the embedded style sheet is the URL of the HTML document in which the sheet is embedded.
Note that Navigator 4.x treats partial URLs as being relative to the HTML document, regardless of the place where the partial URL occurs. This is a serious bug which forces most authors to use absolute URLs in their CSS.

What's the difference between 'class' and 'id'?

As a person, you may have an ID card - a passport, a driving license or whatever - which identifies you as a unique individual. It's the same with CSS. If you want to apply style to one element use 'id' (e.g. <div id="myid">). In the stylesheet, you identify an 'id' with a '#' ie. '#myid'...
As a person, if you are in a class, you are one of many. It's the same with CSS. If you want to apply the same style to more than one element, use 'class' (e.g. <div class="myclass">). In the stylesheet, you identify a 'class' with a '.' ie. '.myclass'...
If id's are more restrictive than classes, then why not just litter your page with classes? Well, I think the main thing is that it's simply wrong. You don't put headings in 'p' tags - you use 'h1', 'h2', etc. You don't (or shouldn't) make a list by writing asterisks or the little divider bar ( | ) - you use list tags ('ol'/'ul' + 'li') . You don't say that your footer is part of a class of elements called 'footer' - that's just stupid - you can't have more than one footer - it can't be a class. Of course, practically, the effect is about the same - the rules are applied - but that's not the point - it's semantically wrong to do it that way... However, if you try to give more than one element the same id, you will have problems - so don't do it.
An element may have an id and a class, but that's usually not necessary. You can also give an element two classes if you need to - like this : class="class1 class2". It can be very useful. Needless to say, you can't give an element two id's.
Another difference is to do with power. You can give an element an id and a class, but if any of the properties of the two conflict, the id style will win. Ids are more powerful than classes.
One more useful thing about id's is that they can be used as a link reference. Many people still think that you need named anchors to make links within a page, but that's simply not true - in fact, the name attribute is deprecated in XHTML except for in forms. One example of using id's as link references is this page. There are no named anchors on this page - the questions at the top of the page link to the id's of the divs that the answers are in.

 

I made a 10px-high div, but IE makes it 20px high...

Yeah
This problem sometimes comes up when you make a div just to contain the bottom border of a box, or something like that. In this situation, there's no text in the div, but IE won't let the height of the div be smaller than the line-height (which usually depends on the font-size). The answer is to set the font-size to zero.
CSS
# thediv {
font-size:0;
}

 

How do I place two paragraphs next to each other?

There are several ways to accomplish this effect, although each has its own benefits and drawbacks. We start with the simplest method of positioning two paragraphs next to each other.

<DIV style="float: left; width: 50%">Paragraph 1</DIV>
<DIV style="float: left; width: 50%">Paragraph 2</DIV>

Trickier is this example, which relies on positioning but does not suffer the vertical-overlap problems which plague many other positioning solutions. The problem is that it relies on an incorrect positioning implementation, and will break down dramatically in conformant browsers.

<P>
<SPAN STYLE="position: relative; left: 50%; width: 50%">
<SPAN STYLE="position: absolute; left: -100%; width: 100%">
Paragraph 1</SPAN>
Paragraph 2</SPAN>
</P>

If floating is not sufficient to your purposes, or you cannot accept display variances in older browsers, then it may be best to fall back to table-based solutions.

 

Can you use someone else's Style Sheet without permission?

This is a somewhat fuzzy issue. As with HTML tags, style sheet information is given using a special language syntax. Use of the language is not copyrighted, and the syntax itself does not convey any content - only rendering information.
It is not a great idea to reference an external style sheet on someone else's server. Doing this is like referencing an in-line image from someone else's server in your HTML document. This can end up overloading a server if too many pages all over the net reference the same item. It can't hurt to contact the author of a style sheet, if known, to discuss using the style sheet, but this may not be possible. In any case, a local copy should be created and used instead of referencing a remote copy.

 

I want my page fonts to look the same everywhere as in…
a) Why are my font sizes different in different browsers ?
b) Why are my font sizes different on different platforms ?

These questions represent the tip of the iceberg of a large topic about which whole essays have been written and a wide range of different views are held.
The WWW was originally devised to present the same content in different presentation situations and for a wide range of readers: on that basis, "looking the same" is not a design criterion, indeed different presentations would be expected to look different.
Some would have it that this original aim is no longer relevant, and that the purpose of web design is now to factor out the differences between display situations and put the author in control of the details of the presentation. Others point out that CSS was designed to give the reader a substantial amount of joint control over this process, and that this is desirable, for example to accommodate users with different visual acuity.
Reading of textual matter on a computer screen is quite a delicate business, what with the relatively coarse pixel structure of a computer display; even with a close knowledge of the display details, it isn't possible to achieve the detailed control that would be possible, say, on a printer. Whatever one's aims, the practical truth is that many of the efforts made to guarantee the precise result on the screen have seriously counterproductive side effects in a www situation.
The CSS specifications themselves recommend that authors should not use absolute size units in a situation where the properties of the display are unknown. There's a lot to be said for flexible design, that in an appropriate situation looks the way you had in mind, but still successfully conveys content and message in a wide range of other browsing situations.
And so, before looking at the technical detail of what can be specified, it's strongly suggested that you read some of those essays on web design, and reach your own conclusions as to the strengths and weaknesses of the medium, and how you can best exploit the strengths in a web environment, without falling foul of the weaknesses.

 

When is auto different from 0 in margin properties?

In vertical margins, auto is always equal to 0. In horizontal margins, auto is only equal to 0 if the width property is also auto. Here are three examples, assume that there is a <P> that is a child of<BODY>:

Example 1: auto value on the width.

BODY {width: 30em;}
P {width: auto; margin-left: auto; margin-right: auto;}

Since the width property is auto, the auto values of the two margins will be ignored. The result is a P that is 30em wide, with no margins.

Example 2: two auto margins

BODY {width: 30em;}
P {width: 20em; margin-left: auto; margin-right: auto;}

The P will be 20em wide and the remaining 10em will be divided between the two margins. Paragraphs will be indented 5em at both sides.

Example 3: one auto margin

BODY {width: 30em;}
P {width: 20em; margin-left: 2em; margin-right: auto;}

In this case, paragraphs are 20em wide and are indented 2em on the left side. Since the total width available is 30em, that means the right margin will be 8em.
Note that the default value of width is auto, so setting one or both margins to auto is only useful if you set the width to something other than auto at the same time.

 

How do I move the list bullet to the left/right?

CSS1 has no properties for setting margins or padding around the bullet of a list item and in most cases the position of the bullet is browser-dependent. This is especially true since most browsers disagreed on whether a bullet is found within the margin or padding of a list item.
In CSS2, properties were introduced to provide greater control over the placement of bullets (which CSS2 calls a "marker") but these were not widely supported by mid-2001 browsers. Here is an example of changing a marker's placement:
li:before {display: marker; marker-offset: 22px; content: url(triangle.jpg);}
In this example, a graphic of a triangle is inserted before the content of the li element, set to be a marker (through display: marker;), and given an offset of 22 pixels. Depending on the margin size of the list item, there may not be room for the marker to appear next to the list item's content.

 

How does a simple CSS style rule look ?

P { font-family: serif; font-size: 1.2em; }
Here we see a rule with a 'selector' P that has been given two style declarations, i.e. two 'property:value' pairs.
'font-family' and 'font-size' are properties of the content of element P , and these properties are assigned the values of 'serif' and '1.2em' respectively.
A colon ':' is the value assignment symbol in CSS, so using an equal sign '=' instead is an error and is required by the CSS specification to be ignored. Any browser that appears to honor this style is behaving improperly.
For length values a 'unit' is always needed and there shall never be any space between a number and its length unit.
A value given as e.g. '1.2 em' is an error and is required by the CSS specification to be ignored. Any browser that appears to honor this style is behaving improperly.
A semicolon ';' between declarations is required but it's also good "rule of thumb" to put a ';' even after the last declaration.
Finally, curly braces '{…}' group one or more declarations into a final CSS rule.

 

Why are there gaps above and below my form in IE?

A lot of the time, when you find gaps that you can't account for, they are due the default styles of different browsers - especially the margins and padding. IE gives forms some margins above and below forms while Firefox doesn't. It's like with lists - you'll find bigger padding and margins for lists in IE than in Firefox. Paragraph margins are different, as are the margins on heading tags (h1,h2, etc).

A good way to not get caught out by these problems is to set all margins and padding to zero at the top of your style sheet and then add them as and when you feel the a need for them, in that way, any margins and padding will be the same in different browsers.

CSS
* {
margin:0;
padding:0;
}

 

If one were to set Text and Link colors using a style sheet, should one also define the background colors for these elements as well?

It is generally true that you should give background or background-color a value, but not necessarily a color value. E.g., if the document has a background image, you would "highlight" all links if you give them a background color.

body { background-image: url(light-texture.png) #FFF; color: #000 }
a:link, a:visited, a:active { color: #00F; background-color: transparent; }

By setting the background-image explicitly to transparent, you lower the risk of another rule in the cascade giving links a background that would highlight them.

 

How do you override the underlining of hyperlinks?

CSS has the ability to explicitly control the status of underlining for an element - even for hyperlinks. The correct way to do this in an external or document-level style sheet is:
A { text-decoration: none }
and within an anchor element as:
<a HREF="example.htm" STYLE="text-decoration: none">link text</a>

Note: The underlining of hyperlinks is a long-standing visual convention that assists in the visual identification of active hyperlink areas. Many users expect to see hyperlinks underlined and may be confused and/or irritated if they are not used. User-defined style sheets address this user need by allowing the user to have final control over this feature. Unfortunately, wide support for this ability does not yet exist.