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.
Page Numbers :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
