CSS by isbangee

VIEWS: 108 PAGES: 24

									CSS Cascading Style Sheets
The principled way to style HTML Partly based on Flanagan 2006

CSS and (X)HTML
This course is focused on web application programming Also need some knowledge of (X)HTML and CSS


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

CSS is Good
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 simpler Example of Once and Once Only principle

CSS Basics
CSS defines 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)

CSS Does Not…
Re-order HTML

E.g. won’t sort a table
Won’t sum a shopping basket

Perform calculations


Won’t decide what to show Though JavaScript can set display or visibility of elements in order to achieve this Or using XSLT or JavaScript on the client

These can all be done on the server

(X)HTML is the most modern version of HTML Like HTML, but XML format compliant (properly nested tags, attribute values in string quotes) Can be extended with user-defined markup Add meaning (semantics) to tags From now we’ll use the term HTML

Some main layout techniques

Divisions and tables These can be filled with any content Including nested <div> tags static (default) – normal flow fixed – browser window coordinates absolute – containing element coords relative – relative to where it would be according to normal flow rules

Divisions <div> specify rectangular areas
 

Positional control of elements
   

Can be desirable for some content to be invisible This allows nested content to be dynamically expanded Or allows switching between pre-loaded content Two CSS attributes control this:

display and visibility

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

HTML 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 tables

CSS Syntax

selector {property: value}
body {background-color: black}


Multiple properties separated by a semicolon (see next page) When applied at the element level, no selector is needed (think why!) More on selectors in a few slides time…

Applying Styles
Can be applied

From external style sheet
<LINK type="text/css" rel="STYLESHEET" href="/pubs.css">


Internal style declaration in header
<style type="text/css"> h2 {text-align: center; color: red} </style>


To individual elements
<h2 style="text-align: center; color: red">My heading</h2>

Simple Style Example

When should each type be used?



It would 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

Example Usage: Code Styles
<html> <head> <style type="text/css"> h2 {text-align: center; color: blue} pre.java { 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 } </style> </head>

Code-Styles (contd)
<body> <h2>Java Code</h2> <pre class="java"> public static void main(String[] args) { System.out.println("Hello world"); } </pre> <h2>C++ Code</h2> <pre class="cpp"> int main() { cout << "Hello"; } </pre> </body> </html>

Code Example in Browser

So what does this mean?



The style of an element can be specified in many places A set of rules is used in order of most specific to most general to select the proper style This is called a cascade Browser default, user, external, internal, element-level

The stylesheet also forms a cascade

Cascading Rules within a Stylesheet
Most specific is on element id (#)
 

#main {font: bold} <p id=“main”>This could be a bold introductory paragraph</p>
.disclaimer {font-size: small} <p class=“disclaimer”>Reading these notes can cause confusion, headaches and nausea</p>

Then class (.)
 

Selector Details
When specifying a selector, a comma is used to specify a set of elements e.g.

h1, h2 {text-align: center} blockquote { font-style: italic } blockquote i { font-style: normal }

If no comma, then used to specify context
 

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 http://css.maxdesign.com.au/listamatic/ for some good examples and tutorials

Callout Example
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>

Next Steps with CSS
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 w3schools.com JavaScript, the definitive guide, Flanagan 2006, O’Reilly (esp. Chapter 16)

To top