CSS: Cascading Style Sheets for Text Styling
There are three places that CSS rules can be defined:
LINKED: Defined in a separate file. The same .css document can
be shared by multiple files.
EMBEDDED: Defined within the HEAD of a document.
INLINE: Defined within a tag.
CSS RULE Syntax:
The attribute name is separated from it's value by a colon; multiple attribute
name/value pairs are separated by a semi-colon.
attribute_name: attribute_value;
e.g.,
font-size: 12px; font-weight: 800; color: #003366;
"Cascading" means that there is an order of precedence
amond the various methods of applying CSS: the style closest to the element
overrides the others where they define the same property.
INLINE overrides EMBEDDED and LINKED.
EMBEDDED overrides LINKED.
INHERITANCE: If more than one style applies to an element, all
of them will be applied. The nested style closest to the element will
determine the value of any attribute that is defined by more than one
of the nested styles.
e.g.,
<span style="font-size: 10px; color: #cc3333;">This
text has <span style="font-size: 16px;">nested
styles</span> applied to it that define the same attribute,
namely, "font-size"</span>
result:
This text has nested
styles; applied to it that define the same attribute, namely, "font-size"
note: all of this text has inherited the value for the attribute "font-family"
from the embeded style in the head of this document:
<style type="text/css">
<!--
body, td, p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
12px; line-height:18px}
-->
</style>
THREE TYPES OF SELECTORS
Redefine an HTML tag.
Create a custom CLASS.
INLINE "Style" attribute: can be applied to any HTML tag.
SPAN and DIV are "styless" tags intended for the application
of CSS.
FONT tag STYLE attribute:
Style Sheets can be applied 'inline' using the STYLE attribute, which
can be applied to any valid HTML tag/container. Notice that CSS uses
a different syntax than HTML, i.e., the ATTRIBUTE's NAME is separated
from it's VALUE by a colon.
usage:
<font size="7" color="#666666"
face="sans-serif" style="font-size:22px;">Inline
Style</font>
Attributes:
- font-size:
- UNITS
relative units: px
| em | ex
absolute units:
pt | pc | cm | mm | in
"ABSOLUTE" (similar to <font size="3">):
xx-small | x-small | small | medium | large | x-large
| xx-large
RELATIVE: smaller | larger
PERCENTAGE: 150%
- font-weight:
- ABSOLUTE: 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900 |
RELATIVE: bold | bolder | lighter | normal
- background-color:
- use hexadecimal color, or name
- color:
- use hexadecimal color, or name
- font-family:
- comma separated list of font names, e.g.: "Verdana,
Arial, Helvetica, sans-serif;"
remember to include generic name at end of list:
sans-serif | serif | monospace
usage:
<font size="7" color="#cccccc"
face="sans-serif" style="font-size:12px; font-family:
Geneva,Trebuchet,sans-serif; font-weight:800; background-color:#333333;">Inline
Style</font>
INLINE POSITIONING
- position:
- "position: relative; left: 36px; top:
36px;"
<font size="7" color="#666666" face="sans-serif"
style=" font-size:22px; position: relative; left: -6px; top: 36px;">Inline
Style</font>
-
|