1. A really fairly simple guide to: mobile browser-based application development (part 2, CSS) Chris Greenhalgh G54UBI / 2011-02-21 1Chris Greenhalgh (cmg@cs.nott.ac.uk)

2. Content CSS Inline styles Common CSS properties Style-sheets Simple CSS Selectors Note: you can skip CSS to begin with, and come back to it if and when you need to polish the appearance of you page/application 2Chris Greenhalgh (cmg@cs.nott.ac.uk)

3. CSS Cascading Style Sheets (CSS) is a (set of) standard(s) for specifying the detailed appearance of web pages CSS has two main parts: – Ways to select elements within the page (document), i.e. “selectors” – Ways to specify the appearance of those elements, i.e. “properties” 3Chris Greenhalgh (cmg@cs.nott.ac.uk)

4. Inline styling CSS properties can be specified directly for individual HTML elements using the style attribute (see next slide) Pro: – Simple and direct – no seletors Con: – Must be specified separately for each element Although by default child elements will inherit some properties, e.g. font 4Chris Greenhalgh (cmg@cs.nott.ac.uk)

5. Inline CSS Hello Hello Some 10-point text, Bold http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/Element.html 5Chris Greenhalgh (cmg@cs.nott.ac.uk)

6. Some common CSS properties background-color, color – E.g. “rgb(255,0,0)” is red 255/255 red, 0/255 green, 0/255 blue = “#ff0000” = “red” text-align – centre / right / justify font-family – serif / sans-serif / monospace font-size – 10px (pixels), 10pt (point) border-style – solid, dotted, dashed, … border-width width, height – pt, px, …, %, auto, inherit min-width, max-width, min- height, max-height position – fixed, relative, absolute left, right visibility – hidden (still takes up space) display – none, inline, block 6Chris Greenhalgh (cmg@cs.nott.ac.uk)

7. Stylesheets An external “stylesheet” is specified using a element in the HTML file header: – The stylesheet contains a list of entries: – selector { properties } The properties are applied to all document element(s) matching the corresponding selector 7Chris Greenhalgh (cmg@cs.nott.ac.uk)

8. Using Stylesheets Pros – A single stylesheet specifies appearance for a whole page or site – No duplication of style properties per element Faster, more concise, easier to be consistent, easier to update – Separation of concerns: all styling done in stylesheet Cons – Extra file, extra download: if lost then styling lost 8Chris Greenhalgh (cmg@cs.nott.ac.uk)

9. Main selector types Element name – E.g. “p” – Applies to all elements of that name Element class – E.g. “.CLASS” – Applies to all elements with that “class” attribute – Takes priority over element selector Element ID – E.g. “#ID” – Applies to the single element with that “id” attribute – Takes priority over element and class selector /* All paragraph elements, */ p { font-family: serif; font-size: 14pt; border-style: solid; border-width: thin; } /* elements with class 'sans' */.sans { font-family: sans-serif; } /* element with id 'Alice' */ #Alice { color: fuchsia; border-width: thick; font-family: monospace; } 9Chris Greenhalgh (cmg@cs.nott.ac.uk)

10. A Simple CSS Example in Use 10 Hello A paragraph. Another paragraph. Paragraph with class sans Another paragraph with class sans Paragraph with class sans and id Alice. http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/HelloCSS.html Chris Greenhalgh (cmg@cs.nott.ac.uk)

11. Conclusions CSS is used to specify appearance of the HTML elements and content – Can be specific “inline” per element – Usually specified in a separate Style sheet You should now be able to – Specify basic styling for an HTML file, both inline and using a stylesheet 11Chris Greenhalgh (cmg@cs.nott.ac.uk)

12. Other resources The WWW Consortium CSS working group, http://www.w3.org/Style/CSS/ http://www.w3.org/Style/CSS/ CSS 2.1 specification, http://www.w3.org/TR/CSS2/ http://www.w3.org/TR/CSS2/ – CSS 3 is still being standardised, but many parts of it can be used already Online tutorials, e.g. – http://www.w3schools.com/ http://www.w3schools.com/ 12Chris Greenhalgh (cmg@cs.nott.ac.uk)