Lecture Review What is a hybrid app? What does a UI framework do? What does a device framework do? What is the file name of the first screen (aka page view) displayed in an app? What does HTML stand for? What is a container tag? What is a standalone tag? What is the difference between generic and semantic tags? What is an attribute?
Lab Review: Creating App Templates Save time Create a new app using CLI, Build, or Desktop Remove unnecessary files and folders Modify index.html Add References used in the app (ex: jQuery ) Modify the config file For each new app, just copy the template folder! Change name & description in config.xml
CIS 136 Building Mobile Apps Styling using CSS… CIS 136 Building Mobile Apps
Cascading Style Sheets CSS Cascading Style Sheets
Styles A style is a rule that defines the appearance of an element on a web page Cascading Style Sheet (CSS) is a series of rules Can alter appearance of page by changing characteristics such as font family, font size, margins, and link specifications Three ways to incorporate styles in a web page: Inline – add style as attribute in a tag - only changes that tag <h1 style=“text-align: center”>Chemistry Class</h1> Embedded(Internal) - styles are referred to using the “id” or “class” attributes, and style is defined in <head> tag, using a <style> tag <h1 id=“centerThisTag”>Chemistry Class</h1> <h1 class=“centerThisTag”>Chemistry Class</h1> External(linked) - styles are stored in a separate text file having the extension .css. Then the file is “linked” to in web page
Style sheet precedence Inline styles Used to change the style within an individual HTML tag <h1 style=“text-align: center”>Chemistry Class</h1> Overrides Internal and External style sheets Internal styles Used to change the style in one html file Uses the “id” or “class” attributes <h1 id=“centerThisTag”>Chemistry Class</h1> <h1 class=“centerThisTag”>Chemistry Class</h1> Overrides External style sheets External styles Global Used to change the style in more than one file All three can be co-mingled in a file
Syntax of a Inline style An inline style must use a style attribute <h1 style=“text-align: center”>Chemistry Class</h1> A style has a selector and an declaration Selector: identifies the page element(s) Declaration: identifies how the page element(s) should appear, and is comprised of two parts, The property to apply The value for the property Example: font-family: Garamond; color: navy;
Applying an Inline Style Defines style of an INDIVIDUAL tag Helpful when one section of a page view needs to look different To use inline style Include the style attribute within the tag The style attribute is assigned to the declaration (property and value) The declaration is in quotes There can be more than one set of properties and values, each separated by a semi-colon EXAMPLES : <hr style=“height: 8px; background-color: #384738; width: 50%” /> <p style=“font-family: Arial, Helvetica; color: blue; text-decoration: none”>
Working with IDs and Classes id attribute Used to identify ONE element only Syntax: id="text“ Example: <p id=“JoesName”> Joe Smith </p> class attribute Used to identify a GROUP of elements Syntax: class="text“ <span class=“redNames”> Joe Smith</span> has been the president for four years. His running mate <span class=“redNames”>Mary Jones</span> is running for office for the first time.
ID’s Using ID’s is a two-step process The tag that belongs to the ID, is marked up by adding the attribute id=“idname” Example: <p id=“blueFont”>…. In the <style> tag, you define the ID using a hash tag Example: <style type=“text/css”> #blueFont { color:blue } </style> Whatever tag has the id=‘bluefont’, the content that the tag contains, becomes blue
Classes Using classes is a two-step process Any tags that belong to the class, are marked up by adding the attribute class=“classname” Example: <span class=“redNames”>…. <p class=“redNames”>…. In the <style> tag, you define the class using a dot Example: <style type=“text/css”> .redNames { color:red } </style> Whatever tag has the id=‘rednames’, the content that the tag contains, becomes red
Positioning position: positioning method used for an element (static, relative, absolute or fixed) Used with top and left properties For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below the top edge of its containing element. For relatively positioned elements, the top property sets the top edge of an element to a unit above/below its normal position. Same for left and right
Fonts Comprised of font families 5 generic Serif Sans-serif Monospace Cursive Fantasy Example of common font styling selectors: font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; font-weight: bold; color: blue
Color Can use one of the 16 color names, RGB, hex Colors are captured using red, green and blue light
page view tags and styles jQuery Mobiles’ style sheet will take precedence due to style definitions for most HTML tags To override jQuery mobile, must use inline or internal styles
jQM override hints To place content use float property with margin-left or margin-right property Using an internal selector or *, selects all, as in * { font: 24px Arial; color:gray; } Adding the !important; style forces a style to always be applied no matter where that style appears in the CSS div { font: 24px Arial; color:gray; !important; to override jQM’s shadow font, use the text-shadow property Page view colors are controlled with the background-color property Use <div> and<span> tags if a tag is needed to incorporate a style