, you should just write
. The space in front of the "/" is required for compatibility in some browsers. In XHTML, each start tag requires an end tag. In the older, more lenient HTML, a few end tags, e.g., , were optional in some cases. XHTML is more picky in its syntax, but also has much better error checking. I recommend following the XHTML syntax and always including the end tag. Tag Nesting --- ------- Tags can be nested, i.e., the data within an element delimited by a start/end tag pair might have further tags within. For example.
This Is My Heading
The outer tag provides some characteristics for the data delimited
by that tag. But the inner tag provides its own characteristics
for the subset of the data it delimits, possibly overriding the
characteristics associated with the outer tag.
For example, in the heading above you might have specified that the text
in the h1 header should be green, but that the text delimited by the
tag be red, overriding the green specification for . Then
the "This Is" and "Heading" text would be green, but the "My" text would
be red.
Nested elements are said to have an ancestor-descendant relationship.
The closest nested elements have a parent-child relationship. The
closest nesting (outer) element of the current element is its parent; an
element has only one parent. Each of the closest nested inner elements
is a child of that parent. There can be more than one child, but they
all must be at the same level of nesting. (See diagram below.) The
nesting can continue to any depth.
For example, you could have a division containing an ordered list
containing a list item containing a paragraph containing an image. The
image is a descendant to all the elements containing it (division,
ordered list, list item, and paragraph). However, it is a child only to
the paragraph. This can be important for CSS selectors discussed below.
Whereas parent and child refer to the closest nesting relationship, the
terms ancestor and decendant are more general and can be used for
relationships that are one or more nestings from the element in
question.
To give a concrete example, suppose A thru K are elements (such as
paragraphs, headings, divisions, spans, lists, images, etc.) In the
diagram below the notation C [ D E ... ] means element C has a nest
within it containing elements D, E, etc., e.g., it is a division
containing several paragraphs. Thus in the diagram C contains D and E;
E contains F, G, and H; H contains I and J; and J contains K. Let's
focus on H to show how the terminology works.
H is the parent of I and J (they are in the nest immediately below H).
I and J are each a child of H (H is immediately above them).
I and J are siblings (they are at the same level in the same nest).
I is the first-child of H (it is the first element encountered in H's nest).
Both C and E are ancestors of H (they start the nests that H is within).
I, J, and K are descendants of H.
|--------------------------------------|
| |-----------------------------| |
| | |---------------------| | |
| | | |-----------| | | |
| | | | |---| | | | |
[A B C [ D E [ F G H [ I J [ K ] ] ] ] ]
*
This follows down just one chain of relatives. H might well have
another nest below it, say one started by another imbedded , with
another chain thru that nest.
If a child tag does not override a characteristic specified for the
parent, the parent's characteristic is inherited by the child. In the
example at the start of this section, if font size is not specified
for the tag, the same font size will be used for the text within
the span as is used for the rest of the heading, i.e., what was
specified for the tag.
Spacing
-------
HTML and CSS don't really care much about spacing in the source code,
either before the start of the text on a line, or between tags on a
line, i.e., in the data itself, or between parts of a tag with
parameters, or blank lines in the source file. There are few
exceptions. You could code your web page as one long, humongous line
and it would still work. However it is much neater to put things on
separate lines and use some indentation and blank lines to clarify your
intent to human readers (including yourself), even though all this will
be ignored by the browser.
Also, you may carefully space parts of a paragraph in the source code
and think this spacing will be preserved in the display. Wrong! The
browser will remove all extraneous spaces for the final display. If you
really do want to preserve spacing, there is a special tag, , that
lets you do this, but then you are totally responsible for the spacing
of that data. For example,
A B C
will display as A B C
A B C
will display as A B C
is useful if you want to display a simple text table where you
want the column alignments to be preserved. For example,
A B C D
--- --- --- ---
ant bear cat dog
aaa bb c dddddd
Character Entities
--------- --------
Some characters have dual meanings: the character may be either data or
it may be control information. The browser needs to be told how to
interpret the character. By specially coding the data character as a
character sequence (a "character entity") you unambiguously tell the
browser your intent for that character. Thus when the browser sees a
"<", it starts looking for a tag because a "<" character starts each
tag. On the other hand, if the browser sees the character sequence
"<" the browser displays a "<" character and does not start any tag
search processing.
In a similar way, you can force the browser to display ">" and "&" in
places where those characters might be misinterpreted by the browser as
being part of a tag or as part of a character entity. The associated
character entities are ">" for ">" and "&" for "&". There are
also character entities to display many other special characters, e,g.,
see http://www.elizabethcastro.com/html/extras/entities.html.
Spaces are also handled specially by the browser, as was described
above. Although the browsers's normal processing is to eliminate extra
spaces, you can tell it to keep a space by using the special
six-character sequence " " (without the quotes) in places where you
require an extra space to be kept. Such a "non-breaking space" will
also prevent a line break when text is flowed at that location. You can
string together as many of these as you want, one for each required
space, e.g., to have three required spaces.
Upper/Lower Case
----------- ----
XHTML requires that tags and attributes be entered in lower case. In
contrast, the older, more lenient HTML allows mixed case or all upper
case for tags and attributes. I'd advise using the XHTML syntax. Of
course the case of your data delimited by the tags is important. So
these are different:
This is my data.
THIS is MY data.
General Document Structure
------- -------- ---------
The concept of nested tags is used to define the structure of the web
page document as a whole. The document is divided into a head section
and a body section. The head section contains a title and some general
control information, e.g., the style section containing CSS formatting
rules. The body is where most of the document resides, i.e., your data,
in particular. Below is a general skeleton that will apply to most
pages you will create. Most of your work will be in the body section.
You can just copy something like this as a template and then fill in the
blanks.
In the following general document structure, note the pairing of the
start and end tags and the nesting of tags. Note also the two main
sections: head and body. Spacing and indentation were done here just to
emphasize the structure; the browser ignores spacing.
...your web page title goes here...
...your main web page heading goes here...
...almost everything you code will be right here...
In fact you can have multiple style sections in the heading, with each
one focused on a type of output medium, e.g., screen or printer. This
can be extremely useful, allowing you to format the same data one way
for a PC display and another way for printing.
In addition to the above, there are usually some boilerplate control
lines, e.g., DOCTYPE and meta. Just copy them from one of the working
files, e.g., Sample_HTML_CSS.htm, and stay within any XHTML restrictions
noted below.
Links (Hyperlinks)
----- ------------
Using the tag, a page lets a user link to (i.e., access) information
from some other location. That information can be either on the current
host computer or on some other computer, or it can be information
located on some other part of the current page. The tag provides a
"hot spot", which when selected (e.g., clicked on with a mouse) results
in the access of the linked information. The access might result in
displaying static information, or playing an audio or video file, or
some other action appropriate for the information. Here is the general
format for the tag:
hot spot
The location specifies where the information is to be found. It can be
either an absolute location, e.g., an internet URL, or can be relative
to some page. The hot spot data can be text or even an image. The
attributes can be used to tailor the appearance of the "hot spot" data,
e.g., to color it, underline it, change the font size or weight compared
to other nearby text, etc. An tag using the "id" attribute can be
used to identify a place in the current page to which some other
tag can link.
Seeing It in Action
------ -- -- ------
The easiest way to see what is going on is to bring up a simple web page
on your browser. Observe the way the data is formatted. Then look at
the source code that the browser processed to produce the display. It
is very easy to view the source code with most browsers. Just right
click on some blank part of the web page display and choose View Source,
or View Page Source, or View Frame Source, etc. The wording of the menu
item depends on the browser used and the type of page being displayed.
Some browsers make it even easier, e.g., with Firefox you can display
the source code by just clicking Ctrl-U (the Ctrl key + the U key).
Firefox also has built-in Web Developer tools, e.g., the Inspector, to
let you examine a displayed page and shows you exactly what tags and
parameters were used to produce any piece of the display you select. It
is very educational.
Once you learn how to examine web pages with View Source, you will find
it very helpful for writing your own source code. If you see something
displayed a desirable way in a page that someone else has written, you
can just look at their source code and try to duplicate it in your own
file. Sometimes this is easier said than done, but it at least gives
you a start. Because it is so easy to modify source code and then
redisplay it to see what display changes result from the source code
changes, it is easy to experiment until you get what you want.
The general process will be something like this:
1) Edit your source file to make some change.
2) Save the source file, e.g., with Ctrl-S.
3) Display the page in your browser; or if the page is already
displayed, refresh the browser display, e.g., with the F5 key.
4) See what display changes the edit has produced.
5) If desired, make more changes and repeat from step 1.
Be sure not to leave out either the source file save in step 2 or the
browser display refresh in step 3. Otherwise, you may make a change to
the source file and then wonder why the change does not appear in the
browser display of that page. Until the save and refresh are done, the
browser continues to display the source file as it was before the latest
edit.
I have created a sample web page (Sample_HTML_CSS.htm) containing many
tag and CSS examples. You can view the source code using the procedures
described above. HTML and CSS have many parameters (attributes and
properties) to do all sorts of other formatting. I won't try to cover
those here in detail. Some good references are listed at the end of the
"Sample HTML and CSS Coding" file (Sample_HTML_CSS.htm).
I think your best strategy is first to get your data structured using
the simple tags described below. Then, following the examples of the
existing pages on the web site, you can put CSS rules in the style area
to experiment with until you get the formatting you desire.
Tag Summary
--- -------
Here is a summary of some of the most important tags. I won't give many
details; see the reference documents for those. There is at least one
example of the use of each tag in the Sample web page.
delimit the whole document.
delimit the head section.
delimit the title for the document. The title is
typically displayed at the top of the web page window.
Firefox also displays it in tabs. The title also
appears in bookmarks, search tool results, and many
other places, so make it meaningful and not too long.
The title element must be in the head section of the
document.
delimit the body section.
delimit heading text. The number indicates the amount of
emphasis the heading is meant to display (at least in the
default settings). H1 headings are usually big and bold.
The emphasis decreases all the way down to an h6 heading,
which may be hardly distinguishable from normal text in a
paragraph.
delimit paragraph text.
delimit preformatted text, which was discussed in the
Spacing section above.
delimit an ordered list, i.e., one whose list items are each
preceded by a designator that has an associated order, e.g.,
1., 2., 3. or a., b., c.
delimit an unordered list, i.e., one whose list items are
each preceded by a bullet or similar graphic.
delimit a specific list item in an ordered or unordered list.
delimit a definition list. Definition list items (in
contrast to ordered list items and unordered list items) each
consist of two parts, a term part and a definition part.
delimit the term part of the definition list item.
delimit the definition part of the definition list item.
delimit a table. Tables are a very flexible and
powerful part of HTML. They can also be very
complicated. I'll list here only a few of the
associated tags. A simple table has several rows and
columns with the intersection of a row and a column
called a cell. More complicated tables can have
differing numbers of cells for different rows or
columns in the same table. In each one of those cells
you can have paragraphs, lists, images, whatever. The
table rows can be organized into header, body, and
footer sections. Table columns can have special
headers and the whole table can have a caption.
delimit a row within a table. There can be multiple rows
with each row delimited by a pair of these tags.
delimit a cell within a row within a table. There can be
multiple cells in a row with each cell delimited by these
tags.
delimit a comment. This text is ignored by the browser. You
can put almost whatever you want in the "..." area, e.g., to
comment your code or to temporarily disable some code by
surrounding it with . However you cannot put a
comment within a comment, unfortunately.
provide a reference (a "link") to another document or to
another place in the current document. The delimited text then
becomes a "hot spot" which, when selected, causes the link to
be made, i.e., the browser displays the new document or new
area in the current document. The tag can also provide a
name for a location in the current document to which some other
code can link.
![]()
provides a link to an image file. Note there is no end tag.
delimit some division (block) of code. This is typically
used to apply some particular CSS formatting to that
specific block of code.
delimit a section of text, which can be as small as a
single character, to allow some particular CSS formatting
to be applied to it. This is similar to the tag,
but generally delimits a smaller amount of text.
delimits an in-line element; the element flows in-line with the
preceding and following text. In contrast, delimits a block of
text which starts on a new line and may be otherwise spatially separated
from preceding and following text, e.g., as a new paragraph is separated
from the text of a preceding paragraph. These characteristics can be
modified by specifying various CSS attributes for the and
tags.
tells the browser to start a new line at this point, i.e., this
causes a line break. Note there is no end tag.
tells the browser to draw a horizontal rule. Note there is no
end tag.
Emphasis
--------
A few tags are used to tell the browser to provide some sort of emphasis
or special formatting for the delimited text:
make the text bold.
make the text italic.
surround the text with quotation marks.
Before CSS was invented, HTML tags were used to do all the format
specifications. One heavily used tag for this was :
display the text with a particular font, color, size,
background, etc.
Now that CSS is available to handle most of the format specification for
documents, the font tag is deprecated in the current HTML specification,
i.e., people are advised not to use it. It still works today, but
support for it may disappear in the future, so it should be avoided.
Instead use CSS to do this job.
========================================================================
=============================== CSS ==================================
========================================================================
As described above, HTML is used to provide a logical structure for the
data in your web page. CSS is then used to specify the detailed
appearance of the displayed data: text color and alignment, backgrounds,
font size, margins and other spacing, borders, and much more.
Structure of CSS Rules
--------- -- --- -----
CSS formatting instructions are typically in the form of rules in the
style section which is in the head part of the document. See the
"General Document Structure" section above for a picture of this. Parts
of the CSS rules can also be placed elsewhere, e.g., in an HTML start
tag by using the style attribute, but that won't be covered here.
Here is a CSS rule:
h2 {color: white; background: green; width: 70%; text-align: center;}
This says: For each h2 heading, make the text white on a green
background, center the text in the heading, and make the width of the
heading area cover 70% of the width of the containing element, which may
be the page. In this case the green background will cover the 70% width
allocated for the heading and the text will be centered in that area,
taking up as much space as is required for the characters used for the
heading text.
The "h2" in the rule above is called the "selector" for the rule. The
selector specifies the set of HTML elements to which the rule applies.
The items inside the curly braces, e.g., "color: white;" each consist of
a "property", e.g., "color:", followed by a "value", e.g., "white".
Each property is terminated by a ":" and each value is terminated by a
";". A rule can contain as many of these property/value pairs as
desired. The whole curly-brace-delimited combination is called a
"declaration".
Spacing between the objects within the declaration is ignored. Provide
what spacing makes it most readable. If a rule is longer than desired,
for readability (for example), you can create a second rule with the
same selector and continue with that additional rule. Similarly you
could add a third rule, etc. Or you could just split the declaration
into multiple lines since the browser doesn't care about spacing and
line breaks. Thus the following are equivalent to the example rule
above:
h2 {color: white; background: green; width: 70%;}
h2 {text-align: center;}
or
h2 {color: white; background: green; width: 70%;
text-align: center;}
To summarize the terminology, a rule structure looks like this:
|----------- declaration -------------|
selector {property: value; ... property: value;}
|--------------------- rule -------------------|
More about Selectors
---- ----- ---------
The selector can consist of a single element type, as in the above h2
example, or it can be more complicated to broaden or narrow the scope of
the rule. For example, if the selector had been (note the commas),
h2, h4, h5 {color: red;}
that would say this rule should apply to all h2, h4, and h5 headers.
You can also narrow the scope in various ways. For example,
ul li {color: red;}
Note the space instead of a comma between the "ul" and "li" HTML tag
names. The rule in this example says the browser should color red the
text in ANY list element found somewhere inside an unordered list; the
list element might be many levels deep, e.g., inside an ordered list
inside an ordered list inside an unordered list inside an ordered list.
It does not have to be directly under the first or any other unordered
list; it just has to occur somewhere after some unordered list starts
and before it ends, and thus is within an unordered list.
The ordering of the HTML tags in the selector is important, i.e., "ul
li" vs. "li ul" in this example. This facility makes heavy use of the
nesting concept described in the "Tag Nesting" section above.
Sometimes you might want to restrict the rule to only a certain level of
nesting. As discussed above in the "ul li {color: red}" example, it is
possible that list items might be nested at various levels. Maybe you
have an ordered list inside an unordered list. With the rule above,
*all* list items within the scope of the unordered list, including those
under the subordinate ordered list, would be colored red. If you wanted
just the unordered list items to be red, then you can use the ">"
character to say only the direct children of the "ul" tag are affected
by the rule, not the grandchildren, or great grandchildren, etc. This
does what you want to restrict the scope of the rule:
ul > li {color: red;}
You can mix and match these ways of specifying a selector to achieve
whatever you want, e.g.,
div > ul li > p
Additionally, you can specify that a rule should apply to only a
certain named class of HTML tags, or even to just one specific tag
in the whole document.
Suppose for some of your h2 tags, you included a class="news"
attribute, e.g.,
News Item 1 ....
News Item 2 ....
etc.
Then if you had the following CSS rules in the style section (note the
"." before "news")
h2 {color: green;}
h2.news {color: red;}
the class="news" h2 headings would have red text and the other h2
headings would have green text.
To identify *one* specific element, you can use the "id" attribute and
name value in the start tag of that element, and the "#" (instead of
".") and name qualifier on the desired rule's selector. For example,
consider the following CSS rule in the style section:
p#security {color: red; font-weight: 700;}
and paragraph in the body of the document
If you are sloppy with password security, you will
be terminated immediately!
There are other (less commonly used) selector facilities defined by CSS,
which let you apply formatting to very specific items. See the CSS
reference documentation.
Comments
--------
You can add comments within the style section by surrounding the comment
with "/*" and "*/". For example, you can record comments about some
obscure formatting you might later forget. Comments can also be used to
temporarily disable a CSS rule so you can easily judge the effect on the
document of not having the rule.
Be careful to use only "/* ... */" comments in the style section, not
the "" characters used to make HTML comments.
Properties and Values
---------- --- ------
Some of the most commonly used CSS properties are described in a section
below. For some of these properties, a length value is required. For
example, a length value is needed to specify the width of a table, or
the amount of space an element should be indented from the left margin
of its parent element. There are various ways of specifying such a
value. I usually use an em value, e.g., "margin: 2em", or a pixel
value, e.g., "border: 4px solid black", or a percentage, e.g., "width:
60%". The size represented by an em depends on the font size used, but
is very roughly the space taken by an "M" in that font. The actual size
of one pixel depends on the hardware display and resolution used, but it
is roughly 1/100 of an inch. The percentage is in terms of the parent
element's size. For example, if a heading is given 50% of the width of
a division which previously had been given 80% of the width of the page,
the heading would be allocated 50% of the division width, i.e., 40% of
the page width, but within the division. For web pages destined for
printing, often pt is used for lengths, where one pt is 1/72 of an inch.
Some properties (e.g., color, background, and border) require a color
value to be specified. There are various ways to do this. One is to
specify the value as #rrggbb where the rr, gg, and bb are hexadecimal
numbers ranging from 00 to FF giving respectively the red, green, and
blue components of the color. Thus #000000 is black, #FFFFFF is white,
#FF0000 is red, and #800080 is purple. There are tables to show you
what colors correspond to what hexadecimal values; see the references at
the bottom of the "Sample HTML and CSS Coding" file
(Sample_HTML_CSS.htm). For some colors, a name is provided, e.g., "red"
or "aqua".
In HTML (but not XHTML?) a similar way to specify a color is using an
rgb(r,g,b) value, where r, g, and b are integers ranging from 0 to 255
(corresponding to the hexadecimal numbers 00 to FF). Another way is to
use the rgb(r,g,b) value but this time with percentages of red, green,
and blue, ranging from 0% to 100% for each color.
The following are equivalent, all indicating the color aqua, which has
no red and all green and blue in its color makeup.
h3 {color: #00FFFF;}
h3 {color: aqua;}
h3 {color: rgb(0,255,255);} Not in XHTML?
h3 {color: rgb(0%,100%,100%);} Not in XHTML?
Inheritance and Cascading
----------- --- ---------
The values of some (not all) properties can be passed from parent
element to child element. This is called inheritance. For example, if
you have a rule specifying that the text color for a division is red,
then the color for every paragraph element in that division (unless
overridden) will also be red, because the paragraph element is a child
of the division element. If this is not desired, you can selectively
override this inheritance for paragraphs for which you desire a
different text color.
One way to do such an override is to have a rule specifically designated
for an element, e.g., by a .name or #name qualifier, as described above.
If multiple ancestors specify conflicting values for a property for a
descendant element, the property value of the ancestor closest to the
descendant wins. For example, the direct parent wins over the
grandparent (the parent's direct parent).
All other things being equal, if multiple value specifications are made
for the same property for an element, the last one specified in the
source code will apply. So if you p {color: red;} in the style section
followed sometime later by p {color: blue;}, then blue will be used.
In addition to having CSS rules in the style section(s) of the source
file, there are ways to have rules in other files and link/import them.
This whole intricate way in which property values are determined is
called "cascading", from which we get Cascading Style Sheets, CSS. Even
though it sounds complicated, it is very flexible and allows you to
specify very elaborate formats with very little coding and to isolate
that coding to a small part of your source code.
The Box Model of an Element
--- --- ----- -- -- -------
Each document element occupies a rectangular box on the page. The
innermost part of the box is the content, normally the text, which has a
width and height. Surrounding this is padding; it, like the content,
uses the background color for its background. Outside of the padding is
a border, which can have its own color(s), and outside the border is a
margin area, which has the background color of the direct parent
element. The padding, border, and margin sizes (thickness) can all be
0. In fact, the thickness of each of the four sides (top, left, right,
bottom) of the padding, border and margin areas can be specified
independently. Thus you have great flexibility in specifying how you
want things to appear.
Here is a diagram of the box model of an element showing how the
element's width is calculated:
+----------------------------------+
| margin |
| +-----------------------------+ |
| | border | |
| | +---------------------+ | |
| | | padding | | |
| | | +---------------+ | | |
| | | | content | | | |
| | | | | | | |
| | | |<---(width)--->| | | |
| | | +---------------+ | | |
| | | | | |
| | +---------------------+ | |
| | | |
| +-----------------------------+ |
| |
|<------- (NOT "width"!) --------->|
+----------------------------------+
To reduce typing, there are various shortcuts for specifying the four
sizes (one for each side) for the padding, border, and margin
properties. You can specify them individually, e.g., padding-top: .5em.
You can specify all four values in the order top, right, bottom, left as
in margin: 1em 2em 3em 1.5em. You can specify just one number if all
four sides have the same value, e.g., padding: 0. And there are other
shortcuts I won't list here.
For example you can have a rule like this for a division:
div {padding: 2em 3em 2em 4.8em; margin-top: 10em; border: solid 1px black;}
This means the division block will have padding of 2em on the top, 3em
on the right, 2em on the bottom, and 4.8em on the left. The border
will be a 1px solid black line on all four sides. Then there will be a
margin of at least 10em between the div and the next element above it.
The margins on the other three sides are not explicitly specified here,
so they will be 0 by default if they were not specified in other rules
for the division.
A topic that often causes confusion is width. The CSS "width" property,
e.g., in "div {width: 50em;}", refers to the width of the space
allocated to the content part of the element, not the edge-to-edge size
of the whole element. That edge-to-edge size of the element is the
content width + the left and right padding around it + the left and
right border space + the left and right margin space. See the diagram
above. There is no specific CSS property of this element for that size.
Earlier releases of Internet Explorer did not get this right.
In general the browser displays the element boxes in the same order they
appear in the source file. However CSS provides facilities to move an
element out of its normal position, e.g., to display it at some fixed
position on the screen or to shift it relative to its parent element or
to the base. Elements can also be hidden, e.g., visible on a display
but invisible on a printed document. The space normally used by that
element optionally can be kept or can be made available for use by other
elements. Such hiding/displaying can even be done dynamically, e.g.,
when a mouse cursor is put at a certain screen position. All in all,
you have a great deal of flexibility in how you can have things appear.
Some Commonly Used Properties
---- -------- ---- ----------
Much of your CSS styling can be done by using just the properties and
values below. There are also a number of other less commonly used
properties and values. These are described in the reference documents
listed at the end of the "Sample HTML and CSS Coding" file
(Sample_HTML_CSS.htm).
Some properties are called "shorthand properties". They let you group
together a number of individual properties in one property. For example
background can have values for color, image, position, etc. These could
be individually specified using background-color, background-image,
background-position, etc. Just saying "background: red;" is the same as
saying "background-color: red;" and using the defaults for the other
background properties. This just saves some typing if changing the
background color was the only thing desired. See the reference
documents for details.
color: value specifies text color.
background: value typically specifies just the color of the element's
background (strictly speaking this is background-color),
but it can specify other properties for more complicated
backgrounds, e.g., an image and its position.
width: value specifies the width of the content area.
height: value specifies the height of the content area.
padding: value(s) specify the width(s) of the padding side(s).
margin: value(s) specify the width(s) of the margin side(s).
border: value specifies the width of the four border sides; you can
also specify the border color and style, e.g., none, solid,
dotted, dashed, and double. If you want different
characteristics for the various sides, you can use other
properties, e.g., border-left and border-top-width. There are
a number of such properties to group specifications in various
ways.
font: values specify the font family, e.g., helvetica or courier, the
font weight, e.g., 100 (lightest) thru 900 (heaviest) with 400 =
"normal and 700 = "bold, the font size in pixels or as a
percentage of the font size used by the parent, and the font
style, e.g., italic. These properties can all be specified on
one font property or they can be specified individually, e.g.,
"font-weight: 700;" to produce a bold font. For font-family you
can specify multiple values separated by commas. Working from
the left end of this list, the browser will use the first font
family found installed on the PC.
float: values can be "left" or "right" to cause the element to be
floated toward the left or right side of the page. The
following elements, e.g., paragraphs, can then bend around that
element.
clear: values of "left", "right", or "both" prevent elements from being
floated to the left, right, or either side of this element.
list-style-type: value specifies the type of marker used for this list.
For example, for an unordered list you normally get a bullet for
each list element, but with this property you can say "none" to
prevent displaying the glyph or say "square" to change the shape
of the glyph. For an ordered list, the outermost list normally
displays list items as 1., 2., etc. Specifying a
list-style-type value of "upper-latin" causes the list items to
be started with A., B., etc. There are many other values you
can choose from or have the system chose automatically to
distinguish various levels of imbedded lists.
text-align: values of "left", "right", and "center" specify the
horizontal alignment of text in the content box.
text-decoration: value of "underline" underlines the text.
Other Considerations
----- --------------
Different browsers may display the same source file differently.
Sometimes this is because one or the other browser has a bug. It can
also occur because the browsers assume different defaults (which may
also be a bug if the CSS standard specifies a required default
adequately and a browser doesn't implement this). If you are lucky, you
can solve this sort of problem by explicitly specifying some property
values instead of letting the browsers use their (possibly differing)
default values.
Jeff Knauth
--------------------------------- End ----------------------------------
. Then
the "This Is" and "Heading" text would be green, but the "My" text would
be red.
Nested elements are said to have an ancestor-descendant relationship.
The closest nested elements have a parent-child relationship. The
closest nesting (outer) element of the current element is its parent; an
element has only one parent. Each of the closest nested inner elements
is a child of that parent. There can be more than one child, but they
all must be at the same level of nesting. (See diagram below.) The
nesting can continue to any depth.
For example, you could have a division containing an ordered list
containing a list item containing a paragraph containing an image. The
image is a descendant to all the elements containing it (division,
ordered list, list item, and paragraph). However, it is a child only to
the paragraph. This can be important for CSS selectors discussed below.
Whereas parent and child refer to the closest nesting relationship, the
terms ancestor and decendant are more general and can be used for
relationships that are one or more nestings from the element in
question.
To give a concrete example, suppose A thru K are elements (such as
paragraphs, headings, divisions, spans, lists, images, etc.) In the
diagram below the notation C [ D E ... ] means element C has a nest
within it containing elements D, E, etc., e.g., it is a division
containing several paragraphs. Thus in the diagram C contains D and E;
E contains F, G, and H; H contains I and J; and J contains K. Let's
focus on H to show how the terminology works.
H is the parent of I and J (they are in the nest immediately below H).
I and J are each a child of H (H is immediately above them).
I and J are siblings (they are at the same level in the same nest).
I is the first-child of H (it is the first element encountered in H's nest).
Both C and E are ancestors of H (they start the nests that H is within).
I, J, and K are descendants of H.
|--------------------------------------|
| |-----------------------------| |
| | |---------------------| | |
| | | |-----------| | | |
| | | | |---| | | | |
[A B C [ D E [ F G H [ I J [ K ] ] ] ] ]
*
This follows down just one chain of relatives. H might well have
another nest below it, say one started by another imbedded , with
another chain thru that nest.
If a child tag does not override a characteristic specified for the
parent, the parent's characteristic is inherited by the child. In the
example at the start of this section, if font size is not specified
for the tag, the same font size will be used for the text within
the span as is used for the rest of the heading, i.e., what was
specified for the tag.
Spacing
-------
HTML and CSS don't really care much about spacing in the source code,
either before the start of the text on a line, or between tags on a
line, i.e., in the data itself, or between parts of a tag with
parameters, or blank lines in the source file. There are few
exceptions. You could code your web page as one long, humongous line
and it would still work. However it is much neater to put things on
separate lines and use some indentation and blank lines to clarify your
intent to human readers (including yourself), even though all this will
be ignored by the browser.
Also, you may carefully space parts of a paragraph in the source code
and think this spacing will be preserved in the display. Wrong! The
browser will remove all extraneous spaces for the final display. If you
really do want to preserve spacing, there is a special tag, , that
lets you do this, but then you are totally responsible for the spacing
of that data. For example,
A B C
will display as A B C
A B C
will display as A B C
is useful if you want to display a simple text table where you
want the column alignments to be preserved. For example,
A B C D
--- --- --- ---
ant bear cat dog
aaa bb c dddddd
Character Entities
--------- --------
Some characters have dual meanings: the character may be either data or
it may be control information. The browser needs to be told how to
interpret the character. By specially coding the data character as a
character sequence (a "character entity") you unambiguously tell the
browser your intent for that character. Thus when the browser sees a
"<", it starts looking for a tag because a "<" character starts each
tag. On the other hand, if the browser sees the character sequence
"<" the browser displays a "<" character and does not start any tag
search processing.
In a similar way, you can force the browser to display ">" and "&" in
places where those characters might be misinterpreted by the browser as
being part of a tag or as part of a character entity. The associated
character entities are ">" for ">" and "&" for "&". There are
also character entities to display many other special characters, e,g.,
see http://www.elizabethcastro.com/html/extras/entities.html.
Spaces are also handled specially by the browser, as was described
above. Although the browsers's normal processing is to eliminate extra
spaces, you can tell it to keep a space by using the special
six-character sequence " " (without the quotes) in places where you
require an extra space to be kept. Such a "non-breaking space" will
also prevent a line break when text is flowed at that location. You can
string together as many of these as you want, one for each required
space, e.g., to have three required spaces.
Upper/Lower Case
----------- ----
XHTML requires that tags and attributes be entered in lower case. In
contrast, the older, more lenient HTML allows mixed case or all upper
case for tags and attributes. I'd advise using the XHTML syntax. Of
course the case of your data delimited by the tags is important. So
these are different:
This is my data.
THIS is MY data.
General Document Structure
------- -------- ---------
The concept of nested tags is used to define the structure of the web
page document as a whole. The document is divided into a head section
and a body section. The head section contains a title and some general
control information, e.g., the style section containing CSS formatting
rules. The body is where most of the document resides, i.e., your data,
in particular. Below is a general skeleton that will apply to most
pages you will create. Most of your work will be in the body section.
You can just copy something like this as a template and then fill in the
blanks.
In the following general document structure, note the pairing of the
start and end tags and the nesting of tags. Note also the two main
sections: head and body. Spacing and indentation were done here just to
emphasize the structure; the browser ignores spacing.
...your web page title goes here...
...your main web page heading goes here...
...almost everything you code will be right here...
In fact you can have multiple style sections in the heading, with each
one focused on a type of output medium, e.g., screen or printer. This
can be extremely useful, allowing you to format the same data one way
for a PC display and another way for printing.
In addition to the above, there are usually some boilerplate control
lines, e.g., DOCTYPE and meta. Just copy them from one of the working
files, e.g., Sample_HTML_CSS.htm, and stay within any XHTML restrictions
noted below.
Links (Hyperlinks)
----- ------------
Using the tag, a page lets a user link to (i.e., access) information
from some other location. That information can be either on the current
host computer or on some other computer, or it can be information
located on some other part of the current page. The tag provides a
"hot spot", which when selected (e.g., clicked on with a mouse) results
in the access of the linked information. The access might result in
displaying static information, or playing an audio or video file, or
some other action appropriate for the information. Here is the general
format for the tag:
hot spot
The location specifies where the information is to be found. It can be
either an absolute location, e.g., an internet URL, or can be relative
to some page. The hot spot data can be text or even an image. The
attributes can be used to tailor the appearance of the "hot spot" data,
e.g., to color it, underline it, change the font size or weight compared
to other nearby text, etc. An tag using the "id" attribute can be
used to identify a place in the current page to which some other
tag can link.
Seeing It in Action
------ -- -- ------
The easiest way to see what is going on is to bring up a simple web page
on your browser. Observe the way the data is formatted. Then look at
the source code that the browser processed to produce the display. It
is very easy to view the source code with most browsers. Just right
click on some blank part of the web page display and choose View Source,
or View Page Source, or View Frame Source, etc. The wording of the menu
item depends on the browser used and the type of page being displayed.
Some browsers make it even easier, e.g., with Firefox you can display
the source code by just clicking Ctrl-U (the Ctrl key + the U key).
Firefox also has built-in Web Developer tools, e.g., the Inspector, to
let you examine a displayed page and shows you exactly what tags and
parameters were used to produce any piece of the display you select. It
is very educational.
Once you learn how to examine web pages with View Source, you will find
it very helpful for writing your own source code. If you see something
displayed a desirable way in a page that someone else has written, you
can just look at their source code and try to duplicate it in your own
file. Sometimes this is easier said than done, but it at least gives
you a start. Because it is so easy to modify source code and then
redisplay it to see what display changes result from the source code
changes, it is easy to experiment until you get what you want.
The general process will be something like this:
1) Edit your source file to make some change.
2) Save the source file, e.g., with Ctrl-S.
3) Display the page in your browser; or if the page is already
displayed, refresh the browser display, e.g., with the F5 key.
4) See what display changes the edit has produced.
5) If desired, make more changes and repeat from step 1.
Be sure not to leave out either the source file save in step 2 or the
browser display refresh in step 3. Otherwise, you may make a change to
the source file and then wonder why the change does not appear in the
browser display of that page. Until the save and refresh are done, the
browser continues to display the source file as it was before the latest
edit.
I have created a sample web page (Sample_HTML_CSS.htm) containing many
tag and CSS examples. You can view the source code using the procedures
described above. HTML and CSS have many parameters (attributes and
properties) to do all sorts of other formatting. I won't try to cover
those here in detail. Some good references are listed at the end of the
"Sample HTML and CSS Coding" file (Sample_HTML_CSS.htm).
I think your best strategy is first to get your data structured using
the simple tags described below. Then, following the examples of the
existing pages on the web site, you can put CSS rules in the style area
to experiment with until you get the formatting you desire.
Tag Summary
--- -------
Here is a summary of some of the most important tags. I won't give many
details; see the reference documents for those. There is at least one
example of the use of each tag in the Sample web page.
delimit the whole document.
delimit the head section.
delimit the title for the document. The title is
typically displayed at the top of the web page window.
Firefox also displays it in tabs. The title also
appears in bookmarks, search tool results, and many
other places, so make it meaningful and not too long.
The title element must be in the head section of the
document.
delimit the body section.
delimit heading text. The number indicates the amount of
emphasis the heading is meant to display (at least in the
default settings). H1 headings are usually big and bold.
The emphasis decreases all the way down to an h6 heading,
which may be hardly distinguishable from normal text in a
paragraph.
delimit paragraph text.
delimit preformatted text, which was discussed in the
Spacing section above.
delimit an ordered list, i.e., one whose list items are each
preceded by a designator that has an associated order, e.g.,
1., 2., 3. or a., b., c.
delimit an unordered list, i.e., one whose list items are
each preceded by a bullet or similar graphic.
delimit a specific list item in an ordered or unordered list.
delimit a definition list. Definition list items (in
contrast to ordered list items and unordered list items) each
consist of two parts, a term part and a definition part.
delimit the term part of the definition list item.
delimit the definition part of the definition list item.
delimit a table. Tables are a very flexible and
powerful part of HTML. They can also be very
complicated. I'll list here only a few of the
associated tags. A simple table has several rows and
columns with the intersection of a row and a column
called a cell. More complicated tables can have
differing numbers of cells for different rows or
columns in the same table. In each one of those cells
you can have paragraphs, lists, images, whatever. The
table rows can be organized into header, body, and
footer sections. Table columns can have special
headers and the whole table can have a caption.
delimit a row within a table. There can be multiple rows
with each row delimited by a pair of these tags.
delimit a cell within a row within a table. There can be
multiple cells in a row with each cell delimited by these
tags.
delimit a comment. This text is ignored by the browser. You
can put almost whatever you want in the "..." area, e.g., to
comment your code or to temporarily disable some code by
surrounding it with . However you cannot put a
comment within a comment, unfortunately.
provide a reference (a "link") to another document or to
another place in the current document. The delimited text then
becomes a "hot spot" which, when selected, causes the link to
be made, i.e., the browser displays the new document or new
area in the current document. The tag can also provide a
name for a location in the current document to which some other
code can link.
![]()
provides a link to an image file. Note there is no end tag.
delimit some division (block) of code. This is typically
used to apply some particular CSS formatting to that
specific block of code.
delimit a section of text, which can be as small as a
single character, to allow some particular CSS formatting
to be applied to it. This is similar to the tag,
but generally delimits a smaller amount of text.
delimits an in-line element; the element flows in-line with the
preceding and following text. In contrast, delimits a block of
text which starts on a new line and may be otherwise spatially separated
from preceding and following text, e.g., as a new paragraph is separated
from the text of a preceding paragraph. These characteristics can be
modified by specifying various CSS attributes for the and
tags.
tells the browser to start a new line at this point, i.e., this
causes a line break. Note there is no end tag.
tells the browser to draw a horizontal rule. Note there is no
end tag.
Emphasis
--------
A few tags are used to tell the browser to provide some sort of emphasis
or special formatting for the delimited text:
make the text bold.
make the text italic.
surround the text with quotation marks.
Before CSS was invented, HTML tags were used to do all the format
specifications. One heavily used tag for this was :
display the text with a particular font, color, size,
background, etc.
Now that CSS is available to handle most of the format specification for
documents, the font tag is deprecated in the current HTML specification,
i.e., people are advised not to use it. It still works today, but
support for it may disappear in the future, so it should be avoided.
Instead use CSS to do this job.
========================================================================
=============================== CSS ==================================
========================================================================
As described above, HTML is used to provide a logical structure for the
data in your web page. CSS is then used to specify the detailed
appearance of the displayed data: text color and alignment, backgrounds,
font size, margins and other spacing, borders, and much more.
Structure of CSS Rules
--------- -- --- -----
CSS formatting instructions are typically in the form of rules in the
style section which is in the head part of the document. See the
"General Document Structure" section above for a picture of this. Parts
of the CSS rules can also be placed elsewhere, e.g., in an HTML start
tag by using the style attribute, but that won't be covered here.
Here is a CSS rule:
h2 {color: white; background: green; width: 70%; text-align: center;}
This says: For each h2 heading, make the text white on a green
background, center the text in the heading, and make the width of the
heading area cover 70% of the width of the containing element, which may
be the page. In this case the green background will cover the 70% width
allocated for the heading and the text will be centered in that area,
taking up as much space as is required for the characters used for the
heading text.
The "h2" in the rule above is called the "selector" for the rule. The
selector specifies the set of HTML elements to which the rule applies.
The items inside the curly braces, e.g., "color: white;" each consist of
a "property", e.g., "color:", followed by a "value", e.g., "white".
Each property is terminated by a ":" and each value is terminated by a
";". A rule can contain as many of these property/value pairs as
desired. The whole curly-brace-delimited combination is called a
"declaration".
Spacing between the objects within the declaration is ignored. Provide
what spacing makes it most readable. If a rule is longer than desired,
for readability (for example), you can create a second rule with the
same selector and continue with that additional rule. Similarly you
could add a third rule, etc. Or you could just split the declaration
into multiple lines since the browser doesn't care about spacing and
line breaks. Thus the following are equivalent to the example rule
above:
h2 {color: white; background: green; width: 70%;}
h2 {text-align: center;}
or
h2 {color: white; background: green; width: 70%;
text-align: center;}
To summarize the terminology, a rule structure looks like this:
|----------- declaration -------------|
selector {property: value; ... property: value;}
|--------------------- rule -------------------|
More about Selectors
---- ----- ---------
The selector can consist of a single element type, as in the above h2
example, or it can be more complicated to broaden or narrow the scope of
the rule. For example, if the selector had been (note the commas),
h2, h4, h5 {color: red;}
that would say this rule should apply to all h2, h4, and h5 headers.
You can also narrow the scope in various ways. For example,
ul li {color: red;}
Note the space instead of a comma between the "ul" and "li" HTML tag
names. The rule in this example says the browser should color red the
text in ANY list element found somewhere inside an unordered list; the
list element might be many levels deep, e.g., inside an ordered list
inside an ordered list inside an unordered list inside an ordered list.
It does not have to be directly under the first or any other unordered
list; it just has to occur somewhere after some unordered list starts
and before it ends, and thus is within an unordered list.
The ordering of the HTML tags in the selector is important, i.e., "ul
li" vs. "li ul" in this example. This facility makes heavy use of the
nesting concept described in the "Tag Nesting" section above.
Sometimes you might want to restrict the rule to only a certain level of
nesting. As discussed above in the "ul li {color: red}" example, it is
possible that list items might be nested at various levels. Maybe you
have an ordered list inside an unordered list. With the rule above,
*all* list items within the scope of the unordered list, including those
under the subordinate ordered list, would be colored red. If you wanted
just the unordered list items to be red, then you can use the ">"
character to say only the direct children of the "ul" tag are affected
by the rule, not the grandchildren, or great grandchildren, etc. This
does what you want to restrict the scope of the rule:
ul > li {color: red;}
You can mix and match these ways of specifying a selector to achieve
whatever you want, e.g.,
div > ul li > p
Additionally, you can specify that a rule should apply to only a
certain named class of HTML tags, or even to just one specific tag
in the whole document.
Suppose for some of your h2 tags, you included a class="news"
attribute, e.g.,
News Item 1 ....
News Item 2 ....
etc.
Then if you had the following CSS rules in the style section (note the
"." before "news")
h2 {color: green;}
h2.news {color: red;}
the class="news" h2 headings would have red text and the other h2
headings would have green text.
To identify *one* specific element, you can use the "id" attribute and
name value in the start tag of that element, and the "#" (instead of
".") and name qualifier on the desired rule's selector. For example,
consider the following CSS rule in the style section:
p#security {color: red; font-weight: 700;}
and paragraph in the body of the document
If you are sloppy with password security, you will
be terminated immediately!
There are other (less commonly used) selector facilities defined by CSS,
which let you apply formatting to very specific items. See the CSS
reference documentation.
Comments
--------
You can add comments within the style section by surrounding the comment
with "/*" and "*/". For example, you can record comments about some
obscure formatting you might later forget. Comments can also be used to
temporarily disable a CSS rule so you can easily judge the effect on the
document of not having the rule.
Be careful to use only "/* ... */" comments in the style section, not
the "" characters used to make HTML comments.
Properties and Values
---------- --- ------
Some of the most commonly used CSS properties are described in a section
below. For some of these properties, a length value is required. For
example, a length value is needed to specify the width of a table, or
the amount of space an element should be indented from the left margin
of its parent element. There are various ways of specifying such a
value. I usually use an em value, e.g., "margin: 2em", or a pixel
value, e.g., "border: 4px solid black", or a percentage, e.g., "width:
60%". The size represented by an em depends on the font size used, but
is very roughly the space taken by an "M" in that font. The actual size
of one pixel depends on the hardware display and resolution used, but it
is roughly 1/100 of an inch. The percentage is in terms of the parent
element's size. For example, if a heading is given 50% of the width of
a division which previously had been given 80% of the width of the page,
the heading would be allocated 50% of the division width, i.e., 40% of
the page width, but within the division. For web pages destined for
printing, often pt is used for lengths, where one pt is 1/72 of an inch.
Some properties (e.g., color, background, and border) require a color
value to be specified. There are various ways to do this. One is to
specify the value as #rrggbb where the rr, gg, and bb are hexadecimal
numbers ranging from 00 to FF giving respectively the red, green, and
blue components of the color. Thus #000000 is black, #FFFFFF is white,
#FF0000 is red, and #800080 is purple. There are tables to show you
what colors correspond to what hexadecimal values; see the references at
the bottom of the "Sample HTML and CSS Coding" file
(Sample_HTML_CSS.htm). For some colors, a name is provided, e.g., "red"
or "aqua".
In HTML (but not XHTML?) a similar way to specify a color is using an
rgb(r,g,b) value, where r, g, and b are integers ranging from 0 to 255
(corresponding to the hexadecimal numbers 00 to FF). Another way is to
use the rgb(r,g,b) value but this time with percentages of red, green,
and blue, ranging from 0% to 100% for each color.
The following are equivalent, all indicating the color aqua, which has
no red and all green and blue in its color makeup.
h3 {color: #00FFFF;}
h3 {color: aqua;}
h3 {color: rgb(0,255,255);} Not in XHTML?
h3 {color: rgb(0%,100%,100%);} Not in XHTML?
Inheritance and Cascading
----------- --- ---------
The values of some (not all) properties can be passed from parent
element to child element. This is called inheritance. For example, if
you have a rule specifying that the text color for a division is red,
then the color for every paragraph element in that division (unless
overridden) will also be red, because the paragraph element is a child
of the division element. If this is not desired, you can selectively
override this inheritance for paragraphs for which you desire a
different text color.
One way to do such an override is to have a rule specifically designated
for an element, e.g., by a .name or #name qualifier, as described above.
If multiple ancestors specify conflicting values for a property for a
descendant element, the property value of the ancestor closest to the
descendant wins. For example, the direct parent wins over the
grandparent (the parent's direct parent).
All other things being equal, if multiple value specifications are made
for the same property for an element, the last one specified in the
source code will apply. So if you p {color: red;} in the style section
followed sometime later by p {color: blue;}, then blue will be used.
In addition to having CSS rules in the style section(s) of the source
file, there are ways to have rules in other files and link/import them.
This whole intricate way in which property values are determined is
called "cascading", from which we get Cascading Style Sheets, CSS. Even
though it sounds complicated, it is very flexible and allows you to
specify very elaborate formats with very little coding and to isolate
that coding to a small part of your source code.
The Box Model of an Element
--- --- ----- -- -- -------
Each document element occupies a rectangular box on the page. The
innermost part of the box is the content, normally the text, which has a
width and height. Surrounding this is padding; it, like the content,
uses the background color for its background. Outside of the padding is
a border, which can have its own color(s), and outside the border is a
margin area, which has the background color of the direct parent
element. The padding, border, and margin sizes (thickness) can all be
0. In fact, the thickness of each of the four sides (top, left, right,
bottom) of the padding, border and margin areas can be specified
independently. Thus you have great flexibility in specifying how you
want things to appear.
Here is a diagram of the box model of an element showing how the
element's width is calculated:
+----------------------------------+
| margin |
| +-----------------------------+ |
| | border | |
| | +---------------------+ | |
| | | padding | | |
| | | +---------------+ | | |
| | | | content | | | |
| | | | | | | |
| | | |<---(width)--->| | | |
| | | +---------------+ | | |
| | | | | |
| | +---------------------+ | |
| | | |
| +-----------------------------+ |
| |
|<------- (NOT "width"!) --------->|
+----------------------------------+
To reduce typing, there are various shortcuts for specifying the four
sizes (one for each side) for the padding, border, and margin
properties. You can specify them individually, e.g., padding-top: .5em.
You can specify all four values in the order top, right, bottom, left as
in margin: 1em 2em 3em 1.5em. You can specify just one number if all
four sides have the same value, e.g., padding: 0. And there are other
shortcuts I won't list here.
For example you can have a rule like this for a division:
div {padding: 2em 3em 2em 4.8em; margin-top: 10em; border: solid 1px black;}
This means the division block will have padding of 2em on the top, 3em
on the right, 2em on the bottom, and 4.8em on the left. The border
will be a 1px solid black line on all four sides. Then there will be a
margin of at least 10em between the div and the next element above it.
The margins on the other three sides are not explicitly specified here,
so they will be 0 by default if they were not specified in other rules
for the division.
A topic that often causes confusion is width. The CSS "width" property,
e.g., in "div {width: 50em;}", refers to the width of the space
allocated to the content part of the element, not the edge-to-edge size
of the whole element. That edge-to-edge size of the element is the
content width + the left and right padding around it + the left and
right border space + the left and right margin space. See the diagram
above. There is no specific CSS property of this element for that size.
Earlier releases of Internet Explorer did not get this right.
In general the browser displays the element boxes in the same order they
appear in the source file. However CSS provides facilities to move an
element out of its normal position, e.g., to display it at some fixed
position on the screen or to shift it relative to its parent element or
to the base. Elements can also be hidden, e.g., visible on a display
but invisible on a printed document. The space normally used by that
element optionally can be kept or can be made available for use by other
elements. Such hiding/displaying can even be done dynamically, e.g.,
when a mouse cursor is put at a certain screen position. All in all,
you have a great deal of flexibility in how you can have things appear.
Some Commonly Used Properties
---- -------- ---- ----------
Much of your CSS styling can be done by using just the properties and
values below. There are also a number of other less commonly used
properties and values. These are described in the reference documents
listed at the end of the "Sample HTML and CSS Coding" file
(Sample_HTML_CSS.htm).
Some properties are called "shorthand properties". They let you group
together a number of individual properties in one property. For example
background can have values for color, image, position, etc. These could
be individually specified using background-color, background-image,
background-position, etc. Just saying "background: red;" is the same as
saying "background-color: red;" and using the defaults for the other
background properties. This just saves some typing if changing the
background color was the only thing desired. See the reference
documents for details.
color: value specifies text color.
background: value typically specifies just the color of the element's
background (strictly speaking this is background-color),
but it can specify other properties for more complicated
backgrounds, e.g., an image and its position.
width: value specifies the width of the content area.
height: value specifies the height of the content area.
padding: value(s) specify the width(s) of the padding side(s).
margin: value(s) specify the width(s) of the margin side(s).
border: value specifies the width of the four border sides; you can
also specify the border color and style, e.g., none, solid,
dotted, dashed, and double. If you want different
characteristics for the various sides, you can use other
properties, e.g., border-left and border-top-width. There are
a number of such properties to group specifications in various
ways.
font: values specify the font family, e.g., helvetica or courier, the
font weight, e.g., 100 (lightest) thru 900 (heaviest) with 400 =
"normal and 700 = "bold, the font size in pixels or as a
percentage of the font size used by the parent, and the font
style, e.g., italic. These properties can all be specified on
one font property or they can be specified individually, e.g.,
"font-weight: 700;" to produce a bold font. For font-family you
can specify multiple values separated by commas. Working from
the left end of this list, the browser will use the first font
family found installed on the PC.
float: values can be "left" or "right" to cause the element to be
floated toward the left or right side of the page. The
following elements, e.g., paragraphs, can then bend around that
element.
clear: values of "left", "right", or "both" prevent elements from being
floated to the left, right, or either side of this element.
list-style-type: value specifies the type of marker used for this list.
For example, for an unordered list you normally get a bullet for
each list element, but with this property you can say "none" to
prevent displaying the glyph or say "square" to change the shape
of the glyph. For an ordered list, the outermost list normally
displays list items as 1., 2., etc. Specifying a
list-style-type value of "upper-latin" causes the list items to
be started with A., B., etc. There are many other values you
can choose from or have the system chose automatically to
distinguish various levels of imbedded lists.
text-align: values of "left", "right", and "center" specify the
horizontal alignment of text in the content box.
text-decoration: value of "underline" underlines the text.
Other Considerations
----- --------------
Different browsers may display the same source file differently.
Sometimes this is because one or the other browser has a bug. It can
also occur because the browsers assume different defaults (which may
also be a bug if the CSS standard specifies a required default
adequately and a browser doesn't implement this). If you are lucky, you
can solve this sort of problem by explicitly specifying some property
values instead of letting the browsers use their (possibly differing)
default values.
Jeff Knauth
--------------------------------- End ----------------------------------
tag.
Spacing
-------
HTML and CSS don't really care much about spacing in the source code,
either before the start of the text on a line, or between tags on a
line, i.e., in the data itself, or between parts of a tag with
parameters, or blank lines in the source file. There are few
exceptions. You could code your web page as one long, humongous line
and it would still work. However it is much neater to put things on
separate lines and use some indentation and blank lines to clarify your
intent to human readers (including yourself), even though all this will
be ignored by the browser.
Also, you may carefully space parts of a paragraph in the source code
and think this spacing will be preserved in the display. Wrong! The
browser will remove all extraneous spaces for the final display. If you
really do want to preserve spacing, there is a special tag, , that
lets you do this, but then you are totally responsible for the spacing
of that data. For example,
A B C
will display as A B C
A B C
will display as A B C
is useful if you want to display a simple text table where you
want the column alignments to be preserved. For example,
A B C D
--- --- --- ---
ant bear cat dog
aaa bb c dddddd
Character Entities
--------- --------
Some characters have dual meanings: the character may be either data or
it may be control information. The browser needs to be told how to
interpret the character. By specially coding the data character as a
character sequence (a "character entity") you unambiguously tell the
browser your intent for that character. Thus when the browser sees a
"<", it starts looking for a tag because a "<" character starts each
tag. On the other hand, if the browser sees the character sequence
"<" the browser displays a "<" character and does not start any tag
search processing.
In a similar way, you can force the browser to display ">" and "&" in
places where those characters might be misinterpreted by the browser as
being part of a tag or as part of a character entity. The associated
character entities are ">" for ">" and "&" for "&". There are
also character entities to display many other special characters, e,g.,
see http://www.elizabethcastro.com/html/extras/entities.html.
Spaces are also handled specially by the browser, as was described
above. Although the browsers's normal processing is to eliminate extra
spaces, you can tell it to keep a space by using the special
six-character sequence " " (without the quotes) in places where you
require an extra space to be kept. Such a "non-breaking space" will
also prevent a line break when text is flowed at that location. You can
string together as many of these as you want, one for each required
space, e.g., to have three required spaces.
Upper/Lower Case
----------- ----
XHTML requires that tags and attributes be entered in lower case. In
contrast, the older, more lenient HTML allows mixed case or all upper
case for tags and attributes. I'd advise using the XHTML syntax. Of
course the case of your data delimited by the tags is important. So
these are different:
This is my data.
THIS is MY data.
General Document Structure
------- -------- ---------
The concept of nested tags is used to define the structure of the web
page document as a whole. The document is divided into a head section
and a body section. The head section contains a title and some general
control information, e.g., the style section containing CSS formatting
rules. The body is where most of the document resides, i.e., your data,
in particular. Below is a general skeleton that will apply to most
pages you will create. Most of your work will be in the body section.
You can just copy something like this as a template and then fill in the
blanks.
In the following general document structure, note the pairing of the
start and end tags and the nesting of tags. Note also the two main
sections: head and body. Spacing and indentation were done here just to
emphasize the structure; the browser ignores spacing.
...your web page title goes here...
...your main web page heading goes here...
...almost everything you code will be right here...
In fact you can have multiple style sections in the heading, with each
one focused on a type of output medium, e.g., screen or printer. This
can be extremely useful, allowing you to format the same data one way
for a PC display and another way for printing.
In addition to the above, there are usually some boilerplate control
lines, e.g., DOCTYPE and meta. Just copy them from one of the working
files, e.g., Sample_HTML_CSS.htm, and stay within any XHTML restrictions
noted below.
Links (Hyperlinks)
----- ------------
Using the tag, a page lets a user link to (i.e., access) information
from some other location. That information can be either on the current
host computer or on some other computer, or it can be information
located on some other part of the current page. The tag provides a
"hot spot", which when selected (e.g., clicked on with a mouse) results
in the access of the linked information. The access might result in
displaying static information, or playing an audio or video file, or
some other action appropriate for the information. Here is the general
format for the tag:
hot spot
The location specifies where the information is to be found. It can be
either an absolute location, e.g., an internet URL, or can be relative
to some page. The hot spot data can be text or even an image. The
attributes can be used to tailor the appearance of the "hot spot" data,
e.g., to color it, underline it, change the font size or weight compared
to other nearby text, etc. An tag using the "id" attribute can be
used to identify a place in the current page to which some other
tag can link.
Seeing It in Action
------ -- -- ------
The easiest way to see what is going on is to bring up a simple web page
on your browser. Observe the way the data is formatted. Then look at
the source code that the browser processed to produce the display. It
is very easy to view the source code with most browsers. Just right
click on some blank part of the web page display and choose View Source,
or View Page Source, or View Frame Source, etc. The wording of the menu
item depends on the browser used and the type of page being displayed.
Some browsers make it even easier, e.g., with Firefox you can display
the source code by just clicking Ctrl-U (the Ctrl key + the U key).
Firefox also has built-in Web Developer tools, e.g., the Inspector, to
let you examine a displayed page and shows you exactly what tags and
parameters were used to produce any piece of the display you select. It
is very educational.
Once you learn how to examine web pages with View Source, you will find
it very helpful for writing your own source code. If you see something
displayed a desirable way in a page that someone else has written, you
can just look at their source code and try to duplicate it in your own
file. Sometimes this is easier said than done, but it at least gives
you a start. Because it is so easy to modify source code and then
redisplay it to see what display changes result from the source code
changes, it is easy to experiment until you get what you want.
The general process will be something like this:
1) Edit your source file to make some change.
2) Save the source file, e.g., with Ctrl-S.
3) Display the page in your browser; or if the page is already
displayed, refresh the browser display, e.g., with the F5 key.
4) See what display changes the edit has produced.
5) If desired, make more changes and repeat from step 1.
Be sure not to leave out either the source file save in step 2 or the
browser display refresh in step 3. Otherwise, you may make a change to
the source file and then wonder why the change does not appear in the
browser display of that page. Until the save and refresh are done, the
browser continues to display the source file as it was before the latest
edit.
I have created a sample web page (Sample_HTML_CSS.htm) containing many
tag and CSS examples. You can view the source code using the procedures
described above. HTML and CSS have many parameters (attributes and
properties) to do all sorts of other formatting. I won't try to cover
those here in detail. Some good references are listed at the end of the
"Sample HTML and CSS Coding" file (Sample_HTML_CSS.htm).
I think your best strategy is first to get your data structured using
the simple tags described below. Then, following the examples of the
existing pages on the web site, you can put CSS rules in the style area
to experiment with until you get the formatting you desire.
Tag Summary
--- -------
Here is a summary of some of the most important tags. I won't give many
details; see the reference documents for those. There is at least one
example of the use of each tag in the Sample web page.
delimit the whole document.
delimit the head section.
delimit the title for the document. The title is
typically displayed at the top of the web page window.
Firefox also displays it in tabs. The title also
appears in bookmarks, search tool results, and many
other places, so make it meaningful and not too long.
The title element must be in the head section of the
document.
delimit the body section.
delimit heading text. The number indicates the amount of
emphasis the heading is meant to display (at least in the
default settings). H1 headings are usually big and bold.
The emphasis decreases all the way down to an h6 heading,
which may be hardly distinguishable from normal text in a
paragraph.
delimit paragraph text.
delimit preformatted text, which was discussed in the
Spacing section above.
delimit an ordered list, i.e., one whose list items are each
preceded by a designator that has an associated order, e.g.,
1., 2., 3. or a., b., c.
delimit an unordered list, i.e., one whose list items are
each preceded by a bullet or similar graphic.
delimit a specific list item in an ordered or unordered list.
delimit a definition list. Definition list items (in
contrast to ordered list items and unordered list items) each
consist of two parts, a term part and a definition part.
delimit the term part of the definition list item.
delimit the definition part of the definition list item.
A B C
will display as A B CA B Cwill display as A B C
is useful if you want to display a simple text table where you want the column alignments to be preserved. For example,A B C D --- --- --- --- ant bear cat dog aaa bb c ddddddCharacter Entities --------- -------- Some characters have dual meanings: the character may be either data or it may be control information. The browser needs to be told how to interpret the character. By specially coding the data character as a character sequence (a "character entity") you unambiguously tell the browser your intent for that character. Thus when the browser sees a "<", it starts looking for a tag because a "<" character starts each tag. On the other hand, if the browser sees the character sequence "<" the browser displays a "<" character and does not start any tag search processing. In a similar way, you can force the browser to display ">" and "&" in places where those characters might be misinterpreted by the browser as being part of a tag or as part of a character entity. The associated character entities are ">" for ">" and "&" for "&". There are also character entities to display many other special characters, e,g., see http://www.elizabethcastro.com/html/extras/entities.html. Spaces are also handled specially by the browser, as was described above. Although the browsers's normal processing is to eliminate extra spaces, you can tell it to keep a space by using the special six-character sequence " " (without the quotes) in places where you require an extra space to be kept. Such a "non-breaking space" will also prevent a line break when text is flowed at that location. You can string together as many of these as you want, one for each required space, e.g., to have three required spaces. Upper/Lower Case ----------- ---- XHTML requires that tags and attributes be entered in lower case. In contrast, the older, more lenient HTML allows mixed case or all upper case for tags and attributes. I'd advise using the XHTML syntax. Of course the case of your data delimited by the tags is important. So these are different:This is my data.
THIS is MY data.
General Document Structure ------- -------- --------- The concept of nested tags is used to define the structure of the web page document as a whole. The document is divided into a head section and a body section. The head section contains a title and some general control information, e.g., the style section containing CSS formatting rules. The body is where most of the document resides, i.e., your data, in particular. Below is a general skeleton that will apply to most pages you will create. Most of your work will be in the body section. You can just copy something like this as a template and then fill in the blanks. In the following general document structure, note the pairing of the start and end tags and the nesting of tags. Note also the two main sections: head and body. Spacing and indentation were done here just to emphasize the structure; the browser ignores spacing....your web page title goes here... ...your main web page heading goes here...
...almost everything you code will be right here... In fact you can have multiple style sections in the heading, with each one focused on a type of output medium, e.g., screen or printer. This can be extremely useful, allowing you to format the same data one way for a PC display and another way for printing. In addition to the above, there are usually some boilerplate control lines, e.g., DOCTYPE and meta. Just copy them from one of the working files, e.g., Sample_HTML_CSS.htm, and stay within any XHTML restrictions noted below. Links (Hyperlinks) ----- ------------ Using the tag, a page lets a user link to (i.e., access) information from some other location. That information can be either on the current host computer or on some other computer, or it can be information located on some other part of the current page. The tag provides a "hot spot", which when selected (e.g., clicked on with a mouse) results in the access of the linked information. The access might result in displaying static information, or playing an audio or video file, or some other action appropriate for the information. Here is the general format for the tag: hot spot The location specifies where the information is to be found. It can be either an absolute location, e.g., an internet URL, or can be relative to some page. The hot spot data can be text or even an image. The attributes can be used to tailor the appearance of the "hot spot" data, e.g., to color it, underline it, change the font size or weight compared to other nearby text, etc. An tag using the "id" attribute can be used to identify a place in the current page to which some other tag can link. Seeing It in Action ------ -- -- ------ The easiest way to see what is going on is to bring up a simple web page on your browser. Observe the way the data is formatted. Then look at the source code that the browser processed to produce the display. It is very easy to view the source code with most browsers. Just right click on some blank part of the web page display and choose View Source, or View Page Source, or View Frame Source, etc. The wording of the menu item depends on the browser used and the type of page being displayed. Some browsers make it even easier, e.g., with Firefox you can display the source code by just clicking Ctrl-U (the Ctrl key + the U key). Firefox also has built-in Web Developer tools, e.g., the Inspector, to let you examine a displayed page and shows you exactly what tags and parameters were used to produce any piece of the display you select. It is very educational. Once you learn how to examine web pages with View Source, you will find it very helpful for writing your own source code. If you see something displayed a desirable way in a page that someone else has written, you can just look at their source code and try to duplicate it in your own file. Sometimes this is easier said than done, but it at least gives you a start. Because it is so easy to modify source code and then redisplay it to see what display changes result from the source code changes, it is easy to experiment until you get what you want. The general process will be something like this: 1) Edit your source file to make some change. 2) Save the source file, e.g., with Ctrl-S. 3) Display the page in your browser; or if the page is already displayed, refresh the browser display, e.g., with the F5 key. 4) See what display changes the edit has produced. 5) If desired, make more changes and repeat from step 1. Be sure not to leave out either the source file save in step 2 or the browser display refresh in step 3. Otherwise, you may make a change to the source file and then wonder why the change does not appear in the browser display of that page. Until the save and refresh are done, the browser continues to display the source file as it was before the latest edit. I have created a sample web page (Sample_HTML_CSS.htm) containing many tag and CSS examples. You can view the source code using the procedures described above. HTML and CSS have many parameters (attributes and properties) to do all sorts of other formatting. I won't try to cover those here in detail. Some good references are listed at the end of the "Sample HTML and CSS Coding" file (Sample_HTML_CSS.htm). I think your best strategy is first to get your data structured using the simple tags described below. Then, following the examples of the existing pages on the web site, you can put CSS rules in the style area to experiment with until you get the formatting you desire. Tag Summary --- ------- Here is a summary of some of the most important tags. I won't give many details; see the reference documents for those. There is at least one example of the use of each tag in the Sample web page. delimit the whole document. delimit the head section.delimit the title for the document. The title is typically displayed at the top of the web page window. Firefox also displays it in tabs. The title also appears in bookmarks, search tool results, and many other places, so make it meaningful and not too long. The title element must be in the head section of the document. delimit the body section. delimit heading text. The number indicates the amount of
emphasis the heading is meant to display (at least in the
default settings). H1 headings are usually big and bold.
The emphasis decreases all the way down to an h6 heading,
which may be hardly distinguishable from normal text in a
paragraph.
delimit paragraph text.
delimit preformatted text, which was discussed in the Spacing section above.delimit an ordered list, i.e., one whose list items are each preceded by a designator that has an associated order, e.g., 1., 2., 3. or a., b., c.
delimit an unordered list, i.e., one whose list items are each preceded by a bullet or similar graphic.
delimit a specific list item in an ordered or unordered list. delimit a definition list. Definition list items (in contrast to ordered list items and unordered list items) each consist of two parts, a term part and a definition part.
delimit the term part of the definition list item. delimit the definition part of the definition list item.
tag,
but generally delimits a smaller amount of text.
delimits an in-line element; the element flows in-line with the
preceding and following text. In contrast,
delimits a block of
text which starts on a new line and may be otherwise spatially separated
from preceding and following text, e.g., as a new paragraph is separated
from the text of a preceding paragraph. These characteristics can be
modified by specifying various CSS attributes for the and
tags.
tells the browser to start a new line at this point, i.e., this causes a line break. Note there is no end tag.
tells the browser to draw a horizontal rule. Note there is no end tag. Emphasis -------- A few tags are used to tell the browser to provide some sort of emphasis or special formatting for the delimited text: make the text bold. make the text italic.
tells the browser to start a new line at this point, i.e., this causes a line break. Note there is no end tag.
tells the browser to draw a horizontal rule. Note there is no end tag. Emphasis -------- A few tags are used to tell the browser to provide some sort of emphasis or special formatting for the delimited text: make the text bold. make the text italic.
surround the text with quotation marks. Before CSS was invented, HTML tags were used to do all the format specifications. One heavily used tag for this was : display the text with a particular font, color, size, background, etc. Now that CSS is available to handle most of the format specification for documents, the font tag is deprecated in the current HTML specification, i.e., people are advised not to use it. It still works today, but support for it may disappear in the future, so it should be avoided. Instead use CSS to do this job. ======================================================================== =============================== CSS ================================== ======================================================================== As described above, HTML is used to provide a logical structure for the data in your web page. CSS is then used to specify the detailed appearance of the displayed data: text color and alignment, backgrounds, font size, margins and other spacing, borders, and much more. Structure of CSS Rules --------- -- --- ----- CSS formatting instructions are typically in the form of rules in the style section which is in the head part of the document. See the "General Document Structure" section above for a picture of this. Parts of the CSS rules can also be placed elsewhere, e.g., in an HTML start tag by using the style attribute, but that won't be covered here. Here is a CSS rule: h2 {color: white; background: green; width: 70%; text-align: center;} This says: For each h2 heading, make the text white on a green background, center the text in the heading, and make the width of the heading area cover 70% of the width of the containing element, which may be the page. In this case the green background will cover the 70% width allocated for the heading and the text will be centered in that area, taking up as much space as is required for the characters used for the heading text. The "h2" in the rule above is called the "selector" for the rule. The selector specifies the set of HTML elements to which the rule applies. The items inside the curly braces, e.g., "color: white;" each consist of a "property", e.g., "color:", followed by a "value", e.g., "white". Each property is terminated by a ":" and each value is terminated by a ";". A rule can contain as many of these property/value pairs as desired. The whole curly-brace-delimited combination is called a "declaration". Spacing between the objects within the declaration is ignored. Provide what spacing makes it most readable. If a rule is longer than desired, for readability (for example), you can create a second rule with the same selector and continue with that additional rule. Similarly you could add a third rule, etc. Or you could just split the declaration into multiple lines since the browser doesn't care about spacing and line breaks. Thus the following are equivalent to the example rule above: h2 {color: white; background: green; width: 70%;} h2 {text-align: center;} or h2 {color: white; background: green; width: 70%; text-align: center;} To summarize the terminology, a rule structure looks like this: |----------- declaration -------------| selector {property: value; ... property: value;} |--------------------- rule -------------------| More about Selectors ---- ----- --------- The selector can consist of a single element type, as in the above h2 example, or it can be more complicated to broaden or narrow the scope of the rule. For example, if the selector had been (note the commas), h2, h4, h5 {color: red;} that would say this rule should apply to all h2, h4, and h5 headers. You can also narrow the scope in various ways. For example, ul li {color: red;} Note the space instead of a comma between the "ul" and "li" HTML tag names. The rule in this example says the browser should color red the text in ANY list element found somewhere inside an unordered list; the list element might be many levels deep, e.g., inside an ordered list inside an ordered list inside an unordered list inside an ordered list. It does not have to be directly under the first or any other unordered list; it just has to occur somewhere after some unordered list starts and before it ends, and thus is within an unordered list. The ordering of the HTML tags in the selector is important, i.e., "ul li" vs. "li ul" in this example. This facility makes heavy use of the nesting concept described in the "Tag Nesting" section above. Sometimes you might want to restrict the rule to only a certain level of nesting. As discussed above in the "ul li {color: red}" example, it is possible that list items might be nested at various levels. Maybe you have an ordered list inside an unordered list. With the rule above, *all* list items within the scope of the unordered list, including those under the subordinate ordered list, would be colored red. If you wanted just the unordered list items to be red, then you can use the ">" character to say only the direct children of the "ul" tag are affected by the rule, not the grandchildren, or great grandchildren, etc. This does what you want to restrict the scope of the rule: ul > li {color: red;} You can mix and match these ways of specifying a selector to achieve whatever you want, e.g., div > ul li > p Additionally, you can specify that a rule should apply to only a certain named class of HTML tags, or even to just one specific tag in the whole document. Suppose for some of your h2 tags, you included a class="news" attribute, e.g.,
News Item 1 ....
News Item 2 ....
etc. Then if you had the following CSS rules in the style section (note the "." before "news") h2 {color: green;} h2.news {color: red;} the class="news" h2 headings would have red text and the other h2 headings would have green text. To identify *one* specific element, you can use the "id" attribute and name value in the start tag of that element, and the "#" (instead of ".") and name qualifier on the desired rule's selector. For example, consider the following CSS rule in the style section: p#security {color: red; font-weight: 700;} and paragraph in the body of the documentIf you are sloppy with password security, you will be terminated immediately!
There are other (less commonly used) selector facilities defined by CSS, which let you apply formatting to very specific items. See the CSS reference documentation. Comments -------- You can add comments within the style section by surrounding the comment with "/*" and "*/". For example, you can record comments about some obscure formatting you might later forget. Comments can also be used to temporarily disable a CSS rule so you can easily judge the effect on the document of not having the rule. Be careful to use only "/* ... */" comments in the style section, not the "" characters used to make HTML comments. Properties and Values ---------- --- ------ Some of the most commonly used CSS properties are described in a section below. For some of these properties, a length value is required. For example, a length value is needed to specify the width of a table, or the amount of space an element should be indented from the left margin of its parent element. There are various ways of specifying such a value. I usually use an em value, e.g., "margin: 2em", or a pixel value, e.g., "border: 4px solid black", or a percentage, e.g., "width: 60%". The size represented by an em depends on the font size used, but is very roughly the space taken by an "M" in that font. The actual size of one pixel depends on the hardware display and resolution used, but it is roughly 1/100 of an inch. The percentage is in terms of the parent element's size. For example, if a heading is given 50% of the width of a division which previously had been given 80% of the width of the page, the heading would be allocated 50% of the division width, i.e., 40% of the page width, but within the division. For web pages destined for printing, often pt is used for lengths, where one pt is 1/72 of an inch. Some properties (e.g., color, background, and border) require a color value to be specified. There are various ways to do this. One is to specify the value as #rrggbb where the rr, gg, and bb are hexadecimal numbers ranging from 00 to FF giving respectively the red, green, and blue components of the color. Thus #000000 is black, #FFFFFF is white, #FF0000 is red, and #800080 is purple. There are tables to show you what colors correspond to what hexadecimal values; see the references at the bottom of the "Sample HTML and CSS Coding" file (Sample_HTML_CSS.htm). For some colors, a name is provided, e.g., "red" or "aqua". In HTML (but not XHTML?) a similar way to specify a color is using an rgb(r,g,b) value, where r, g, and b are integers ranging from 0 to 255 (corresponding to the hexadecimal numbers 00 to FF). Another way is to use the rgb(r,g,b) value but this time with percentages of red, green, and blue, ranging from 0% to 100% for each color. The following are equivalent, all indicating the color aqua, which has no red and all green and blue in its color makeup. h3 {color: #00FFFF;} h3 {color: aqua;} h3 {color: rgb(0,255,255);} Not in XHTML? h3 {color: rgb(0%,100%,100%);} Not in XHTML? Inheritance and Cascading ----------- --- --------- The values of some (not all) properties can be passed from parent element to child element. This is called inheritance. For example, if you have a rule specifying that the text color for a division is red, then the color for every paragraph element in that division (unless overridden) will also be red, because the paragraph element is a child of the division element. If this is not desired, you can selectively override this inheritance for paragraphs for which you desire a different text color. One way to do such an override is to have a rule specifically designated for an element, e.g., by a .name or #name qualifier, as described above. If multiple ancestors specify conflicting values for a property for a descendant element, the property value of the ancestor closest to the descendant wins. For example, the direct parent wins over the grandparent (the parent's direct parent). All other things being equal, if multiple value specifications are made for the same property for an element, the last one specified in the source code will apply. So if you p {color: red;} in the style section followed sometime later by p {color: blue;}, then blue will be used. In addition to having CSS rules in the style section(s) of the source file, there are ways to have rules in other files and link/import them. This whole intricate way in which property values are determined is called "cascading", from which we get Cascading Style Sheets, CSS. Even though it sounds complicated, it is very flexible and allows you to specify very elaborate formats with very little coding and to isolate that coding to a small part of your source code. The Box Model of an Element --- --- ----- -- -- ------- Each document element occupies a rectangular box on the page. The innermost part of the box is the content, normally the text, which has a width and height. Surrounding this is padding; it, like the content, uses the background color for its background. Outside of the padding is a border, which can have its own color(s), and outside the border is a margin area, which has the background color of the direct parent element. The padding, border, and margin sizes (thickness) can all be 0. In fact, the thickness of each of the four sides (top, left, right, bottom) of the padding, border and margin areas can be specified independently. Thus you have great flexibility in specifying how you want things to appear. Here is a diagram of the box model of an element showing how the element's width is calculated: +----------------------------------+ | margin | | +-----------------------------+ | | | border | | | | +---------------------+ | | | | | padding | | | | | | +---------------+ | | | | | | | content | | | | | | | | | | | | | | | |<---(width)--->| | | | | | | +---------------+ | | | | | | | | | | | +---------------------+ | | | | | | | +-----------------------------+ | | | |<------- (NOT "width"!) --------->| +----------------------------------+ To reduce typing, there are various shortcuts for specifying the four sizes (one for each side) for the padding, border, and margin properties. You can specify them individually, e.g., padding-top: .5em. You can specify all four values in the order top, right, bottom, left as in margin: 1em 2em 3em 1.5em. You can specify just one number if all four sides have the same value, e.g., padding: 0. And there are other shortcuts I won't list here. For example you can have a rule like this for a division: div {padding: 2em 3em 2em 4.8em; margin-top: 10em; border: solid 1px black;} This means the division block will have padding of 2em on the top, 3em on the right, 2em on the bottom, and 4.8em on the left. The border will be a 1px solid black line on all four sides. Then there will be a margin of at least 10em between the div and the next element above it. The margins on the other three sides are not explicitly specified here, so they will be 0 by default if they were not specified in other rules for the division. A topic that often causes confusion is width. The CSS "width" property, e.g., in "div {width: 50em;}", refers to the width of the space allocated to the content part of the element, not the edge-to-edge size of the whole element. That edge-to-edge size of the element is the content width + the left and right padding around it + the left and right border space + the left and right margin space. See the diagram above. There is no specific CSS property of this element for that size. Earlier releases of Internet Explorer did not get this right. In general the browser displays the element boxes in the same order they appear in the source file. However CSS provides facilities to move an element out of its normal position, e.g., to display it at some fixed position on the screen or to shift it relative to its parent element or to the base. Elements can also be hidden, e.g., visible on a display but invisible on a printed document. The space normally used by that element optionally can be kept or can be made available for use by other elements. Such hiding/displaying can even be done dynamically, e.g., when a mouse cursor is put at a certain screen position. All in all, you have a great deal of flexibility in how you can have things appear. Some Commonly Used Properties ---- -------- ---- ---------- Much of your CSS styling can be done by using just the properties and values below. There are also a number of other less commonly used properties and values. These are described in the reference documents listed at the end of the "Sample HTML and CSS Coding" file (Sample_HTML_CSS.htm). Some properties are called "shorthand properties". They let you group together a number of individual properties in one property. For example background can have values for color, image, position, etc. These could be individually specified using background-color, background-image, background-position, etc. Just saying "background: red;" is the same as saying "background-color: red;" and using the defaults for the other background properties. This just saves some typing if changing the background color was the only thing desired. See the reference documents for details. color: value specifies text color. background: value typically specifies just the color of the element's background (strictly speaking this is background-color), but it can specify other properties for more complicated backgrounds, e.g., an image and its position. width: value specifies the width of the content area. height: value specifies the height of the content area. padding: value(s) specify the width(s) of the padding side(s). margin: value(s) specify the width(s) of the margin side(s). border: value specifies the width of the four border sides; you can also specify the border color and style, e.g., none, solid, dotted, dashed, and double. If you want different characteristics for the various sides, you can use other properties, e.g., border-left and border-top-width. There are a number of such properties to group specifications in various ways. font: values specify the font family, e.g., helvetica or courier, the font weight, e.g., 100 (lightest) thru 900 (heaviest) with 400 = "normal and 700 = "bold, the font size in pixels or as a percentage of the font size used by the parent, and the font style, e.g., italic. These properties can all be specified on one font property or they can be specified individually, e.g., "font-weight: 700;" to produce a bold font. For font-family you can specify multiple values separated by commas. Working from the left end of this list, the browser will use the first font family found installed on the PC. float: values can be "left" or "right" to cause the element to be floated toward the left or right side of the page. The following elements, e.g., paragraphs, can then bend around that element. clear: values of "left", "right", or "both" prevent elements from being floated to the left, right, or either side of this element. list-style-type: value specifies the type of marker used for this list. For example, for an unordered list you normally get a bullet for each list element, but with this property you can say "none" to prevent displaying the glyph or say "square" to change the shape of the glyph. For an ordered list, the outermost list normally displays list items as 1., 2., etc. Specifying a list-style-type value of "upper-latin" causes the list items to be started with A., B., etc. There are many other values you can choose from or have the system chose automatically to distinguish various levels of imbedded lists. text-align: values of "left", "right", and "center" specify the horizontal alignment of text in the content box. text-decoration: value of "underline" underlines the text. Other Considerations ----- -------------- Different browsers may display the same source file differently. Sometimes this is because one or the other browser has a bug. It can also occur because the browsers assume different defaults (which may also be a bug if the CSS standard specifies a required default adequately and a browser doesn't implement this). If you are lucky, you can solve this sort of problem by explicitly specifying some property values instead of letting the browsers use their (possibly differing) default values. Jeff Knauth --------------------------------- End ----------------------------------