Cascading Style Sheets

6 Pages·5.495 MB·English

by  BarCharts, Inc.

BarCharts,Inc.® WORLD’S #1 QUICK REFERENCE SOFTWARE GUIDE
INTRODUCTION TYPES OF CSS RULES
HTML SELECTOR
The HTML tag contains the selector; <table> con-
tains the selector “table”; CSS may use the selector to
redefine the default style of a selector; table { font:
bold 12pt Arial; };this definition forces all tables to
have the same font attributes
CLASS
AClass is a means for you to define your own tag
and apply it to any HTML tag
.myContent { font: bold 12pt Arial; }
ID
An ID is used to define an element as an object; this
object will now be accessible to JavaScript functions
#myObject { position: absolute; top: 10px; }
HTML is a markup language that defines the with each new version; each new version also
structure of a web page, and CSS tells the HTML provides more cross-browser capability; in other
tags how to behave; CSS can be used to redefine words, the styles defined would appear the same PARTS OF CSS RULES
HTMLtagsordefine custom tags; styles encom- in different web browsers: Opera, Netscape,
selector { property: value; }
pass manyfont attributes that maybe predefined Mozilla, Safari, Internet Explorer—while these
as a group, and then applied to similar elements are not the only web browsers on the market, they
All rules have the same structure;
within a document or an entire website; CSS are the most commonly used
allows the designer to applyaset of styles to a cus-
SELECTOR
tom tag; “content”for example, and then all docu- For this tutorial, the code editor used is TextPad
-HTML TAGS, CLASS, OR AN ID
ment elements defined as “content”will look the 4; this powerful code editor can be downloaded PROPERTY
same; this tag may be defined in one central loca- from their website for free; this program is avail- -what is being defined; font, font size, etc.
tion and therefore any changes can be made in one able in several different languages and is compat- VALUE
place and affect all occurrences of “content”; ible with all versions of Windows, including NT: -each property has different types of values:
CSS is a separate code that works with HTML http://www.textpad.com Boolean, numeric, percentages, and others
to enhance the appearance of a document which The Code for this tutorial was tested using
can also be applied across an entire website; Internet Explorer 6 on Windows XP This is only the general syntax for rule selectors; rule
CSShas evolved into a standard that has improved selectors mayhavemultiple properties
TEXT PAD
1. New File, Open File, Save File
- standard features on most
menu bars; TextPad allows
you to customize the default
1 2 3 4 5 6 7 8 9 10
document type
2. Manage Files, Print, Print
Preview, Full Screen View – 7. Preview in Web Browser, Spell 8. Find, Replace, Find in Files –
Manage Files dialog allows Check, SortAscending, Compare a. Find will search the entire doc-
you to perform multiple func- Files – you can customize which ument or all open documents
TextPadis a text editor that allows you to edit tions on the active document browser is the default browser for b. Replace will find and replace
any text-based file extension (.bat, .c, .java, 3. Cut, Copy,Paste TextPad if you have more than code or text
etc.); it also has compiling power for C# and 4. Undo, Redo – the redo c. Find in Files allows searching
one installed; Spell Check
Java Programmers; it can also edit HTML amount can be customized for words or code in documents
files as well as CSS files; the appealing fea- 5. Text Indent, Text Outdent – a Dictionary can be customized; by file extension or by user
ture to most web programmers is that it uses useful feature when looking at Sort Dialog is feature-rich; users choice
line numbers as well as color-coded display hundreds of lines of code can customize what to use as the 9. Macro Toolbar
of most document classes; line numbers can 6. Word Wrap, Visible Line sort key and many other features; a. Record
be helpful when troubleshooting code, as Breaks – useful when files Compare Files is very useful to b. Pause
most browsers will return the line number have to have predetermined ensure document changes were c. Run Macro
where an error has occurred columns or widths applied 10.Help Menu
SELECTORS CLOSE UP
The document will render any Explorer, does not allow any position properties to
imported or linked styles; then 1. HTML SELECTORS have any affect
any embedded styles (defined a. This type of selector allows you to alter the default styles of 2. CLASS SELECTORS
in the HEAD section) will over- HTML tags a. This type of selector allows web designers to cus-
ride any overlapping styles, as b. There are some HTML tags which cannot have their default tomize selectors to suit different needs; the only
well any inline styles (defined in properties overridden; <b>, for example, will always create names that you cannot use to name your selectors are
the HTML Tag in the document) a BOLD font-weight; however, you may customize other reserved JavaScript words; Class Selectors may be
will override any overlapping properties available for this tag; as such, some properties are
applied to any HTML tag or only to specific HTML
styles; Inline Styles will always not available in all HTML tags even if you define them in
tags
havethe last word your rules; the <body> tag for example, in Internet
1
Selectors Close Up (continued)
b. CSS also allows you to create dependent 3. ID SELECTORS
classes a.ID Selectors, like Class Selectors,
These classes are only applied if their parent or allow web designers to customize
dependent tag is applied; any selector and selectors to suit different needs; the
dependent class separated by a period creates a only names that you cannot use to
dependent class; this definition of customStyle name your selectors are reserved
will only be applied if a <P> Tag is used JavaScript words; Class Selectors
p.customStyle { font: bold italic Verdana; may be applied to any HTML Tag
color: #FFFFFF; or only to specific HTML Tags
padding: 8px; b.ID Selectors allow JavaScript func-
} tions to access and identify unique
c. <p class= “customStyle”>content</p> objects in the document; for this
In an HTML document, any text between the reason, best practice dictates that an
<P> Tags defined with the class custom Style ID should only be used once per d.APPLY A SELECTOR
will be affected by the rules defined in the cus- page i. <p id=”customID”>.....</p>
tom style class; this class can be defined in an c.DEFINE AN ID SELECTOR * Note: Even though the # sign is used in the definition, it is not
embedded style or an external stylesheet, and i. #customID { color: red; margin-left: used in the identifier; ID Selectors do not require a definition to
combined with inline style or ID Selectors 9em; position: relative; } be used in a document to identify an object
RULE LOCATIONS
HTML TAG-“inline rule,” used to affect a single tag with- 4. Repeat with as many selectors as needed
inthe document; 5. Close the style tag [</style>]
ADDING STYLES TO HTML TAG
<pstyle = “font: small-caps bold ‘Arial’, sans-serif; ADDING STYLES TO A WEB SITE
color: blue” > (Inline styles)
The previous style rules were applied to a document
The flexibility of CSS allows you to set the
HEAD-“embedded rule,” used in the head section of a web from within a document; external CSS files, which
style for an individual element:
page, and defined using <style> tags are text files with a list of properties and values, are
<p style = “font: small-caps bold Arial, available to any document that can import or link to it
<style type=”text/css” media=”screen”><!—
sans-serif; color:#FF0000;”>CONTENT</p> from within a website; the file, which is available
.myContent { font: bold 12pt Arial; } - -
globally,is a text file saved with an extension of .css
></style></head>
The syntax is defined as follows; the style
<style type=”text/css” media=”screen”>
attribute allows you to customize the appear-
EXTERNAL DOCUMENT - “external rule,” used by ance of the HTML tag <P>(Paragraph); the def- <!-{
importing or linking to from an HTML document in your inition is in quotes; the property font: value; @import url(customStyles.css);
website
property color:value blue }- ->
</style>
<link rel=”stylesheet” href=”2col_rightNav.css”
ADDING STYLES TO A WEB PAGE
type=”text/css” /></head>
or
(Embedded styles)
<link r e l = ” s t y l e s h e e t ”
Using Embedded styles, CSS allows you to href=”2col_rightNav.css” type=”text/css”
define the style rules for a document in the /></head>
Head section
1. Create a new file using Notepad or similar text
<style type=”text/css” media=”screen”>
editor, and save within the web directory as
<!-
“any_name”.css; add Selectors to your style
.myContent {
font: bold 12pt Arial; sheet to create custom rules using the syntax
color: #EE0000; mentioned earlier for different types of selectors;
margin-right: -5px; HTML Tags, CLASS Tags, ID Tags, and groups
} of tags separated byspaces or commas
--> a. P{font: normal Arial, sans_serif;
</style> Color: #000000;
</head> Margin-right: 5px;
1. Define the style type; [< style }-HTML Definition
type=”text/css”...]
2. Define the selector or selectors being .customStyle { font: bold italic Verdana;
defined,followed by open curly braces: color: #FF7789;
[.myContent (class selector) { ] padding: 3px;
a. HTML TAGS ( p, h1, table, etc.) }- CLASS Definition
b. CLASS SELECTOR (.myContent,
.moreContent, etc.) #customID { font: bold italic Trebuchet MS;
c. ID SELECTOR (#content, #category, color: #FF7789;
#titles, etc. ) padding: 3px;
d. GROUPS OF SELECTORS, SEPARAT- }- ID Definition
ED BY COMMAS; defining styles with p, customStyle, customID { font: bold italic
the same rules Verdana;
e. A GROUP OF SELECTORS SEPA- color: #FF7789;
RATED BY SPACES; defining styles in padding: 3px;
context
}- GROUP definition using
3. Begin to define the properties and the asso-
commas; defining styles with the same
ciated values
i. font: bold 12pt Arial; rules
ii. color: #EE0000; p customStyle customID { font: bold italic
iii.margin-right: -5px; Verdana;
iv.}- Close the Rule with the close color: #FF7789;
curly brace padding: 3px;
2
Rule Locations (continued)
}- GROUP definition using spaces; defining then the selector is closed with a sheet was designed for; websites may have multiple CSS
styles in context close curly brace; repeat this syntax stylesheets and, as well, each stylesheet has the ability to
b. Notice that the <style> tag is not used in the for each type of selector import or link to each other, and each document has the abil-
CSS file; the first line of a stylesheet begins c. Common practice when naming ity to import or link to multiple CSS stylesheets
with a selector, open curly braces, a list of prop- CSS files is to use a name associat-
erties and their values separated by semicolons; ed with the area or areas that the
1.Styles with the Same Rules DEFINING STYLES These pseudo-classes may also be defined
a. CSS allows you to create classes with the using inline styles; color, text-decoration, cur-
same rules by separating the names of the iii. <p> <a href=”#”>LINK1</a></p> - this link sor are some available elements
styles with commas: h1, h2, h3, p {font- will be red a. A: link - the appearance of a link in the
color: black;}; the individual attributes can iv.<div class=”customClass”><a href=”#”> document
still be defined; the individual attributes
LINK2 </a></p> -this link will be blue b. A: visited - the appearance of link that
should be defined inline after the grouping to
* Link2 will only be blue if the parent is a div using has already been visited
allow individual rules to override group rules
customClass c. A: hover - the appearance of a link
as needed
when the mouse is over the link
b. [SAMERULES.JPG]
2.Styles in Context d. A: active - the appearance of a link that
a. If a rule is applied within a rule, the tags are gets a click
said to be nested; the initial tag is called the e. There are other pseudo-classes that are
parent tag;i.e.; <p class=”rule1”><div available, however, not all are support-
id=”customID”>blah blah ed across all browser platforms
blah</div></p> 4.Cascade? Not for your dishwasher; the pre-
i. In the code example above, “rule1” is the par- ferred strategy to applying CSS to your
ent and “customID” is the child; you are
website is to use External Style Sheets; this
allowed to “nest” your tags as deeply as need-
allows the designer to update style changes
ed, however, the last tag has the last say; in
for the entire site in one place; the cascad-
other words, the last child tag will be the ulti-
3.Pseudo-Classes contain unique attributes that can be ing ability of CSS allows you to define a
mate selector for the rules that are applied to
the desired content defined separately; one example of this is the Anchor Tag global.css file for elements that will remain
ii.To create a Contextual Selector, use the fol- (<a> ); the attributes associated with a link are consid- the same throughout the site; designers will
lowing format; ered unique attributes and as such may be defined using typically then define a sectional Style Sheet
• pa: link {color: red;} CSS; the attributes are supported across the most com- that will have elements that are not defined
• div.customClass a: link {color: blue;} mon browsers globallybut bysection
FONT CONTROLS D.FONT_WEIGHT
CSS extends the limited options of
The most basic element in any document is the Font, or letterforms;
A.In the rule for DEFINING THE FONT FAM- HTML (bold or not) with respect to the
this most basic element, when used incorrectly, can disrupt the
ILY, for the class “title_text,” the primary font variety of settings available for this font
delivery of content to the user; CSS allows designers to extend the
choice is Arial; if the client does not have property
limitations of simple HTML tags; Type Style or Font Family is
Arial, then use Trebuchet MS (quotes because i. BOLD—just as the name says, bold
divided into five basic categories
font name has twowords); if Trebuchet is not face font
available, then use sans-serif as the font; the ii. Bolder or Lighter—with respect to
1. Serif: This font family has decorations at the tips of the letters; best list can be as long as you like, as long as com- the font weight of the parent element
for large text mas separate the values and two-word font iii.100 to 900 in 100 increments
2. Sans Serif: This font family does not have decoration at the tips of names are in single quotes; all 5 categories of increases the weight of the font
the letters; commonly used for content or smaller text families are available across the most popular iv.NORMAL—overrides all weight
3. Monospace: This font family may or may not have serifs; this fam- browsers; the client’s browser will always try settings
ilyforces upper and lower case letters to occupythe same amount to default to the same familyif the fonts spec- • Rule syntax: font-weight: bolder;
of space ified are not available
• font-variant: values: normal or
4. Cursive: As the name states, this family mimics handwriting and is http://www.developer.apple.com/fonts
primarilyfor decorativeuse http://www.microsoft.com/typography/fonts smallcaps
5. Fantasy: This family contains fonts that do not fit into the other
SETTING MULTIPLE FONT VALUES
four categories; typically, this family will have decorative fonts and B.FONT SIZE
dingbats (i.e.; Wing Dings) HTML only allows for 7 variations of size.
CSS allows the designer the flexibility to
CSS gives developers access to sizing their
THE FONT define multiple font properties at once
font by pixels (px), points (pt), percentages
(%), font size (em), or size relative to sur-
Rule syntax: font: bolder italic 12pt
rounding text
Arial, sans-serif;
Defining the font size in a rule:
+ font: ‘font-style’ ‘font-variant’ ‘font-
Rule syntax: font-size: 12pt;
weight’ ‘font-size’ ‘line-height’ ‘font-
family’
• Expressions allowed: xx-small, x-small,
small, medium, large, x-large, xx-large
• Rules that you do not define will use
• Smaller and larger may be used to refer-
ence the relation to the parent element the default setting
C. FONT_STYLE Did You Know?
There are three available styles
i. Normal CSS’ most common application is to
ii.Italic—uses the italic version of the font style web pages written in HTML and
when present, otherwise oblique XHTML, but the language can be applied
iii.Oblique—the computer slants the font to to any kind of XML document, including
title_text { the right SVG and XUL; the CSS specifications
font-family: Arial, ‘Trebuchet MS’, sans-serif; iv.Defining the font style in a rule: Rule are maintained by the World Wide Web
} syntax: font-style: italic; Consortium (W3C)
3
TEXT CONTROLS
These controls when used effectively, can enhance • This rule is typically applied to media for print
legibility in a document: 8. color
b. Rule syntax: text-align: justify; a. The color property controls various elements in addi-
1. text spacing c. Possible Values: tion to font; Horizontal Rules and form elements are
a. The amount of space between letters in a i. + left: left margin aligned affected by the color property
word, kerning ii.+ right: right margin aligned b. Rule syntax: color: red;
b. Rule syntax: letter-spacing: 2em; iii.+ center: centered text c Possible Values:
c. Using normal will override parent element iv.+ justify: right and left margin i. Color Names [red, white, etc. ];
settings aligned ii.Hexadecimal Color Codes [#FFE000];
2. word spacing 6. vertical text alignment iii.RGB color codes [rgb(r, g, b): rgb (203,0,255) or rgb
a. The amount of space between words a. The vertical alignment of an ele- (80%, 50%, 30%)];
b. Rule syntax: word-spacing: 8px; ment in relation to elements around • RGB values can be percentages or whole num-
c. Using normal will override parent element
it bers between 0 and 255
settings
b. Rule syntax: vertical-align:baseline; • Check for Browser Safe Valueswhen designing
3. line spacing
c. Possible Values: for the screen
a. Line spacing adds space from the baseline
i. + super: above the baseline 9. decorating text
of the text to a predetermined or default
ii.+ sub: below the baseline a. This control is used typically to identify or differen-
height
b. Rule syntax: line-height: 2; iii.+ baseline: on the baseline (nor- tiate important text
c. Possible Values: mal state) b. Rule syntax: text-decoration: underline;
c. Possible Values:
i. Number - this value is multiplied by the iv.+ text-top: aligns the tops of adja-
i. Underline
font size cent elements
ii.Overline
ii.Length value - in pixels (px) or exact v. + text-bottom: aligns the bottoms
iii.Line-through
space (em) of the adjacent elements
iv.Blink
iii.Percentage - proportional to the font size vi.+ percentages: positive for above
and negative for below the base- v. None
iv.Using normal will override parent ele-
line
ment settings
4. text case 7. indenting paragraphs
a. Allows the designer ultimate control over a. Due to the fact that browsers com-
text case press multiple spaces into one,
b. Rule syntax: text-transform: uppercase; most designers opt to use a line
c. Possible Values: break for new paragraphs rather
i. +capitalize; capitalizes the first letter only than the traditional indentation of
ii.+ uppercase: capitalizes all letters five spaces; CSS allows designers
iii.+lowercase: forces lowercase on all let- to specify indentation using the fol-
ters lowing rule
iv.+ none: overrides parent element settings b. Rule syntax: text-indent: 2em;
d. This property is typically applied to c. Possible Values:
dynamic content d. Length value - any units used by font-
5. horizontal text alignment size ( px, em, pt )
a. CSS control rules for alignment and justi- i. Percentage - proportional to the
fication of text paragraph width
Elements are identified by HTML container tags ( <p> ELEMENT CONTROLS d.To access one side margin, you can specify
ELEMENT </p> ); elements mayalso be nested; the using the following rule syntax:
first element is said to be the parent and then all sub- b.Rule syntax: margin: 7px; i. Rule syntax: margin-top: 10px;
sequent elements are children of each other in succes- Rule syntax: margin: 7px 2em 25% 7px;
sion; <div> <p> nested elements </p></div> c. CSS allows the designer to set from one to ii.Rule syntax: margin-bottom: 7px;
four values for top, bottom, left, rightsides iii.Rule syntax: margin-left: 4px;
ELEMENT COMPONENTS of the element respectively: iv.Rule syntax: margin-right: 7px;
i. 1 value: sets all four sides to the same 3.Border, as the name states, is the perimeter of
Each element has four sides (top, bottom, left and value the element and has its own properties that
right), and CSS affords designers access to five dif- ii.2values: sets the top/bottom value, and
can be defined; the designer may define the
ferent properties of each side that can be defined in the left/right value
width, style and color for all four sides simul-
CSSrules: iii.3values: sets the top, left/right, and bot-
tom values taneously:
1.Height and width apply to the length of the sides of iv.4 values: sets each individually: top, bot- a. Rule syntax: border: double 7px #FFF999;
the element tom, left and right b.Rule syntax: border: [style] [width] [color];
a. Height is the length of the left and right sides
i. Rule syntax: height: 100px;
ii. Possible Values:
• Length values
• Percentages (proportional to the parent ele-
ment)
• Auto - maximum height needed to display
all the content
b.Width is the length of the top and bottom sides
i. Rule syntax: width: 75px;
ii. Possible Values:
• Length values
• Percentages
• Auto - the maximum space to the right
before hitting the parent element
2.Margin defines the distance from the element bor-
der and other elements
a. CSS allows the developer to access all four sides
independently or together
4
ELEMENTS CONTROLS(continued)
a. Rule syntax: padding: 7% 8cm 7px 1em;
b.Possible Values:
i. Length values
ii. Percentages - proportional to the parent element
iii. Inherit
• 1 value: sets all four sides to the same value
• 2 values: sets the top/bottom value, and the left/right value
• 3values: sets the top, left/right, and bottom values
• 4 values: sets each individually: top, bottom, left and right
5. The Center of the Element contains Content and Background
a. Background property allows designers to use images or colors to decorate the back-
ground of an element
b.Rule syntax: background: white;
i. Possible Values; color names, hexadecimal, rgb, or transparent
c. Rule syntax: background: url(bg.gif);
i. Acceptable image files are jpg, gif, or png, using a complete url to the image file
ii.When using image for your background, CSS affords designers more control over
how the background image is displayed
• Additional rules: background-repeat: no-repeat;
a. + no-repeat
Border Styles Border Colors Border Width b. + repeat-x
c. + repeat-y
Dotted [color ] - hexadecimal Thin
d. +repeat - horizontally and vertically
Dashed Transparent Medium
• Add background-attachment: fixed;
Solid Inherit Thick
a. + fixed - content scrolls over a fixed background
Double [length value ]
b. + scroll - background scrolls with the content
Groove Inherit
• Add background-position: 8px 9px;
Ridge
a. Length values maybe positive or negative and is in relation to the top-left cor-
Inset
Outset ner of the element; left position first, then top position
None b. Percentages (horizontal position first, then vertical position)
Inherit
ELEMENT DISPLAY
* Supported across Internet Explorer 4, Netscape 6, Safari1, Opera 3.5, CSS1 Rule syntax: display: inline;
c. Each border attribute can also be controlled independently: 1. inline - stops line breaks after an element
i. Rule syntax: border-style: dashed; 2. block - forces line breaks before and after the element
ii.Rule syntax: border-color: #FFFFFF; 3. none - makes the content invisible
iii.Rule syntax: border-width: 7px; 4. list-item - displays a bullet and a line break before and after, with or without the list tag
iv.Rule syntax: border-top: [width] [style] [color]; 5. there are other items available but they are not widely supported by IE for Windows
+ border-bottom: [width] [style] [color];
+ border-left: [width] [style] [color];
+ border-right: [width] [style] [color];
v. + border-style: [top] [bottom] [left] [right];
+ border-width: [top] [bottom] [left] [right];
+ border-color: [top] [bottom] [left] [right];
• 1value: sets all four sides to the same value
• 2 values: sets the top/bottom value, and the left/right value
• 3values: sets the top, left/right, and bottom values
• 4 values: sets each individually: top, bottom, left and right
4. Padding defines the distance between the element border
and the contents of the element
ELEMENT POSITIONING CONTROLS
Positioning Types a. Add right: 22px;
1. Rule syntax: position: absolute; i. Length values - the distance between
2. Possible Values iii.Auto - *if used with absolute, lets the brows- the element’s right edge, and the right
a. Static: flows content using default layout er control the position; otherwise, the value edge of the window or parent element
and cannot be moved is zero ii.Percentages - right position relative to
b. Relative: inline display,position in relation f. Add left: 38px; the window or parent element’s width
to its natural position, using the top, left, i. Length values - the distance between the ele- iii.Auto - *if used with absolute, lets the
right, and bottom attributes ment’s left edge, and the window or parent browser control the position; other-
i. Add top: 7px; element; wise, the value is zero
c. Absolute: defines the actual position using ii.Percentages - left position relative to the
b. Add bottom: 52px;
the top, left, right, and bottom attributes windowor parent element’swidth;
i. Length values - the distance between
i. Add left: 22px; iii.Auto - *if used with absolute, lets the brows-
the element’s bottom edge, and the
d. Fixed: (not supported by IE for Windows) er control the position; otherwise, the value
bottom edge of the windowor parent
the position on the screen remains the is zero
element
same even when the document scrolls
ii.Percentages - bottom position relative
e. Add top: 250px; CSS flexibility allows designers to use both left and
to the window or parent element’s
i. Length values - distance between ele- top or either one byitself; another feature available in
ment’s top edge and top edge of the win- element positioning is to use the bottom and right height
dow or parent element sides as the determining factors for an element’s posi- iii.Auto - *if used with absolute, lets the
ii.Percentages - proportional to the height tion; the elements may be combined with each other, browser control the position; other-
of the window or parent element top/right, or bottom/left wise, the value is zero
5
STACKING OBJECTS
Another property available when using the position rule
isthe z-index; the z-index can be used to layer or stack
elements; the stacking order is a non-decimal value or
zero; when elements overlap, the higher z-index will take
the top position
See images
List & Interface Controls
1. + list-style - the rule that grants access to the follow-
ing attributes
a. Attributes:
i. Line-style-image
ii.List-style-type (image, bullet)* see bullet table
iii.List-style-position
b. Rule syntax: li{
List-style: url(one.gif) circle inside;
}
The list-style properties may be defined together or indi-
vidually
List-Style_Type Values
1. + list-style-image - 2. + list-style-type - circle-see the table above for
url ( one.gif ) -allows possible values
Dotted
developers to use a Dashed Rule syntax: list-style-type; square;
custom image (jpg, Solid 3. +list-stlyle-position - inside - following lines
gif, or png) for list will line up with the bullet
Double
item bullets a. outside - following lines will line up with
Groove
Rule syntax:list- the first line of text first letter
Ridge
style-image: Inset Rule syntax list-style-position: inside;
url(one.gif);
Outset
None
Inherit
BROWSER STANDARDS CHANGING THE CURSORS DEBUGGING CODE
Browser standards were created in an effort to have a common The image used for the cursor is determined by 1. Make sure the property you are try-
language across multiple browser platforms; while this is true for the browser and as such is accessible using CSS ing to define is supported by the
most, not all features are supported across all browser platforms; browser you are using to test
below is a list of browsers and the extent of their adherence to Rule syntax: cursor: help; 2. Check for typing errors; CSS is not for-
CSS Standards: Possible values: giving with spelling errors
Auto: browser’schoice 3. Not all properties are available to all
IE4 - CSS1 None: no cursor displayed elements; verify that the property is
IE5+6 - CSS1 (most), CSS2 (most) url: location of a graphic to use* available
IE5 - Mac Version CSS1 (all), CSS2 (most) not supported across all browsers 4. CSS definitions can be neutralized by
N4 - CSS1 (most) Name: cursor type name incorrect curly braces ( { )
N6-CSS1, CSS2 •crosshair 5. Always check to make sure that HTML
Mozilla, Firebird, Camino - CSS1, CSS2 •e-resize container tags are properly closed
Safari - Mac- CSS1, CSS2 (most) •hand 6. Check for conflicting, overriding, and
Opera - CSS1, CSS2 •help inheritance for elements
•move 7. Delete the definition and try typing the
Did You Know? •ne-resize definition again
•n-resize 8. Validate your code using W3C:
The first commercial browser to support CSS was Microsoft's •nw-resize http://www.jigsaw.W3.org/css-validator/
Internet Explorer 3, which was released in August 1996 •pointer
•se-resize
Did You Know?
•s-resize
BROWSER SAFE FONTS •sw-resize
CSS started in 1994; it was developed
•text
to help create a newspaper-like layout
•wait
Name Weight-Styles Family •w-resize for a Web page
Arial Bold, italic, bold italic Sans-serif
Arial Black Sans-serif
PRICE
Comic Sans MS Bold Cursive Customer Hotline # free downloads &
Courier New Bold, italic, bold italic Monospace 1.800.230.9522 UC.ASN. $$58..9955 quhiucndkresdtsu odf ytit.lecso amt
Georgia Bold, italic, bold italic Serif
Impact Bold, italic, bold italic Sans-serif
All rights reserved.No part of this
Times New Roman Bold, italic, bold italic Serif publication may be reproduced or
transmitted in any form, or by any ISBN-13: 978-142320805-1
Verdana Bold, italic, bold italic Sans-serif means, electronic or mechanical, ISBN-10: 142320805-6
including photocopy, recording, or
Webdings Fantasy any information storage and retrieval
system, without written permission
from the publisher.
http://www.developer.apple.com/fonts ©2006 BarCharts,Inc.Boca
Raton,FL 1008
http://www.microsoft.com/typography/fonts
6