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