, you should just write
. The space in front of the "/" is required for compatibility in some browsers. Older versions of HTML used to let you not include an end tag. They would infer it (correctly sometimes, incorrectly at other times). The best practice seems to be to always pair the tags. Some stricter languages, e.g., XHTML, require the pairing, as well as putting restrictions on other things that the lenient HTML allowed (and seems to be moving away from, version by version). I try to stay within the XHTML restrictions, e.g., always pair the tags and use lower case. 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 descendant 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 P are elements (such as
paragraphs, headings, divisions, spans, lists, images, etc.) of a web
page. The tree structure in the diagram below shows how the are
organized. A, B, C, M, and P are at the first level. Both C and M have
elements nested below them, e.g., one might be a division with
paragraphs, divisions, spans, etc., nested within it. The other might
be a paragraph with spans nested within it. E in turn has elements
nested within it, etc.
Let's focus on H to show how the terminology works. H is the parent of
I, J, and L (they are nested immediately below H, not in a lower nest).
I, J, and L are each a child of H (H is immediately above them). I, J,
and L are siblings (they are at the same level in the same nest). Both
C and E are ancestors of H (they start the nests that H is within --
they are reached from H by going directly up the tree). I, J, K, and L
are all descendants of H; some are further nest steps away than others,
but H is reached by each of them by going directly up the tree.
web page
+-------+------+---------+-------+
| | | | |
A B C M P <== elements
/ \ / \
D E N O
/|\
F G H*
/|\
I J L
|
K
This follows down just one chain of relatives. All the elements shown
might well have nests below them (not shown here), leading to other
ancestral relationships independent of the one just discussed.
If a child tag does not override an inheritable 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. Note that some characteristics are not
by default inheritable, e.g., border and margin.
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, for example, 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 https://www.w3schools.com/charsets/ref_utf_punctuation.asp
Spaces are also handled specially by the browser, as was described
above. Although the browser'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, lower
case. 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., a style section containing CSS formatting
rules. The body is where most of the document resides, i.e., your data,
in particular. Below is an annotated 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 insert text
as required.
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, indentation, and the big brackets on
the left were used here just to emphasize the structure; the browser
ignores spacing.
+---
|
| +-
| | Text on the browser tab for this page
| |
| | +-
| |
| | +-
| +-
|
| +-
| | ...
| | (content structured with HTML tags)
| | ...
| +-
|
+---
You can have multiple style sections in the heading, as shown here, 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.
Links (Hyperlinks)
----- ------------
Using the tag (the anchor tag) in a page lets a user link to (i.e.,
access) information from some other location. That information can be a
another page 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., although it is preferable to do such styling
via rules in the head section. 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. Often 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 cell used in a table's optional header.
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
block of code which usually contains other elements.
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 separate end tag.
tells the browser to draw a horizontal rule. Note there is no
separate 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.
underline the text.
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.
The , , and tags are for formatting text, something strictly
better done with rules in the head section. However since they are so
simple to type, they are frequently used in the body section if only
something simple is needed. When more elaborate formatting is required,
e.g., a color or font size change in addition to making text bold, then
a span is done in the body and an appropriate rule is set up in the head
instead of using . Similar considerations apply for and .
========================================================================
=============================== 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 a
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 is done infrequently and
won't be covered here.
Here is a typical 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".
This property/value pair is called a "declaration". Each property is
terminated by a ":" and each value is terminated by a ";". A rule can
contain as many of these declarations as desired. The whole
curly-brace-delimited combination is called a "declaration block".
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 block ---------|
| |
||-declaration -| |-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.
It is the same as
h2 {color: red;}
h4 {color: red;}
h5 {color: red;}
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,
potentially *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".
You can save some key strokes (and reduce your color pallet from 16
million colors to only about 4000) by using just three hex characters
instead of six. #xyz is the same as #xxyyzz. That's usually enough for
me for the colors in a simple web page.
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: #0FF;}
h3 {color: #00FFFF;}
h3 {color: aqua;}
h3 {color: rgb(0,255,255);}
h3 {color: rgb(0%,100%,100%);}
Inheritance and Cascading
----------- --- ---------
If a property value is not specified for an element, the values of some
(not all) properties can obtained from an ancestor, e.g., from the
parent 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, no matter how deeply
nested, will also be red, unless overridden. This is because the
paragraph element is a descendant of the division element.
If such inheritance is not desired for some descendant elements, you can
create a style sheet rule or rules to selectively override this
inheritance for the descendant elements for which you desire a different
property value. 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 in a preceding section.
If multiple ancestors specify conflicting values for an inheritable
property for a descendant element needing a value, 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).
Beyond inheritance, it can be pretty complicated to say what value is
used for a given property for a particular element. The element might
be many nest levels deep, with lots of ids and classes strewn around the
style sheet and many competing selectors, each saying they apply to the
element and property in question. I think the following roughly
describes the process. I do know I am leaving out some of the more
obscure things, facilities you will probably never use.
Style sheets from multiple sources can be involved, with a defined
precedence defined for each, e.g., the sheet built into the browser as
default settings, the sheet that a browser user (the viewer) can ask
the browser to be used to override browser defaults, and (usually the
most relevant) the sheets that you, the web page author, provide.
Within the style sheets, property declarations are associated with
selectors, forming rules. The selectors designate exactly which
elements their declarations apply to. The selectors can be complex,
with some selectors more specific than others in narrowing down the
possible list of elements they apply to.
To help choose which selector (and associated declaration) is the winner
for a given element and property, there is a specificity weighting
algorithm for selectors. It gives the largest weight to id selector
components, then a lower weight to class selector components, then the
lowest to simple element selector components. (There are also has some
other, more obscure details). Selectors can contain a combination of
zero or more of each of these components. Comparing the resulting
weights of the various selectors says which is the winning
selector-associated rule for a given element and the property in
question. However, there still may be no winner.
In case of a tie, the order of the tied rules within the style sheet
matters with the last tied rule being the winner. Then within the
winning rule, if the property is specified multiple times, it is the
last specification that wins.
If nothing is specified in the style sheets for the property for a
nested element, then an ancestor's property value (see above) can be
used for an inheritable property. You may have to go up multiple levels
to find an ancestor with the resolved property, which may have been
determined by the selector contest described above. Finally if nothing
at all is specified for the property in the ancestor chain, the browser
default is used.
Fortunately, most of the time for code you write, it is obvious which
value applies since you won't (or shouldn't) make things too complicated
for yourself. Tools are available, e.g., Firefox's Developer Tools
Inspector, to clearly say what is going on if the value being displayed
by the browser is not what you expected. The Inspector can tell you
exactly where a given element's property value is coming from.
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. Usually it is pretty
obvious which property values apply to each element, so don't be put
off too much by the above cascading description.
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. It has a background (color, image, etc.)
Surrounding this is padding; it has the same background as the content.
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 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. Margin sizes can be negative; padding and
border sizes cannot.
For example you can have a rule like this for a division:
div {padding: 2em 3em 2em 4.8em; border: solid 1px black; margin-top: 10em;}
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. A later declaration addition to CSS, "box-sizing: border-box"
lets you say the sizing is meant to include content, padding, and
border. Another useful addition is "width: fit-content", which says the
width of an element is whatever the content requires instead of you
having to specify it explicitly, e.g., "width: 10em".
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 float it left or right. 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, its position, and if it is
repeated.
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. Note, this is the CSS font
property, not the deprecated font tag previously used in old HTML
files.
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 (in some cases) have the system choose
automatically to distinguish various levels of embedded lists.
list-style-position: lets you specify where the list-item marker, e.g.,
the bullet, should be located; it can be either outside as a
hanging indent before the list-item data, or it can be inside,
essentially as part of the data, pushing the rest of the
list-item data to the right.
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.
box-shadow: values allow a colored haloing effect around or in a box
text-shadow: values allow a colored shadow cast by letters
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. Modern browsers, e.g., Firefox, Edge, and Chrome, seem
to do a good job following the standards, at least for the frequently
used facilities.
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 descendant 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 P are elements (such as
paragraphs, headings, divisions, spans, lists, images, etc.) of a web
page. The tree structure in the diagram below shows how the are
organized. A, B, C, M, and P are at the first level. Both C and M have
elements nested below them, e.g., one might be a division with
paragraphs, divisions, spans, etc., nested within it. The other might
be a paragraph with spans nested within it. E in turn has elements
nested within it, etc.
Let's focus on H to show how the terminology works. H is the parent of
I, J, and L (they are nested immediately below H, not in a lower nest).
I, J, and L are each a child of H (H is immediately above them). I, J,
and L are siblings (they are at the same level in the same nest). Both
C and E are ancestors of H (they start the nests that H is within --
they are reached from H by going directly up the tree). I, J, K, and L
are all descendants of H; some are further nest steps away than others,
but H is reached by each of them by going directly up the tree.
web page
+-------+------+---------+-------+
| | | | |
A B C M P <== elements
/ \ / \
D E N O
/|\
F G H*
/|\
I J L
|
K
This follows down just one chain of relatives. All the elements shown
might well have nests below them (not shown here), leading to other
ancestral relationships independent of the one just discussed.
If a child tag does not override an inheritable 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. Note that some characteristics are not
by default inheritable, e.g., border and margin.
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, for example, 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 https://www.w3schools.com/charsets/ref_utf_punctuation.asp
Spaces are also handled specially by the browser, as was described
above. Although the browser'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, lower
case. 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., a style section containing CSS formatting
rules. The body is where most of the document resides, i.e., your data,
in particular. Below is an annotated 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 insert text
as required.
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, indentation, and the big brackets on
the left were used here just to emphasize the structure; the browser
ignores spacing.
+---
|
| +-
| | Text on the browser tab for this page
| |
| | +-
| |
| | +-
| +-
|
| +-
| | ...
| | (content structured with HTML tags)
| | ...
| +-
|
+---
You can have multiple style sections in the heading, as shown here, 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.
Links (Hyperlinks)
----- ------------
Using the tag (the anchor tag) in a page lets a user link to (i.e.,
access) information from some other location. That information can be a
another page 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., although it is preferable to do such styling
via rules in the head section. 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. Often 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 cell used in a table's optional header.
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
block of code which usually contains other elements.
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 separate end tag.
tells the browser to draw a horizontal rule. Note there is no
separate 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.
underline the text.
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.
The , , and tags are for formatting text, something strictly
better done with rules in the head section. However since they are so
simple to type, they are frequently used in the body section if only
something simple is needed. When more elaborate formatting is required,
e.g., a color or font size change in addition to making text bold, then
a span is done in the body and an appropriate rule is set up in the head
instead of using . Similar considerations apply for and .
========================================================================
=============================== 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 a
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 is done infrequently and
won't be covered here.
Here is a typical 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".
This property/value pair is called a "declaration". Each property is
terminated by a ":" and each value is terminated by a ";". A rule can
contain as many of these declarations as desired. The whole
curly-brace-delimited combination is called a "declaration block".
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 block ---------|
| |
||-declaration -| |-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.
It is the same as
h2 {color: red;}
h4 {color: red;}
h5 {color: red;}
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,
potentially *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".
You can save some key strokes (and reduce your color pallet from 16
million colors to only about 4000) by using just three hex characters
instead of six. #xyz is the same as #xxyyzz. That's usually enough for
me for the colors in a simple web page.
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: #0FF;}
h3 {color: #00FFFF;}
h3 {color: aqua;}
h3 {color: rgb(0,255,255);}
h3 {color: rgb(0%,100%,100%);}
Inheritance and Cascading
----------- --- ---------
If a property value is not specified for an element, the values of some
(not all) properties can obtained from an ancestor, e.g., from the
parent 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, no matter how deeply
nested, will also be red, unless overridden. This is because the
paragraph element is a descendant of the division element.
If such inheritance is not desired for some descendant elements, you can
create a style sheet rule or rules to selectively override this
inheritance for the descendant elements for which you desire a different
property value. 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 in a preceding section.
If multiple ancestors specify conflicting values for an inheritable
property for a descendant element needing a value, 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).
Beyond inheritance, it can be pretty complicated to say what value is
used for a given property for a particular element. The element might
be many nest levels deep, with lots of ids and classes strewn around the
style sheet and many competing selectors, each saying they apply to the
element and property in question. I think the following roughly
describes the process. I do know I am leaving out some of the more
obscure things, facilities you will probably never use.
Style sheets from multiple sources can be involved, with a defined
precedence defined for each, e.g., the sheet built into the browser as
default settings, the sheet that a browser user (the viewer) can ask
the browser to be used to override browser defaults, and (usually the
most relevant) the sheets that you, the web page author, provide.
Within the style sheets, property declarations are associated with
selectors, forming rules. The selectors designate exactly which
elements their declarations apply to. The selectors can be complex,
with some selectors more specific than others in narrowing down the
possible list of elements they apply to.
To help choose which selector (and associated declaration) is the winner
for a given element and property, there is a specificity weighting
algorithm for selectors. It gives the largest weight to id selector
components, then a lower weight to class selector components, then the
lowest to simple element selector components. (There are also has some
other, more obscure details). Selectors can contain a combination of
zero or more of each of these components. Comparing the resulting
weights of the various selectors says which is the winning
selector-associated rule for a given element and the property in
question. However, there still may be no winner.
In case of a tie, the order of the tied rules within the style sheet
matters with the last tied rule being the winner. Then within the
winning rule, if the property is specified multiple times, it is the
last specification that wins.
If nothing is specified in the style sheets for the property for a
nested element, then an ancestor's property value (see above) can be
used for an inheritable property. You may have to go up multiple levels
to find an ancestor with the resolved property, which may have been
determined by the selector contest described above. Finally if nothing
at all is specified for the property in the ancestor chain, the browser
default is used.
Fortunately, most of the time for code you write, it is obvious which
value applies since you won't (or shouldn't) make things too complicated
for yourself. Tools are available, e.g., Firefox's Developer Tools
Inspector, to clearly say what is going on if the value being displayed
by the browser is not what you expected. The Inspector can tell you
exactly where a given element's property value is coming from.
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. Usually it is pretty
obvious which property values apply to each element, so don't be put
off too much by the above cascading description.
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. It has a background (color, image, etc.)
Surrounding this is padding; it has the same background as the content.
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 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. Margin sizes can be negative; padding and
border sizes cannot.
For example you can have a rule like this for a division:
div {padding: 2em 3em 2em 4.8em; border: solid 1px black; margin-top: 10em;}
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. A later declaration addition to CSS, "box-sizing: border-box"
lets you say the sizing is meant to include content, padding, and
border. Another useful addition is "width: fit-content", which says the
width of an element is whatever the content requires instead of you
having to specify it explicitly, e.g., "width: 10em".
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 float it left or right. 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, its position, and if it is
repeated.
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. Note, this is the CSS font
property, not the deprecated font tag previously used in old HTML
files.
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 (in some cases) have the system choose
automatically to distinguish various levels of embedded lists.
list-style-position: lets you specify where the list-item marker, e.g.,
the bullet, should be located; it can be either outside as a
hanging indent before the list-item data, or it can be inside,
essentially as part of the data, pushing the rest of the
list-item data to the right.
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.
box-shadow: values allow a colored haloing effect around or in a box
text-shadow: values allow a colored shadow cast by letters
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. Modern browsers, e.g., Firefox, Edge, and Chrome, seem
to do a good job following the standards, at least for the frequently
used facilities.
Jeff Knauth
--------------------------------- End ----------------------------------
tag. Note that some characteristics are not
by default inheritable, e.g., border and margin.
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, for example, 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 https://www.w3schools.com/charsets/ref_utf_punctuation.asp
Spaces are also handled specially by the browser, as was described
above. Although the browser'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, lower
case. 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., a style section containing CSS formatting
rules. The body is where most of the document resides, i.e., your data,
in particular. Below is an annotated 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 insert text
as required.
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, indentation, and the big brackets on
the left were used here just to emphasize the structure; the browser
ignores spacing.
+---
|
| +-
| | Text on the browser tab for this page
| |
| | +-
| |
| | +-
| +-
|
| +-
| | ...
| | (content structured with HTML tags)
| | ...
| +-
|
+---
You can have multiple style sections in the heading, as shown here, 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.
Links (Hyperlinks)
----- ------------
Using the tag (the anchor tag) in a page lets a user link to (i.e.,
access) information from some other location. That information can be a
another page 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., although it is preferable to do such styling
via rules in the head section. 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. Often 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, for example, 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 https://www.w3schools.com/charsets/ref_utf_punctuation.asp Spaces are also handled specially by the browser, as was described above. Although the browser'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, lower case. 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., a style section containing CSS formatting rules. The body is where most of the document resides, i.e., your data, in particular. Below is an annotated 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 insert text as required. 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, indentation, and the big brackets on the left were used here just to emphasize the structure; the browser ignores spacing. +--- | | +- | |Text on the browser tab for this page | | | | +- | | | | +- | +- | | +- | | ... | | (content structured with HTML tags) | | ... | +- | +--- You can have multiple style sections in the heading, as shown here, 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. Links (Hyperlinks) ----- ------------ Using the tag (the anchor tag) in a page lets a user link to (i.e., access) information from some other location. That information can be a another page 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., although it is preferable to do such styling via rules in the head section. 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. Often 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 separate end tag.
tells the browser to draw a horizontal rule. Note there is no separate 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. underline the text.
tells the browser to start a new line at this point, i.e., this causes a line break. Note there is no separate end tag.
tells the browser to draw a horizontal rule. Note there is no separate 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. underline the text.
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. The , , and tags are for formatting text, something strictly better done with rules in the head section. However since they are so simple to type, they are frequently used in the body section if only something simple is needed. When more elaborate formatting is required, e.g., a color or font size change in addition to making text bold, then a span is done in the body and an appropriate rule is set up in the head instead of using . Similar considerations apply for and . ======================================================================== =============================== 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 a 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 is done infrequently and won't be covered here. Here is a typical 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". This property/value pair is called a "declaration". Each property is terminated by a ":" and each value is terminated by a ";". A rule can contain as many of these declarations as desired. The whole curly-brace-delimited combination is called a "declaration block". 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 block ---------| | | ||-declaration -| |-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. It is the same as h2 {color: red;} h4 {color: red;} h5 {color: red;} 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, potentially *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". You can save some key strokes (and reduce your color pallet from 16 million colors to only about 4000) by using just three hex characters instead of six. #xyz is the same as #xxyyzz. That's usually enough for me for the colors in a simple web page. 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: #0FF;} h3 {color: #00FFFF;} h3 {color: aqua;} h3 {color: rgb(0,255,255);} h3 {color: rgb(0%,100%,100%);} Inheritance and Cascading ----------- --- --------- If a property value is not specified for an element, the values of some (not all) properties can obtained from an ancestor, e.g., from the parent 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, no matter how deeply nested, will also be red, unless overridden. This is because the paragraph element is a descendant of the division element. If such inheritance is not desired for some descendant elements, you can create a style sheet rule or rules to selectively override this inheritance for the descendant elements for which you desire a different property value. 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 in a preceding section. If multiple ancestors specify conflicting values for an inheritable property for a descendant element needing a value, 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). Beyond inheritance, it can be pretty complicated to say what value is used for a given property for a particular element. The element might be many nest levels deep, with lots of ids and classes strewn around the style sheet and many competing selectors, each saying they apply to the element and property in question. I think the following roughly describes the process. I do know I am leaving out some of the more obscure things, facilities you will probably never use. Style sheets from multiple sources can be involved, with a defined precedence defined for each, e.g., the sheet built into the browser as default settings, the sheet that a browser user (the viewer) can ask the browser to be used to override browser defaults, and (usually the most relevant) the sheets that you, the web page author, provide. Within the style sheets, property declarations are associated with selectors, forming rules. The selectors designate exactly which elements their declarations apply to. The selectors can be complex, with some selectors more specific than others in narrowing down the possible list of elements they apply to. To help choose which selector (and associated declaration) is the winner for a given element and property, there is a specificity weighting algorithm for selectors. It gives the largest weight to id selector components, then a lower weight to class selector components, then the lowest to simple element selector components. (There are also has some other, more obscure details). Selectors can contain a combination of zero or more of each of these components. Comparing the resulting weights of the various selectors says which is the winning selector-associated rule for a given element and the property in question. However, there still may be no winner. In case of a tie, the order of the tied rules within the style sheet matters with the last tied rule being the winner. Then within the winning rule, if the property is specified multiple times, it is the last specification that wins. If nothing is specified in the style sheets for the property for a nested element, then an ancestor's property value (see above) can be used for an inheritable property. You may have to go up multiple levels to find an ancestor with the resolved property, which may have been determined by the selector contest described above. Finally if nothing at all is specified for the property in the ancestor chain, the browser default is used. Fortunately, most of the time for code you write, it is obvious which value applies since you won't (or shouldn't) make things too complicated for yourself. Tools are available, e.g., Firefox's Developer Tools Inspector, to clearly say what is going on if the value being displayed by the browser is not what you expected. The Inspector can tell you exactly where a given element's property value is coming from. 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. Usually it is pretty obvious which property values apply to each element, so don't be put off too much by the above cascading description. 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. It has a background (color, image, etc.) Surrounding this is padding; it has the same background as the content. 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 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. Margin sizes can be negative; padding and border sizes cannot. For example you can have a rule like this for a division: div {padding: 2em 3em 2em 4.8em; border: solid 1px black; margin-top: 10em;} 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. A later declaration addition to CSS, "box-sizing: border-box" lets you say the sizing is meant to include content, padding, and border. Another useful addition is "width: fit-content", which says the width of an element is whatever the content requires instead of you having to specify it explicitly, e.g., "width: 10em". 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 float it left or right. 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, its position, and if it is repeated. 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. Note, this is the CSS font property, not the deprecated font tag previously used in old HTML files. 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 (in some cases) have the system choose automatically to distinguish various levels of embedded lists. list-style-position: lets you specify where the list-item marker, e.g., the bullet, should be located; it can be either outside as a hanging indent before the list-item data, or it can be inside, essentially as part of the data, pushing the rest of the list-item data to the right. 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. box-shadow: values allow a colored haloing effect around or in a box text-shadow: values allow a colored shadow cast by letters 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. Modern browsers, e.g., Firefox, Edge, and Chrome, seem to do a good job following the standards, at least for the frequently used facilities. Jeff Knauth --------------------------------- End ----------------------------------