Lecture 10b: Cascading Style Sheets

What You Will Learn Today

1. Avoid using visual hacks for visual presentation of web pages.
2. Use styles for all physical formatting.
3. Use the three different ways to refer to styles and explain style precedence and inheritance.
4. Use style rules and CSS measurement units and colours.
5. Use styles for fonts, formatting, spacing and alignment, blocks, and positioning.
6. Use styles for links, lists and background images.
7. Use class and id attributes, and div and span tags.
8. Use JavaScript to read and change styles.

Visual Hacks

Many tricks or hacks are used to improve page appearance:

• Using proprietary HTML extensions
• Converting text into images
• Using images for white space control
• Using tables for page layout
• Writing a program instead of using HTML

Why They Are Bad

• Not used the way HTML was designed to be used
• Increased complexity of pages
• Not very flexible or maintainable
• Not fully functional for all users on all platforms
• Not very accessible

Advantages of Styles

• Styles are intended to improve the appearance and presentation of web pages.
• Styles reduce the need to use tricks or hacks (listed above) to make pages look good.
• Styles give more control over font, colour, page layout and other visual details.
• Styles for all similar elements in a page or group of pages can quickly be changed in a single location.
• It is possible to specify a different style sheet for each media type (screen, print, tv, handheld, aural, etc.)
• Nonconforming users can choose their own style sheets if they don't like yours.
• Recent browsers support the 1996 CSS1 specification.

Disadvantages of Styles

• Older browsers like Netscape 4 do not fully support style sheets.
• Support for the 1998 CSS2 specification is not yet universal.
• Many existing pages and sites on the web do not use styles and would take a long time to be redesigned.

Three Ways to Refer to Styles

• Inline styles are used as an attribute of a single tag.
  • <h1 style="color: red">My Home Page</h1>
• Embedded or global styles are applied to an entire file.
  • <style type="text/css"> h1 { color: red } </style>
• A linked or external style sheet is a text file with extension .css containing style declaration rules.
  • Create a file named mystyles.css containing rules like
    • h1 { color: red }
  • Put this link in the head section of each HTML document to use these styles:
    • <link rel="stylesheet" type="text/css" href="mystyles.css">

Style Precedence

• Styles are cascaded through to other levels unless you override them with a style of higher precedence.
  • inline style > embedded style > external style sheet > browser
• But many browsers can be configured to ignore font sizes, link colours and styles, and to use a different style sheet.
• Tags are organised into an inheritance hierarchy.
  • Heading and paragraph tags inherit the styles from the body tag.
  • Table cells inherit from table rows, which inherit from tables. List items inherit from lists.
  • To make all bold in list items blue, use li b { color: blue }

Style Rules

• A style rule has the format selector { declaration }
  • h1 { text-align: center }
  • h2 { text-align: left }
• A selector lists elements (tags) to which the declaration is applied, separated by commas.
  • h1, h2, h3, h4, h5 { text-align: center }
• A declaration is made up of a list of properties and values separated by semicolons.
  • selector { property1: value1; property2: value2 }
  • p { font-size: 14pt; color: green }
• A comment line begins with /* and ends with */ like in C or Java programming.

CSS Measurement Units

• in: inches, cm: centimeters, mm: millimeters (US and metric units)
• px: pixels (size of a pixel on the current screen; typically 72 or 96 pixels per inch)
• pt: point (standard publishing unit, 72 points per inch)
• %: relative to the base size (200% is two times normal size)
• em and ex: width and heights of letters relative to capital M and small x
• x-small, small, medium, large, x-large: relative to base font size

Colours

• color is the foreground colour. background-color is the colour behind the text.
• Colours can be specified by name, RGB value, or hexadecimal code. Ways to get blue:
  • color: blue
  • color: rgb(0, 0, 255)
  • color: rgb(0%, 0%, 100%)
  • color: #0000ff

Fonts

• font-weight can be numbers (150%) or words (normal, bold, bolder, lighter)
• font-size: the height of a line of text.
• line-height: distance between two lines of text
• Specify font names as a list; if the browser does not recognise them it will use its default font.
  • Font families are generic names to use as default: serif, sans-serif, monospace
  • font-family: verdana, arial, helvetica, sans-serif
• You can use shorthand notation to specify font-weight, font-size, line-height and font-family:
  • font: bold 18pt/30pt arial

More Text Formatting

• font-style: normal, italic, or oblique
• text-decoration: blink, line-through, overline, underline, or none
• text-transform: capitalize, lowercase, uppercase, or none
• font-variant: small-caps or none

Text Spacing and Alignment

• letter-spacing and word-spacing: spacing between letters and words
• text-align: left, center, right or justify
• vertical-align: baseline, bottom, middle, sub, super, text-bottom, text-top, or top
• text-indent: amount of indent of the first line, e.g. a paragraph.
  • A negative value produces a hanging indent (all lines except the first line are indented).

Block Elements

• padding: space within a text element
  • p { padding-left: 12pt; padding-right: 6pt }
• margin: white space around a block element
  • p { margin: 12pt }
• border: use border-style, border-width, border-color, or this shorthand notation:
  • h1 { border: solid 2pt red }
  • border-style is solid, dashed, dotted, double, outset, inset, groove, ridge or none.
• padding, margin and border can specify top, bottom, left or right:
  • p { border-top: 2pt double green }
• width and height: the size of the element
• float: left or right (aligns the image and following elements will wrap)
• clear: left, right or both (prevents an element from wrapping around a previous image)

Positioning

• position: static, absolute (not part of page flow) or relative (relative to page flow)
• top and left: the upper left corner of the element
• clip: rect(top right bottom left) displays only part of the image.
• z-index: overlapping layer (-1 is behind the default layer, 1 is in front)

Hypertext Links

• a:link is an unvisited link. Default is blue in most browsers.
  • a:link { color: blue }
• a:visited is a visited link (previously clicked by the user). Usually darker than an unvisited link.
  • a:visited { color: purple }
• a:hover is when the mouse is moved over the link. Often used to create rollover effects.
  • a:hover { background-color: red; font-size: 120% }
• a:active is a selected (clicked) link. Useful to show the currently selected page in a navigation frame.
  • a:active { background-color: green }

Lists

• list-style-type: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha
• list-style-image: url(URL)
• list-style-position: inside or outside

Background Images

• background-image: url(URL) or none
• background-repeat: repeat, repeat-x, repeat-y, or no-repeat
• background-position: x and y distance from upper left corner, or left, center or right and top, center or bottom
• background-attachment: scroll or fixed

CLASS and ID, DIV and SPAN

• To create a special group of items of a certain tag, use a dot in the style selector and the class attribute in the tag.
  • <style type="text/css">p.quote { color: red }</style>
  • <p class="quote">Style cannot be <em>too</em> clear, <em>too</em> simple.</p>
• To create a new tag, begin the style selector with a dot.
  • <style type="text/css">.quote { color: red }</style>
• Use div tags for block elements.
  • <div class="quote">Have something to say, and say it as clearly as you can.
That is the only secret of style.</div>
• Use span tags for inline formatting within blocks.
  • <p><span class="booktitle">Cascading Style Sheets</span> by Lie and Bos</p>
• IDs are like classes but must be unique. Use a hash character in the style selector and the id attribute in the tag.
  • <style type="text/css">#quote { color: red }</style>
  • <p id="quote">Proper words in proper places, make the true definition of a style.</p>

JavaScript and Styles

• You can use class and id names to access page elements using JavaScript.
  • elementName.style.propertyName = 'value'
  • <a href="#JavaScript" onclick="redtext.style.color='red'"><span id="redtext">
change this text to red </span></a>
• You can also access all the tags, classes and IDs in a document.
  • document.tags.H1.backgroundColor="blue" // sets background of all heading 1 elements to blue
  • document.classes.GreenBody.all.color="green" // sets all elements of class GreenBody to green
  • document.ids.NewTopic.color="blue" // sets tags with NewTopic IDs to blue
• JavaScript uses propertyName instead of property-name.

To Do After Class

• See Lecture 10a.
• Book References: Sklar Unit F, Carey Ch. 7, Reding & Vodnik Unit J
• Electronic References: Lie & Bos Ch. 2, Dave Raggett's Introduction to CSS, HTML 4 Ch. 14