Learning Center
Plans & pricing Sign in
Sign Out



									 This course is focused on web application
 Also need some knowledge of (X)HTML and
  • JSP is used to create elements of these on the server
    (usually HTML elements)
  • JavaScript is used to interact / read / write these
    elements on the client
 Therefore  need to know some typical elements
 to interact with
 Simple  syntax: easy to learn
 Separates style from content
 Easy to maintain consistent pages
 Can update a common style
  • Reflected in all pages that use it
 HTML  pages become smaller and
 Example of Once and Once Only
 CSSdefines the way that HTML elements
 should be presented:
 • Positioning (e.g. left, right or centered)
 • Font (size and family)
 • Text decoration (e.g. underlined)
 • Borders (solid, dashed, invisible)
 • Image usage (e.g. for backgrounds and bullets)
 Re-order   HTML
  • E.g. won’t sort a table
 Perform    calculations
  • Won’t sum a shopping basket
 Filter
  • Won’t decide what to show
  • Though JavaScript can set display or visibility of
    elements in order to achieve this
 These    can all be done on the server
  • Or using XSLT or JavaScript on the client
 (X)HTML   is the most modern version of
 Like HTML, but XML format compliant
  (properly nested tags, attribute values in
  string quotes)
 Can be extended with user-defined
 Add meaning (semantics) to tags
 From now we’ll use the term HTML
 Some    main layout techniques
  • Divisions and tables
 Divisions    <div> specify rectangular areas
  • These can be filled with any content
  • Including nested <div> tags
 Positional   control of elements
  •   static (default) – normal flow
  •   fixed – browser window coordinates
  •   absolute – containing element coords
  •   relative – relative to where it would be according to
      normal flow rules
 Can  be desirable for some content to be
 This allows nested content to be
  dynamically expanded
 Or allows switching between pre-loaded
 Two CSS attributes control this:
  • display and visibility
 display    allows general control over layout
    • Setting {display: none} means the element takes no
      space, and is therefore invisible
    • Can also take values of
    visibility simply controls whether the element
    is visible or not
    • The layout is done in either case
    • And the same space is reserved on the page
    • {visibility: visible} is the default
    • {visibility: hidden} makes it invisible
 Tables
  • <table>, <tr>, <th>, <td>
  • Table, table row, table header cell, table data cell
  • Can use colspan attribute to make a cell span
   many rows
 Modern    browsers support nesting of
 Simple:
   • selector {property: value}
 E.g.
  • body {background-color: black}
 Multiple properties separated by a semi-
  colon (see next page)
 When applied at the element level, no
  selector is needed (think why!)
 More on selectors in a few slides time…
 Can be applied
  • From external style sheet
     <LINK type="text/css" rel="STYLESHEET"
  • Internal style declaration in header
     <style type="text/css">
      h2 {text-align: center; color: red}
  • To individual elements
     <h2 style="text-align: center; color:
      red">My heading</h2>
 External:

 Header:

 Element:
 Itwould be inflexible to force all
  elements of the same type (e.g. <h2>) to
  look the same
 Use a dot notation to introduce variations
   • Dot is used when defining styles
 E.g. could vary <pre> tags to present
  code from different languages in
  different styles
   • Markup does not use the dot, but a class=“XX”
       notation – see next slides
<style type="text/css">
    h2 {text-align: center; color: blue} {
        border: solid;
        left-margin: 20px;
        background-color: #FFFFEE;
        color: blue;
        font-weight: bold }
   pre.cpp {
       font-size: 200%;
       border: dashed;
       left-margin: 40px;
       color: red }
<h2>Java Code</h2>
<pre class="java">
public static void main(String[] args) {
    System.out.println("Hello world");
<h2>C++ Code</h2>
<pre class="cpp">
int main() {
    cout << "Hello";
 So   what does this mean?
  • The style of an element can be specified in many
  • A set of rules is used in order of most specific to
    most general to select the proper style
  • This is called a cascade
 The   stylesheet also forms a cascade
  • Browser default, user, external, internal,
 Most   specific is on element id (#)
  • #main {font: bold}
  • <p id=“main”>This could be a bold introductory
 Then   class (.)
  • .disclaimer {font-size: small}
  • <p class=“disclaimer”>Reading these notes can
   cause confusion, headaches and nausea</p>
 When specifying a selector, a comma is
 used to specify a set of elements e.g.
  • h1, h2 {text-align: center}
 If no comma, then used to specify context
   • blockquote { font-style: italic }
   • blockquote i { font-style: normal }
 This means that text between <i> (italic)
 tags display as normal text in the context
 of a blockquote
 <ul> and <li> are used to produce
  bulleted lists
 With CSS these can be beautifully styled
  • Also with rollover effects
 See
 for some good examples and tutorials
 Concise   CSS
  • .callout {width: 200px; border: 2px
    solid navy; background: #EEEEFF; float:
    right }
  • <div class="callout">Duck Typing: if it
    walks like a duck and quacks like a
    duck, then treat it like a duck</div>
 These  notes have introduced the basics
 Next we’ll see how to control CSS/HTML
  attributes using JavaScript
 This combination is called DHTML
  (Dynamic HTML)
 Find out more at
 JavaScript, the definitive guide, Flanagan
  2006, O’Reilly (esp. Chapter 16)

To top