a really fairly simple guide to: mobile browser-based application development (part 2, css) chris...
TRANSCRIPT
Chris Greenhalgh ([email protected]) 1
A really fairly simple guide to:mobile browser-based application
development (part 2, CSS)
Chris GreenhalghG54UBI / 2011-02-21
Chris Greenhalgh ([email protected]) 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
Chris Greenhalgh ([email protected]) 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”
Chris Greenhalgh ([email protected]) 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
Chris Greenhalgh ([email protected]) 5
Inline CSS<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Hello</title> </head> <body> <h1>Hello</h1> <p style="font-size: 10"> Some 10-point text, <b>Bold</b> </p> </body></html>
http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/Element.html
Chris Greenhalgh ([email protected]) 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
Chris Greenhalgh ([email protected]) 7
Stylesheets
• An external “stylesheet” is specified using a <link> element in the HTML file header:– <link rel="stylesheet" href="HelloCSS.css" type="text/css"/>
• The stylesheet contains a list of entries:– selector { properties }
• The properties are applied to all document element(s) matching the corresponding selector
Chris Greenhalgh ([email protected]) 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
Chris Greenhalgh ([email protected]) 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;
}
Chris Greenhalgh ([email protected]) 10
A Simple CSS Example in Use<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>Hello</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="HelloCSS.css" type="text/css"/></head><body>
<p>A paragraph.</p><p>Another paragraph.</p><p class="sans">Paragraph with class sans</p><p class="sans">Another paragraph with class sans</p><p class="sans" id="Alice">Paragraph with class sans and id Alice.</p></body></html>
http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/HelloCSS.html
Chris Greenhalgh ([email protected]) 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
Chris Greenhalgh ([email protected]) 12
Other resources
• The WWW Consortium CSS working group, http://www.w3.org/Style/CSS/
• CSS 2.1 specification, 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/