Download Chapters 3-6 - gozips.uakron.edu

2440:140 Internet Tools
Study Guide #2
The University of Akron
Summit College
Dept of Business Technology
Computer Information Systems
Cascading Style Sheets (CSS)
Style Sheets
 Style sheet – set of declarations describing the layout and appearance of a document
 Cascading Style Sheet (CSS) – the most commonly used style sheet language used on the Web. The
versions of CSS are:
o CSS1 – support styles for fonts, text, color, backgrounds, and block-level elements.
o CSS2 – support styles for positioning, visual formatting, media types, and interfaces.
o CSS3 – to support user interfaces, accessibility, columnar layout, international features,
mobile devices, and scalable vector graphics.
Applying Style Sheets
 Three ways of applying styles to a Web site include:
o Inline styles – applied directly to an element using the style attribute.
 E.g. <h1 style=”color:red”> Heading </h1>
o Embedded style sheet – uses the head section of a document to collect all the styles to be used in
the document.
 E.g.,
<style type=”text/css”>
/* Style Sheet Comments */
h1 {color: red; text-decoration: underline}
h2 {color: blue}
</style>
o External style sheet – a text file containing style declarations for an entire Web site’s pages. The
extension of CSS style sheets is .css. The style sheets are linked to the Web pages into two ways:
1. <link href=”styles.css” type=”text/css” rel=”stylesheet” />
2. <style type=”text/css”>
@import url(styles.css)
</style>
Cascading Order
 Style precedence – determines which style is applied when one or more styles conflict.
o The general rule is that specific styles have precedence over general styles when there is a conflict.
o The levels of precedence from highest to lowest are: user-defined styles, inline styles, embedded
styles sheet, external style sheet, and the browser’s internal style sheet
 Style inheritance – when there is no conflict, styles are passed down from general levels to specific levels.
E.g., Styles for a p element will override that of a body element since p is more specific to body.
Selectors
 Selector – the general form of a style declaration.
o Syntax: selector {style_attribute1: value1; style_attribute2: value2; …}
o E.g., p {color: white; background-color: red}
 Contextual selectors – express the location of an element within the hierarchy of elements. Web browsers
like Firefox, Opera, and Safari support all the contextual selectors but Internet Explorer does not have very
good support for them especially the e > f and e + f selectors below. The six contextual selectors in CSS2
are:
o * {styles} – matches any element in the hierarchy. E.g., * {color: blue}
o e {styles} – matches any element, e, in the hierarchy. E.g., p {color: blue}
o e1, e2, … {styles} – matches the group of elements e1, e2, …. E.g., h1, h2, h3 {color: blue}
o e1 e2 {styles} – matches any element, e2, that is a descendant of an element e1.
 E.g., p b {color: blue}
o e1 > e2 {styles} – matches any element, e2, that is a direct child of an element e1.
 E.g., p > b {color: blue}
o e1 + e2 {styles} – matches any element, e2, that is immediately preceded by a sibling element e1.
 E.g., h1 + p {color: blue}
Document1
Enoch E. Damson
Page 1 of 9
2440:140 Internet Tools
Study Guide #2





The University of Akron
Summit College
Dept of Business Technology
Computer Information Systems
Attribute selectors – selecting elements based on their attribute values. Support for attribute selectors are
mixed. There is good support from Firefox, Opera and Safari browsers but not for Internet Explorer. The
seven attribute selectors in CSS3 are:
o e[attr] {styles} – matches any element, e, containing the attribute, attr. E.g., a[href] {color: blue}
o e[attr=”val”] {styles} – matches any element, e, containing the attribute, attr with the value, val.

E.g., a[href=”link.html”] {color: blue}
o e[attr~=”val”] {styles} – matches any element, e, containing the attribute, attr with a spaceseparated list of words, one of which is the exact value, val.

E.g., a[rel=”glossary”] {color: blue}
o e[attr|=”val”] {styles} – matches any element, e, containing the attribute, attr with a hyphenseparated list of words beginning with the value, val.

E.g., p[id|=”first”] {color: blue}
o e[attr^=”val”] {styles} – matches any element, e, containing the attribute, attr that begins with the
value, val.

E.g., a[rel^=”prev”] {color: blue}
o e[attr$=”val”] {styles} – matches any element, e, containing the attribute, attr that ends with the
value, val.

E.g., a[href$=”org”] {color: blue}
o e[attr*=”val”] {styles} – matches any element, e, containing the attribute, attr that contains the
value, val.

E.g., a[rel*=”faq”] {color: blue}
class attribute selector – used to identify elements that share common characteristics. Uses a period (.) to
reference a value assigned to a class attribute. E.g., .red {color: red}
id attribute selector – used to identify specific elements. Uses a pound sign (#) to reference a value
assigned to an id attribute. E.g., #red {color: red}
Pseudo-elements – not part of the HTML/XHTML element hierarchy but abstracted from common
knowledge of element’s content, use, or position in a document. The four main pseudo-elements are:
o first-letter – the first letter of the element text. E.g., p:first-letter {color: blue}
o first-line – the first line of the element text. E.g., p:first-line {color: blue}
o before – content inserted directly before the element. E.g., p:before {line-height: 2}
o after – content appended to the element. E.g., p:after {line-height: 2}
Pseudo-classes – classification of elements based on their content status or condition. Examples include
the following hyperlinks pseudo-classes:
o link – the first letter of the element text. E.g., a:link {color: blue}
o visited – the first line of the element text. E.g., a:visited {color: red}
o hover – content inserted directly before the element. E.g., a:hover {color: orange}
o active – content appended to the element. E.g., p:active {color: green}
Colors
 Basic styles for text and background colors include:
o color: color_value
 E.g., color: red
o background-color: color_value
 E.g., background-color: green
 Color value – numerical expression that precisely describes a color. Three ways of specifying color values
are:
o RGB Triplet – triplet of numbers with values based on the strength of red, green and blue. 0
indicates lowest intensity, 255 indicates highest intensity. E.g., color: rgb(0,100,50)
o Hexadecimal – a number expressed in base 16 rather than in base 10 (0-9). It includes six extra
characters – A (10), B (11), C (12), D (13), E (14), F (15). Convert values to multiples of 16, plus
remainder. E.g., color: #FF00BB
o Color Names – HTML/XHTML support 16 basic color names which are: aqua, black, blue,
fuchsia, gray, green, line, maroon, navy, olive, purple, red, silver, teal, white, yellow. CSS2.1
also supports the 16 basic HTML/XHTML color names including orange as the 17th color name.
Document1
Enoch E. Damson
Page 2 of 9
2440:140 Internet Tools
Study Guide #2
The University of Akron
Summit College
Dept of Business Technology
Computer Information Systems
Most browsers support an extended list of 140 color names which are not part of the
HTML/XHTML and CSS specifications. E.g., color: brown
Fonts/Text Styles
 Basic styles for fonts and text styles include the following:
o font-family: font_names
 E.g., font-family: Arial, Helvetica, sans-serif
o font-size: length
 E.g., font-size: 5in
o font-style: style
 E.g., font-style: italic
o font-weight: value
 E.g., font-weight: bold
o font-variant: value
 E.g., font-variant: small-caps
o letter-spacing: value
 E.g., letter-spacing: 10px
o word-spacing: value
 E.g., word-spacing: 3px
o line-height: length
 E.g., line-height: 2
o text-decoration: type
 E.g., text-decoration: underline
o text-transform: value
 E.g., text-transform: uppercase
o text-indent: value
 E.g., text-indent: 5%
o text-align: value
 E.g., text-align: center
o vertical-align: value
 E.g., vertical-align: top
o font: font-style font-variant font-weight font-size/line-height font-family
 E.g., font: italic small-caps bold 16pt/24pt Arial, sans-serif
 Font name – font names can be classified under:
o Generic font – group of fonts with similar appearance. The five browser-supported generic fonts
are: serif, sans-serif, monospace, cursive, and fantasy. E.g., font-family: sans-serif
o Specific font – font installed on a user’s computer. E.g., font-family: Arial, Helvetica
 Font size (length) – can be specified in four different ways:
o with a unit of measurement:
 Absolute units – fixed in size and specified in one of five standard units: mm
(millimeters), cm (centimeters), in (inches), pt (points), and pc (picas). E.g., font-size:
3pc
 Relative units – expressed relative to the size of other objects on the Web page. The two
common units are “em” unit (equal to with of uppercase “M”) and “ex” unit (equal to the
height of lowercase “x”). E.g., font-size: 2em equals 16pts if an element has 8 points.
 Pixel – the default unit of measurement for Web browsers and represents a
single dot on the output device. E.g., font-size: 20px
o with a keyword description:
 There are seven descriptive keywords which include: xx-small, x-small, small,
medium, large, x-large, and xx-large. E.g., font-size: small
o as a percentage of the size of the containing element:
 E.g. font-size: 80%
o with a keyword expressing the size relative to the size of the containing element:
 The keywords “larger”, or “smaller” may also be used. E.g. font-size: smaller
 Font style – specifies a font style (normal, italic, or oblique). E.g. font-style: italic
Document1
Enoch E. Damson
Page 3 of 9
2440:140 Internet Tools
Study Guide #2











The University of Akron
Summit College
Dept of Business Technology
Computer Information Systems
Font weight – specifies level of bold formatting applied to a text. May be expressed in three ways:
o Values (from 100 to 900 in increments of 100). E.g. font-weight: 400
o Keywords (normal, bold). E.g., font-weight: bold
o Keywords specifying weight relative to the containing element (bolder, lighter).
 E.g., font-weight: bolder
Font variant – displays text in both uppercase and a small font with either normal or small-caps.
o E.g., font-variant: small-caps
Kerning – amount of space between characters. Positive values in units of measurement increase spacing
while negative values decrease spacing. E.g., letter-spacing: 2px
Tracking – amount of space between words. Positive values in units of measurement increase spacing
while negative values decrease spacing. E.g., word-spacing: 2px
Leading – amount of space between lines of text. Length is measured in units of measurement or as a
percentage of the font size of the text on those lines. E.g., line-height: 2
Text Decoration – changes the appearance of text with keywords (none, underline, overline, linethrough, or blink). E.g., text-decoration: underline
Text Transformation – controls the cases of text with certain keywords (capitalize, uppercase,
lowercase, or none). E.g., text-transform: uppercase
First line indentation – sets the indentation for the first line of a text block. Expressed in absolute or
relative units, or percentage of the width of the text block. E.g. text-indent: 5%
Horizontal text alignment – horizontally aligns inline elements with the surrounding block. Possible
values include: inherit, left, right, center, justify. E.g., text-align: center
Vertical text alignment – vertically aligns inline elements with the surrounding block. Can be specified in
three ways:
o Keywords – values used are: baseline, bottom, middle, sub, super, text-bottom, text-top, and
top. E.g., vertical-align: top
o Length in units of measurement. E.g. vertical-align: 2px
o Percentage relative to the surrounding content.
 Positive value moves the element up and negative value lowers the element.
 E.g., vertical-align: 50%
Combined text formatting – specifies several text formats in a specific order. All properties do not have
to be included (but font-size and font-family are required) but the order of the included properties is
important. The browser assumes the default value for any omitted property.
o Syntax: font: font-style font-variant font-weight font-size/line-height font-family
o E.g., font: italic small-caps bold 16pt/24pt Arial, sans-serif
Images
 The three main graphic formats for Web pages include:
o GIF (Graphics Interchange Format) – most commonly used image format on the Web but
limited to only 256 colors.
o JPEG/JPG (Joint Photographic Experts Group) – uses a compression algorithm to create
smaller images that use the full 16.7 million colors available in the color palette.
o PNG (Portable Network Graphics) – include most of the same features as GIFs but also provide
file compression and the full 16.7 million JPEGs colors.
 The W3C also promotes the SVG (Scalable Vector Graphic) file format – written with XML for line art
composed of straight lines and curves.
Background Formatting
 Basic styles for background formatting include:
o background-image: url (url)
 E.g., background-image: url (pic.jpg)
o background-repeat: type
 E.g., background-repeat: repeat-x
o background-position: horizontal vertical
 E.g., background-position: right bottom
o background-attachment: type
Document1
Enoch E. Damson
Page 4 of 9
2440:140 Internet Tools
Study Guide #2
The University of Akron
Summit College
Dept of Business Technology
Computer Information Systems
 E.g., background-attachment: scroll
background: color url (url) repeat attachment horizontal_position vertical_position
 E.g., background: yellow url (pic.jpg) no-repeat fixed center center
Background Image – background images tiled both horizontally and vertically to fill up a page.
o E.g., background-image: url (pic.jpg)
Background Image Tiling – background images tiled horizontally (repeat-x), vertically (repeat-y) or
both (repeat) to fill up a page. Possible values include: repeat, repeat-x, repeat-y, no-repeat.
o E.g., background-repeat: repeat
Background Image Positioning – background images positioned horizontally or vertically. The position
can be specified as:
o The distance from the top-left corner of the element. E.g. background-position: 30px 40px
o A percentage of the element’s width or height. E.g. background-position: 30% 40%
o A keyword with horizontally values (left, center, right) and vertical values (top, center, bottom).
 E.g. background-position: right bottom
Background Attachment – background image movement when scrolling through a page. Possible values
include: scroll, fixed. E.g., background-attachment: fixed
Combined background formatting – specifies several background formats in a specific order. All
properties do not have to be included but the order of the included properties is important.
o Syntax: background: color url (url) repeat attachment horizontal_position vertical_position
o E.g., background: yellow url (pic.jpg) no-repeat fixed center center
o





Floating
 Element floating – places an element on the specified margin and wraps the subsequent content around the
element. Possible values include: left, right, none. E.g. float: right
 Element clearing – prevents other content from wrapping around a floating element with the possible
values: left, right, or none. E.g., clear: right
The Box Model
 Box model – describes the structure of page elements as laid out on the Web page. The four main sections
include: margin, padding, border, and content.
 Basic styles for the box model include the following:
o margin: top right bottom left
 E.g., margin: 10px 10px 10px 10px
o padding: top right bottom left
 E.g., padding: 10px 10px 10px 10px
o border: width style color
 E.g., border-width: 10px solid red
o width: value
 E.g., width: 10px
o height: value
 E.g., height: 10px
 Margins – the top, right, bottom and left margins between an element and other page content. Examples of
the five margin styles are:
o E.g., margin-top: 10px
o E.g., margin-right: 10px
o E.g., margin-bottom: 10px
o E.g., margin-left: 10px
o E.g., margin: 10px 10px 10px 10px
 Padding – the top, right, bottom, and left padding between an element’s content and the box border.
Examples of the five padding styles are:
o E.g., padding-top: 10px
o E.g., padding-right: 10px
o E.g., padding-bottom: 10px
o E.g., padding-left: 10px
o E.g., padding: 10px 10px 10px 10px
Document1
Enoch E. Damson
Page 5 of 9
2440:140 Internet Tools
Study Guide #2


The University of Akron
Summit College
Dept of Business Technology
Computer Information Systems
Border styles – the top, right, bottom and left borders of the box containing the element content. The three
CSS-supported styles for the box model’s border are: width, style, and color.
o E.g., border: 10px solid red
o Border width – the top, right, bottom and left border width of the box containing the element
content. Examples of the border width are:
 E.g., border-top-width: 10px
 E.g., border-bottom-width: 10px
 E.g., border-bottom-width: 10px
 E.g., border-left-width: 10px
 E.g., border-width: 10px 10px 10px 10px
o Border style – the top, right, bottom and left border style of the box containing the element
content. There are nine border style values including: solid, dashed, dotted, double, outset, inset,
groove, ridge, none. Examples of the border styles are:
 E.g., border-top-style: solid
 E.g., border-bottom-style: dashed
 E.g., border-bottom-style: dotted
 E.g., border-left-style: double
 E.g., border-style: outset inset groove ridge none
o Border color – the top, right, bottom and left border color of the box containing the element
content. Examples of the border width are:
 E.g., border-top-color: red
 E.g., border-bottom-color: red
 E.g., border-bottom-color: red
 E.g., border-left-color: red
 E.g., border-color: red green blue black
Width and height styles – the width and height of a box containing the element content.
o E.g., width: 10px
o E.g., height: 10px
Display Styles
 Element display – changes the display style of elements. Some of the possible values include: block,
inline, none. E.g. display: block
 Element clearing – prevents other content from wrapping around a floating element with the possible
values: left, right, or none. E.g., clear: right
List Styles
 Styles for lists include the following:
o list-style-type: type
 E.g., list-style-type: circle
o list-style-image: url (url)
 E.g., list-style-image: url (pic.gif)
o list-style-position: position
 E.g., list-style-position: outside
o list-style: type url (url) position
 E.g., list-style: circle url (dot.gif) inside
 List type – specifies the list marker displayed on the browser. Some of the possible values include: disc,
circle, square, none. E.g. list-style-type: square
 List image – uses a graphic image for the list marker. E.g. list-style-image: url (square.gif)
 List position – specifies how to place list markers to each list item. Possible values include: outside,
inside. Outside is the default placement where the markers are lined up with each list item. Inside position
causes the list text to flow around the marker. E.g. list-style-position: inside
 Combined list formatting – specifies several list formats in a specific order. All properties do not have to
be included but the order of the included properties is important.
o Syntax: list-style: type url (url) position
o E.g., list-style: circle url (dot.gif) inside
Document1
Enoch E. Damson
Page 6 of 9
2440:140 Internet Tools
Study Guide #2
The University of Akron
Summit College
Dept of Business Technology
Computer Information Systems
Web Tables
Web Table Structure
 Tables – made up of rows and columns intersecting to provide cells. A Web table’s basic structure uses
the following tags:
o <table> – marks the table element.
o <tr> – marks each row in the table.
o <th> – marks a heading (cell) within each row of the table. Contents are bold and center by
default on most browsers.
o <td> – marks the data (cell) within each row of the table.
o E.g.,
<table>
<tr>
<th> Table heading cell </th>
<td> Regular table cell </td>
</tr>
</table>
Basic Web Table Attributes
 border – adds gridlines to a table. By default, there are no gridlines displayed in a Web table
 bordercolor – changes a Web table’s border color. Web table border colors display in gray by default.
 cellspacing – controls the amount of space between Web table cells.
 cellpadding – controls the space between Web table cell contents and the cell border.

frame – specifies which sides of the Web table will have borders. Possible values include border, box,
above, below, hsides, vsides, lhs, rhs, and void.
 rules – specifies how internal gridlines are drawn within a Web table. Possible values include all, cols,
rows, groups, and none.
o E.g.,
<table border=”2” cellspacing=”5” cellpadding=”8” frame=”box” rules=”all”>
<tr>
<td> </td>
</tr>
</table>
Row and Column Spanning
 Cell spanning – a single cell occupies more than one row or column in a Web table. The rowspan and
colspan attributes are used to create row spanning and column spanning respectively to <th> and <td> tags.
o E.g.,
<table>
<tr>
<td colspan=”2” rowspan=”2”> </td>
<td> </td>
</tr>
</table>
Table Captioning
 <caption> – 2-sided tags listed directly after the opening <table> tags to provide a caption for Web tables.
Only one caption is allowed per Web table.
o The placement of the caption can be changed using the align attribute which has possible values of
top, bottom, left, or right.
o E.g.,
<table>
<caption align=”top”> Content </caption>
<tr>
<td> </td>
</tr>
</table>
Document1
Enoch E. Damson
Page 7 of 9
2440:140 Internet Tools
Study Guide #2
The University of Akron
Summit College
Dept of Business Technology
Computer Information Systems
Row and Column Groups
 Row groups – groups table rows into different types of content to allow different styles for groups of rows.
The three 2-sided tags used are: <thead>, <tfoot> and <tbody>. The order of the tags is important with one
<thead> first, one <tfoot> next, and any number of <tbody> following.
o E.g.,
<table>
<thead>
<tr> </tr>
</thead>
<tfoot>
<tr> </tr>
</tfoot>
<tbody>
<tr> </tr>
</tbody>
</table>
 Column groups – defined using the 2-sided <colgroup> tag to group Web table column cells for common
formatting. The columns within the column group are defined or referenced using the 1-sided <col> tag.
The span attribute of the <col> tag is used to cover several columns.
o E.g.,
<table>
<colgroup>
<col span=”2” />
<col span=”2” />
</colgroup>
</table>
Web Forms
Parts of Web Forms
 Field – stores each piece of information for a Web form.
 Field value – data stored in a Web form field.
 Control elements – used to collect field values. Include input boxes, radio (option) buttons, selection lists
(combo box or list boxes), check boxes, and text areas.
 Server-side scripting languages – used to interact with Web users and the Web server. Popular languages
include ASP (Active Server Pages), ASP.NET, JSP (Java Server Pages), PHP, ColdFusion, CGI
(Common Gateway Interface) primary with Perl, etc.
Web Form Structure
 <form> – 2-sided tags used to create the structure of Web forms. Some basic attributes include:
o name/id – used to identify each Web form.
o method – specifies how Web browsers send Web form data. The two possible values are:
 get – the default method which appends the Web form data to the end of the URL.
 post – sends Web form data in a separate data stream through a standard input.
o action – specifies the recipient server-side program (or email) of the Web form data.
o enctype – determines how the Web form data should be encoded when being sent.
 The tags used to specify a Web form’s control elements are:
o <fieldset> – 2-sided tag used to group/organize Web form elements.
 <legend> – 2-sided tag nested in a <fieldset> tag to add a legend to a field set.
o <label> – 2-sided tag used to add field labels to Web form elements using either the for attribute
to reference a Web form tag or nesting the Web form tag into the 2-sided <label> tag.
 <legend> – 2-sided tag nested in a <fieldset> tag to add a legend to a field set.
o <input> – 1-sided tag used to specify 10 types of control elements. Some basic attributes include:
 name/id – identifies each Web form’s control element. Specifying the same name or id
value for multiple radio or check boxes creates a group radio box or group check box.
 type – specifies the 10 HTML/XHTML supported input types including button, submit,
reset, text, password, radio, checkbox, file, image, and hidden. Other HTML 5 data
Document1
Enoch E. Damson
Page 8 of 9
2440:140 Internet Tools
Study Guide #2
o
o
o

E.g.,
Document1
The University of Akron
Summit College
Dept of Business Technology
Computer Information Systems
types include: color, date, datetime, datetime-local, email, month, number, range,
search, tel, time, url, and week.
 size – sets the width of an input box.
 maxlength – sets the maximum number of characters allowed for an input box.
 value – defines a default value for an input box.
 checked – used to select a radio or check box. The checked value is assigned.
 accesskey – used to create a selection mnemonic (to help jump to a Web form control)
using the Alt key (Windows) or Ctrl key (Mac) with the assigned letter.
 autocomplete – used to automatically fill in the Web form control’s value if based on a
previously filled out form.
 placeholder – HTML 5 feature that is used to populate a form control with a placeholder.
<button> – 2-sided tag used to specify 3 types of control elements namely button, submit, and
reset, which can also be created using the <input> tag.
<select> – 2-sided tag used to specify selection lists (combo boxes or list boxes). Some attributes
include:
 name/id – identifies each selection list.
 size – sets the number of options to be displayed. Any number greater than 1
changes the selection list from a combo (drop down) box to a list box.
 multiple – allows two or more selections for a selection list. The multiple value
is assigned. E.g., multiple=”multiple”
 The <select> tag uses the 2-sided nested <option> tag to specify the values within the
selection list. Some attributes include:
 value – sets a default value for the selection list option.
 selected – specifies which option to be selected. The selected value is assigned.
E.g., selected=”selected”
 Selection list options can be organized using the 2-sided <optgroup> tag which nests the
<option> tags.
<textarea> – 2-sided tag used to specify text area control elements with multiple rows. Some
basic attributes include:
 name/id – identifies each text area control.
 rows – specifies the height of a text area control.
 cols – specifies the width of a text area control.
<form id=”” action=”” method=”post”>
<input type=”text” size=”9” maxlength=”5” name=”” />
<input type=”password” size=”9” maxlength=”5” name=”” />
<input type=”radio” value=”” name =”” />
<input type=”checkbox” value=”” name =”” />
<input type=”file” name =”” />
<input type=”image” src=”” name =”” />
<input type=”hidden” name =”” />
<input type=”button” value=”Apply” />
<input type=”submit” value=”Send” />
<input type=”reset” value=”Clear” />
<button type=”button” value=”” name=”” /> Apply </button>
<button type=”submit” value=”” name=”” /> Send </button>
<button type=”reset” value=”” name=”” /> Clear </button>
<select size=”1” multiple=”multiple” id=””>
<option selected=”selected” value=””> Option 1 </option>
<option value=””> Option 2 </option>
</select>
<textarea rows=”5” cols=”10” =”multiple” wrap=”hard” id=””>
</textarea>
</form>
Enoch E. Damson
Page 9 of 9