Three selectors: h1, .warning and #footer, what they
do ?
An element points at a HTML-tag somewhere on your page.
In the example above we want to style the <h1>-tag. Note
that using an element like that affects all tags with
that name, so using p { margin-left: 100px; } gives all
<p>-tags a left-margin.
Using a class is just as simple. When writing .your_class
you style all tags with a class with the name “your_class”.
In the example above we have .warning which will style
e.g. <div class="warning"> and <em class="warning">,
that is, any element with the class warning. Classes are
used when you want to style just a few of your tags in a
way, perhaps you want some of your links red? Add a
class to all those links.
You need one more building block: the id. This time you
style an element with the attribute “id” set to the id
you have chosen. Ids work exactly like classes except
for one thing; you can only have one id with a certain
name in each of your HTML documents. In the example
above we style <div id="footer">. If you look at the
example it does make sense: a HTML document may contain
several warnings but only one footer. Ids should be used
when you want to style just one specific tag.
Using those three building blocks will take you far but
when you get to more advanced layouts you might want to
combine the building blocks into more advanced
selectors. Just to give you two examples of what you can
do: em.warning to style only those <em>-tags with the
class .warning set. You can also use #footer a to style
only the links that are nested inside the tag with id
“footer.
Each of the selectors has a set of declarations tied to
them. Each declaration has a property, describing what
we want to change and a value, what we should change it
to. An example: a { color: Blue; font-size: 3em; }. You
have the selector a there, so all links in your document
will be styled. We have two declarations: color: Blue
and font-size: 3em;. Lastly each declaration consists of
two parts: the property color and the value Blue.
there is a LOT of things you can style and play with.
Additionally (close to) all tags are equal in CSS, so
you can set e.g. borders and colors of any element just
like you could with a table if you used only HTML.
What are Style Sheets?
Style Sheets are templates, very similar to templates in
desktop publishing applications, containing a collection
of rules declared to various selectors (elements).
What is CSS rule 'ruleset'?
There are two types of CSS rules: ruleset and at-rule.
Ruleset identifies selector or selectors and declares
style which is to be attached to that selector or
selectors. For example P {text-indent: 10pt} is a CSS
rule. CSS rulesets consist of two parts: selector, e.g.
P and declaration, e.g. {text-indent: 10pt}.
P {text-indent: 10pt} - CSS rule (ruleset)
{text-indent: 10pt} - CSS declaration
text-indent - CSS property
10pt - CSS value
'Fixed' Background?
There is the possibility to use the HTML tag
bgproperties="fixed", but that is IE proprietary, and
dependent upon the 'background' attribute (deprecated in
HTML4).
With CSS, you can declare the background like:
BODY {
font-family : "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
background-image: url(images/yourimage.gif);
background-repeat: no-repeat; /*no-tiling background*/
background-position: center;
background-attachment: fixed;
background-color: #hexcolor;
color : #hexcolor;
margin: 10px;
}
that shows a background-image in the center of the
<BODY> element, non-scrolling and non-repeating - in IE
or NN6. NN 4.xx gets the non-repeat-part right, but
stuffs the picture in the upper left corner and scrolls
...
What is embedded style? How to link?
Embedded style is the style attached to one specific
document. The style information is specified as a
content of the STYLE element inside the HEAD element and
will apply to the entire document.
<HEAD>
<STYLE TYPE="text/css">
<!--
P {text-indent: 10pt}
-->
</STYLE>
</HEAD>
Note: The styling rules are written as a HTML comment,
that is, between <!-- and --> to hide the content in
browsers without CSS support which would otherwise be
displayed.
What is ID selector?
ID selector is an individually identified (named)
selector to which a specific style is declared. Using
the ID attribute the declared style can then be
associated with one and only one HTML element per
document as to differentiate it from all other elements.
ID selectors are created by a character # followed by
the selector's name. The name can contain characters
a-z, A-Z, digits 0-9, period, hyphen, escaped
characters, Unicode characters 161-255, as well as any
Unicode character as a numeric code, however, they
cannot start with a dash or a digit.
#abc123 {color: red; background: black}
<P ID=abc123>This and only this element can be
identified as abc123 </P>
What is contextual selector?
Contextual selector is a selector that addresses
specific occurrence of an element. It is a string of
individual selectors separated by white space, a search
pattern, where only the last element in the pattern is
addressed providing it matches the specified context.
TD P CODE {color: red}
The element CODE will be displayed in red but only if it
occurs in the context of the element P which must occur
in the context of the element TD.
TD P CODE, H1 EM {color: red}
The element CODE will be displayed in red as described
above AND the element EM will also be red but only if it
occurs in the context of H1
P .footnote {color: red}
Any element with CLASS footnote will be red but only if
it occurs in the context of P
P .footnote [lang]{color: red}
Any element with attribute LANG will be red but only if
it is classed as "footnote" and occurs in the context of
P
How do I have a background image that isn't tiled?
Specify the background-repeat property as no-repeat. You
can also use the background property as a shortcut for
specifying multiple background-* properties at once.
Here's an example:
BODY {background: #FFF url(watermark.jpg) no-repeat;}
What does \ABCD (and \ABCDE) mean?
CSS allows Unicode characters to be entered by number.
For example, if a CLASS value in some Russian document
contains Cyrillic letters EL PE (Unicode numbers 041B
and 041F) and you want to write a style rule for that
class, you can put that letter into the style sheet by
writing:
.\041B\041F {font-style: italic;}
This works on all keyboards, so you don't need a
Cyrillic keyboard to write CLASS names in Russian or
another language that uses that script.
The digits and letters after the backslash (\) are a
hexadecimal number. Hexadecimal numbers are made from
ordinary digits and the letters A to F (or a to f).
Unicode numbers consist of four such digits.
If the number starts with a 0, you may omit it. The
above could also be written as:
.\41B\41F {font-style: italic;}
But be careful if the next letter after the three digits
is also a digit or a letter a to f! This is OK:
.\41B-\41F, since the dash (-) cannot be mistaken for a
hexadecimal digit, but .\41B9\41F is only two letters,
not three.
Four digits is the maximum, however, so if you write:
.\041B9\041F {font-style: italic;}
Page Numbers :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
