A really fairly simple guide to: mobile browser-based application development (part 2, CSS) Chris Greenhalgh G54UBI / Chris Greenhalgh

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

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

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

Inline CSS Hello Hello Some 10-point text, Bold 5Chris Greenhalgh

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

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

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

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

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. Chris Greenhalgh

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

Other resources The WWW Consortium CSS working group, CSS 2.1 specification, – CSS 3 is still being standardised, but many parts of it can be used already Online tutorials, e.g. – Chris Greenhalgh