CHAPTER 16
Scripting CSS
Cascading Style Sheets (CSS) is a standard for specifying the visual presentation of
HTML documents. CSS is intended for use by graphic designers: it allows a designer
to precisely specify fonts, colors, margins, indentation, borders, and even the position
of document elements. But CSS is also of interest to client-side JavaScript programmers
because CSS styles can be scripted. Scripted CSS enables a variety of interesting visual
effects: you can create animated transitions where document content “slides in” from
the right, for example, or create an expanding and collapsing outline list in which the
user can control the amount of information that is displayed. When first introduced,
scripted visual effects like these were revolutionary. The JavaScript and CSS techniques
that produced them were loosely referred to as Dynamic HTML or DHTML, a term
that has since fallen out of favor.
CSS is a complex standard that, at the time of this writing, is undergoing active devel-
opment. CSS is a book-length topic of its own and complete coverage is well beyond
the scope of this book.
1
In order to understand CSS scripting, however, it is necessary
to be familiar with CSS basics and with the most commonly scripted styles, so this
chapter begins with a concise overview of CSS, followed by an explanation of key styles
that are most amenable to scripting. After these two introductory sections, the chapter
moves on to explain how to script CSS. §16.3 explains the most common and important
technique: altering the styles that apply to individual document elements using the
HTML 
style
attribute. Although an element’s 
style
attribute can be used to set styles,
it is not useful for querying an element’s style. §16.4 explains how to query the com-
puted style of any element. §16.5 explains how to alter many styles at once by altering
the 
style
attribute of an element. It is also possible, though less common, to script
stylesheets directly, and §16.6 shows how to enable and disable stylesheets, alter the
rules of existing stylesheets, and add new stylesheets.
1. But see CSS: The Definitive Guide by Eric Meyer (O’Reilly), for example.
413
Pdf link open in new window - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
add email link to pdf; convert a word document to pdf with hyperlinks
Pdf link open in new window - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
add hyperlink to pdf acrobat; clickable links in pdf from word
16.1  Overview of CSS
There are many variables in the visual display of an HTML document: fonts, colors,
spacing, and so on. The CSS standard enumerates these variables and calls them style
properties. CSS defines properties that specify fonts, colors, margins, borders, back-
ground images, text alignment, element size, and element position. To define the visual
appearance of HTML elements, we specify the value of CSS properties. To do this,
follow the name of a property with a colon and a value:
font-weight: bold
In order to fully describe the visual presentation of an element, we usually need to
specify the value of more than one property. When multiple name:value pairs are re-
quired, they are separated from one another by semicolons:
margin-left: 10%;      /* left margin is 10% of page width */
text-indent: .5in;     /* indent by 1/2 inch */
font-size: 12pt;       /* 12 point font size */
As you can see, CSS ignores comments between 
/*
and 
*/
. It does not support com-
ments that begin with 
//
, however.
There are two ways to associate a set of CSS property values with the HTML elements
whose presentation they define. The first is by setting the 
style
attribute of an individual
HTML element. This is called the inline style:
<p style="margin: 20px; border: solid red 2px;">
This paragraph has increased margins and is 
surrounded by a rectangular red border.
</p>
It is usually much more useful, however, to separate CSS styles from individual HTML
elements and define them in a stylesheet. A stylesheet associates sets of style properties
with sets of HTML elements that are described using selectors. A selector specifies or
“selects” one or more elements of a document, based on element ID, class, or tag name,
or on more specialized criteria. Selectors were introduced in §15.2.5, which also
showed how to use 
querySelectorAll()
to obtain the set of elements that match the
selector.
The basic element of a CSS stylesheet is a style rule, which consists of a selector followed
by a set of CSS properties and their values, enclosed in curly braces. A stylesheet can
contain any number of style rules:
p {                      /* the selector "p" matches all <p> elements */
text-indent: .5in;   /* indent the first line by .5 inches */
}
.warning {                    /* Any element with class="warning" */
background-color: yellow; /* gets a yellow background */
border: solid black 5px;  /* and a big black border */
}
414 | Chapter 16: Scripting CSS
C# PDF: PDF Document Viewer & Reader SDK for Windows Forms
Please note that, there will be a pop-up window "cannot open your file" if your loaded Please click the following link to see more C# PDF imaging project
adding hyperlinks to pdf; add url pdf
VB.NET Image: VB Code to Download and Save Image from Web URL
to download image from website link more easily. reImage, "c:/reimage.png", New PNGEncoder()) End powerful & profession imaging controls, PDF document, image
pdf hyperlink; add hyperlinks pdf file
A CSS stylesheet can be associated with an HTML document by enclosing it within
<style>
and 
</style>
tags within the 
<head>
of a document. Like the 
<script>
element,
the 
<style>
element parses its content specially and does not treat it as HTML:
<html>
<head><title>Test Document</title>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
p { font-size: 24px; }
</style>
</head>
<body><p>Testing, testing</p>
</html>
When a stylesheet is to be used by more than one page on a website, it is usually better
to store it in its own file, without any enclosing HTML tags. This CSS file can then be
included in the HTML page. Unlike the 
<script>
element, however, the 
<style>
ele-
ment does not have a 
src
attribute. To include a stylesheet in an HTML page, use a
<link>
in the 
<head>
of a document:
<head>
<title>Test Document</title>
<link rel="stylesheet" href="mystyles.css" type="text/css">
</head>
That, in a nutshell, is how CSS works. There are a few other points about CSS that are
worth understanding, however, and the subsections that follow explain them.
16.1.1  The Cascade
Recall that the C in CSS stands for “cascading.” This term indicates that the style rules
that apply to any given element in a document can come from a “cascade” of different
sources:
• The web browser’s default stylesheet
• The document’s stylesheets
• The 
style
attribute of individual HTML elements
Styles from the 
style
attribute override styles from stylesheets. And styles from a docu-
ment’s stylesheets override the browser’s default styles, of course. The visual presen-
tation of any given element may be a combination of style properties from all three
sources. An element may even match more than one selector within a stylesheet, in
which case the style properties associated with all of those selectors are applied to the
element. (If different selectors define different values for the same style property, the
value associated with the most specific selector overrides the value associated with less
specific selectors, but the details are beyond the scope of this book.)
To display any document element, the web browser must combine the 
style
attribute
of that element with styles from all the matched selectors in the document stylesheets.
The result of this computation is the actual set of style properties and values that are
16.1  Overview of CSS | 415
Client-Side
JavaScript
C# PDF Convert to Jpeg SDK: Convert PDF to JPEG images in C#.net
Open source codes can be added to C# class. String inputFilePath = Program.RootPath + "\\" 1.pdf"; PDFDocument doc = new PDFDocument(inputFilePath
add links to pdf in acrobat; change link in pdf file
C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
is trying to display a PDF document file inside a browser window. PDFDocument pdf = new PDFDocument(@"C:\input.pdf"); pdf.ConvertToVectorImages(ContextType.HTML
pdf email link; adding an email link to a pdf
used to display the element. This set of values is known as the computed style of the
element.
16.1.2  CSS History
CSS is a relatively old standard. CSS1 was adopted in December 1996 and defines
properties for specifying colors, fonts, margins, borders, and other basic styles. Brows-
ers as old as Netscape 4 and Internet Explorer 4 include substantial support for CSS1.
The second edition of the standard, CSS2, was adopted in May 1998; it defines a num-
ber of more advanced features, most notably support for absolute positioning of ele-
ments. CSS2.1 clarifies and corrects CSS2, and it removes features that browser vendors
never actually implemented. Current browsers have essentially complete support for
CSS2.1, although versions of IE prior to IE8 have notable omissions.
Work continues on CSS. For version 3, the CSS specification has been broken into
various specialized modules that are going through the standardization process sepa-
rately. You can find the CSS specifications and working drafts at http://www.w3.org/
Style/CSS/current-work.
16.1.3  Shortcut Properties
Certain style properties that are commonly used together can be combined using special
shortcut properties. For example, the 
font-family
font-size
font-style
, and 
font-
weight
properties can all be set at once using a single 
font
property with a compound
value:
font: bold italic 24pt helvetica;
Similarly, the 
border
margin
, and 
padding
properties are shortcuts for properties that
specify borders, margins, and padding (space between the border and element content)
for each of the individual sides of an element. For example, instead of using the
border
property, you can use 
border-left
border-right
border-top
, and 
border-bot
tom
properties to specify the border of each side separately. In fact, each of these prop-
erties is itself a shortcut. Instead of specifying 
border-top
, you can specify 
border-top-
color
border-top-style
, and 
border-top-width
.
16.1.4  Nonstandard Properties
When browser vendors implement nonstandard CSS properties, they prefix the prop-
erty names with a vendor-specific string. Firefox uses 
moz-
, Chrome uses 
-webkit-
, and
IE uses 
-ms-
. Browser vendors do this even when implementing properties that are
intended for future standardization. One example is the 
border-radius
property, which
specifies rounded corners for elements. This was implemented experimentally in Fire-
fox  3  and  Safari  4  using  prefixes.  Once  the  standard  had  matured  sufficiently,
Firefox 4  and Safari 5 removed  the  prefix and supported 
border-radius
directly.
(Chrome and Opera have supported it for a long time with no prefix. IE9 also supports
it without a prefix, but IE8 did not support it, even with a prefix.)
416 | Chapter 16: Scripting CSS
VB.NET Word: VB.NET Code to Draw and Write Text and Graphics on
fileName, New WordDecoder()) 'use WordDecoder open a wordfile Dim Word document function, please link to Word & profession imaging controls, PDF document, tiff
accessible links in pdf; add link to pdf
C# TIFF: C#.NET TIFF Document Viewer, View & Display TIFF Using C#
TIFF Mobile Viewer in most mobile browsers; Open, load & Free to convert TIFF document to PDF document for management Please link to get more detailed tutorials
adding hyperlinks to a pdf; add hyperlink in pdf
When working with CSS properties that have different names in different browsers,
you may find it helpful to define a class for that property:
.radius10 {               
border-radius: 10px;          /* for current browsers */
-moz-border-radius: 10px;     /* for Firefox 3.x */
-webkit-border-radius: 10px;  /* For Safari 3.2 and 4 */
}
With a class like this defined, you can add “radius10” to the 
class
attribute of any
element to give it a border radius of 10 pixels.
16.1.5  CSS Example
Example 16-1 is an HTML file that defines and uses a stylesheet. It demonstrates tag
name, class, and ID-based selectors, and also has an example of an inline style defined
with the 
style
attribute. Figure 16-1 shows how this example is rendered in a browser.
Figure 16-1. A web page styled with CSS
Example 16-1. Defining and using Cascading Style Sheets
<head>
<style type="text/css">
/* Specify that headings display in blue italic text. */
h1, h2 { color: blue; font-style: italic }
/*
16.1  Overview of CSS | 417
Client-Side
JavaScript
* Any element of class="WARNING" displays in big bold text with large margins
* and a yellow background with a fat red border.
*/
.WARNING {
font-weight: bold;
font-size: 150%;
margin: 0 1in 0 1in; /* top right bottom left */
background-color: yellow;
border: solid red 8px;
padding: 10px;       /* 10 pixels on all 4 sides */
}
/*
* Text within an h1 or h2 heading within an element with class="WARNING"
* should be centered, in addition to appearing in blue italics.
*/
.WARNING h1, .WARNING h2 { text-align: center }
/* The single element with id="special" displays in centered uppercase. */
#special {
text-align: center;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Cascading Style Sheets Demo</h1>
<div class="WARNING">
<h2>Warning</h2>
This is a warning!
Notice how it grabs your attention with its bold text and bright colors.
Also notice that the heading is centered and in blue italics.
</div>
<p id="special">
This paragraph is centered<br>
and appears in uppercase letters.<br>
<span style="text-transform: none">
Here we explicitly use an inline style to override the uppercase letters.
</span>
</p>
Cutting-Edge CSS
As I write this chapter, CSS is in the midst of a revolution, with browser vendors im-
plementing powerful new styles such as 
border-radius
text-shadow
box-shadow
, and
column-count
. Another revolutionary new feature of CSS is web fonts: the ability to
download and use custom fonts with a CSS 
@font-face
rule. (See http://code.google.com/
webfonts for a selection of fonts free for use on the Web and an easy mechanism for
downloading them from Google’s servers.)
Another revolutionary development in CSS is CSS Transitions. This is a draft specifi-
cation that can automatically turn any scripted change to a CSS style into a smoothly
418 | Chapter 16: Scripting CSS
animated transition. (When widely implemented, it will largely obviate the need for
CSS animation code like that shown in §16.3.1.) CSS Transitions is implemented in
current browsers other than IE, but its style properties are still prefixed with vendor-
specific strings. CSS Animations is a related proposal that uses CSS Transitions as a
starting point for defining more complex animation sequences. CSS Animations are
currently only implemented by Webkit browsers. Neither transitions nor animations
are covered in this chapter, but they are technologies that you, as a web developer,
should be aware of.
Another CSS draft that web developers should be aware of is CSS Transforms, which
allows arbitrary 2D affine transforms (rotation, scaling, translation, or any combination
expressed as a matrix) to be applied to any element. All current browsers (including
IE9 and later) support the draft, with vendor prefixes. Safari even supports an extension
that allows 3D transformations, but it is unclear whether other browsers will follow
their lead.
16.2  Important CSS Properties
For client-side JavaScript programmers, the most important features of CSS are the
properties that specify the visibility, size, and precise position of individual elements
of a document. Other CSS properties allow you to specify stacking order, transparency,
clipping region, margins, padding, borders, and colors. In order to script CSS, it is
important to understand how these style properties work. They are summarized in
Table 16-1 and documented in more detail in the sections that follow.
Table 16-1. Important CSS style properties
Property
Description
position
Specifies the type of positioning applied to an element
top
left
Specify the position of the top and left edges of an element
bottom
right
Specify the position of the bottom and right edges of an element
width
height
Specify the size of an element
z-index
Specifies the “stacking order” of an element relative to any overlapping elements; defines a
third dimension of element positioning
display
Specifies how and whether an element is displayed
visibility
Specifies whether an element is visible
clip
Defines a “clipping region” for an element; only portions of the element within this region are
displayed
overflow
Specifies what to do if an element is bigger than the space allotted for it
margin
border
padding
Specify spacing and borders for an element.
background
Specifies the background color or image of an element.
opacity
Specifies how opaque (or translucent) an element is. This is a CSS3 property, supported by
some browsers. A working alternative exists for IE.
16.2  Important CSS Properties | 419
Client-Side
JavaScript
16.2.1  Positioning Elements with CSS
The CSS 
position
property specifies the type of positioning applied to an element. Here
are the four possible values for this property:
static
This is the default value and specifies that the element is positioned according to
the normal flow of document content (for most Western languages, this is left to
right and top to bottom). Statically positioned elements cannot be positioned with
top
left
, and other properties. To use CSS positioning techniques with a docu-
ment element, you must first set its 
position
property to one of the other three
values.
absolute
This value allows you to specify the position of an element relative to its containing
element. Absolutely positioned elements are positioned independently of all other
elements and are not part of the flow of statically positioned elements. An abso-
lutely positioned element is positioned either relative to its nearest positioned an-
cestor or relative to the document itself.
fixed
This value allows you to specify an element’s position with respect to the browser
window. Elements with 
fixed
positioning are always visible and do not scroll with
the rest of the document. Like absolutely positioned elements, fixed-position ele-
ments are independent of all others and are not part of the document flow. Fixed
positioning is supported in most modern browsers but is not available in IE6.
relative
When the 
position
property is set to 
relative
, an element is laid out according to
the normal flow, and its position is then adjusted relative to its position in the
normal flow. The space allocated for the element in the normal document flow
remains allocated for it, and the elements on either side of it do not close up to fill
in that space, nor are they “pushed away” from the new position of the element.
Once you have set the 
position
property of an element to something other than
static
, you can specify the position of that element with some combination of the 
left
,
top
right
, and 
bottom
properties. The most common positioning technique uses the
left
and 
top
properties to specify the distance from the left edge of the containing
element (usually the document itself) to the left edge of the element and the distance
from the top edge of the container to the top edge of the element. For example, to place
an element 100 pixels from the left and 100 pixels from the top of the document, you
can specify CSS styles in a 
style
attribute as follows:
<div style="position: absolute; left: 100px; top: 100px;">
If an element uses absolute positioning, its 
top
and 
left
properties are interpreted rel-
ative to the closest ancestor element that has its 
position
property set to something
other than 
static
. If an absolutely positioned element has no positioned ancestor, the
top
and 
left
properties are measured in document coordinates—they are offsets from
420 | Chapter 16: Scripting CSS
the top-left corner of the document. If you wish to absolutely position an element
relative to a container that is part of the normal document flow, use 
position:rela
tive
for the container and specify a 
top
and 
left
position of 
0px
. This makes the con-
tainer dynamically positioned but leaves it at its normal place in the document flow.
Any  absolutely  positioned children  are then positioned  relative  to  the  container
position.
Although it is most common to specify the position of the upper-left corner of an ele-
ment with 
left
and 
top
, you can also use 
right
and 
bottom
to specify the position of
the bottom and right edges of an element relative to the bottom and right edges of the
containing element. For example, to position an element so that its bottom-right corner
is at the bottom-right of the document (assuming it is not nested within another dy-
namic element), use the following styles:
position: absolute; right: 0px; bottom: 0px;
To position an element so that its top edge is 10 pixels from the top of the window and
its right edge is 10 pixels from the right of the window, and so that it does not scroll
with the document, you might use these styles:
position: fixed; right: 10px; top: 10px;
In addition to the position of elements, CSS allows you to specify their size. This is
most commonly done by providing values for the 
width
and 
height
style properties. For
example, the following HTML creates an absolutely positioned element with no con-
tent. Its 
width
height
, and 
background-color
properties make it appear as a small blue
square:
<div style="position: absolute; top: 10px; left: 10px;
width: 10px; height: 10px; background-color: blue">
</div>
Another way to specify the width of an element is to specify a value for both the 
left
and 
right
properties. Similarly, you can specify the height of an element by specifying
both 
top
and 
bottom
. If you specify a value for 
left
right
, and 
width
, however, the
width
property overrides the 
right
property; if the height of an element is overcon-
strained, 
height
takes priority over 
bottom
.
Bear in mind that it is not necessary to specify the size of every dynamic element. Some
elements, such as images, have an intrinsic size. Furthermore, for dynamic elements
that contain text or other flowed content, it is often sufficient to specify the desired
width of the element and allow the height to be determined automatically by the layout
of the element’s content.
CSS requires position and dimension properties to be specified with a unit. In the ex-
amples above, the position and size properties were specified with the suffix “px,”
which stands for pixels. You can also use inches (“in”), centimeters (“cm”), points
(“pt”), and ems (“em”; a measure of the line height for the current font).
16.2  Important CSS Properties | 421
Client-Side
JavaScript
Instead of specifying absolute positions and sizes using the units shown above, CSS
also allows you to specify the position and size of an element as a percentage of the size
of the containing element. For example, the following HTML creates an empty element
with a black border that is half as wide and half as high as the containing element (or
the browser window) and centered within that element:
<div style="position: absolute; left: 25%; top: 25%; width: 50%; height: 50%;
border: 2px solid black">
</div>
16.2.1.1  The third dimension: z-index
You’ve seen that the 
left
top
right
, and 
bottom
properties can specify the X and Y
coordinates of an element within the two-dimensional plane of the containing element.
The 
z-index
property defines a kind of third dimension: it allows you to specify the
stacking order of elements and indicate which of two or more overlapping elements is
drawn on top of the others. The 
z-index
property is an integer. The default value is
zero, but you may specify positive or negative values. When two or more elements
overlap, they are drawn in order from lowest to highest 
z-index
; the element with the
highest 
z-index
appears on top of all the others. If overlapping elements have the same
z-index
, they are drawn in the order in which they appear in the document so that the
last overlapping element appears on top.
Note that 
z-index
stacking applies only to sibling elements (i.e., elements that are chil-
dren of the same container). If two elements that are not siblings overlap, setting their
individual 
z-index
properties does not allow you to specify which one is on top. Instead,
you must specify the 
z-index
property for the two sibling containers of the two over-
lapping elements.
Nonpositioned elements (i.e., elements with default 
position:static
positioning) are
always laid out in a way that prevents overlaps, so the 
z-index
property does not apply
to them. Nevertheless, they have a default 
z-index
of zero, which means that positioned
elements with a positive 
z-index
appear on top of the normal document flow and posi-
tioned elements with a negative 
z-index
appear beneath the normal document flow.
16.2.1.2  CSS positioning example: Shadowed text
The CSS3 specification includes a 
text-shadow
property to produce drop-shadow ef-
fects under text. It is supported by a number of current browsers, but you can use CSS
positioning properties to achieve a similar effect, as long as you are willing to repeat
and restyle the text to produce a shadow:
<!-- The text-shadow property produces shadows automatically -->
<span style="text-shadow: 3px 3px 1px #888">Shadowed</span>
<!-- Here's how we can produce a similar effect with positioning. -->
<span style="position:relative;">
Shadowed     <!-- This is the text that casts the shadow. -->
422 | Chapter 16: Scripting CSS
Documents you may be interested
Documents you may be interested