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