CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 2 CSS Part 2Jan 25, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Tuesday, January 25, 2011References2http://meiert.com/en/indices/css-properties/List of CSS Propertieshttp://www.csszengarden.com/Zen garden - exampleshttp://www.w3.org/TR/css3-selectors/CSS 3 SelectorsCS 683 Lecture notes, http://www.eli.sdsu.edu/courses/fall04/cs683/notes/index.htmlTuesday, January 25, 20113Testing Webpages on MobileTuesday, January 25, 2011Web Server on Rohan4http://www-rohan.sdsu.edu/gdelines.shtmlSeeTuesday, January 25, 2011Web Server on Mac5Tuesday, January 25, 2011Web Server on Windows6Lots of free web servers for windowsTry NGINX easier to install that apachehttp://www.nginx.org/Tuesday, January 25, 2011Viewing on iPhone Emulator7Install iPhone SDKhttp://developer.apple.com/devcenter/ios/index.actionRun the emulatorDeveloper/Platforms/iPhoneSimulator.platform/Developer/ApplicationsRun SafariTuesday, January 25, 2011Viewing on Android Emulator8Download Android SDKhttp://developer.android.com/sdk/index.htmlhttp://developer.android.com/guide/developing/tools/emulator.htmlCreate an AVDemulator -avd <avidName>http://developer.android.com/guide/developing/tools/emulator.htmlTuesday, January 25, 20119CSS PropertiesTuesday, January 25, 2011Text Properties - Demo10http://developer.apple.com/safaridemos/showcase/typography/Tuesday, January 25, 2011Colors11aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,orange,purple,red,silver,teal,white,yellowNamed Colorsem { color: #f00 } /* #rgb */em { color: #ff0000 } /* #rrggbb */em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%) } RGBem { color: red }147 named colors in CSS3Tuesday, January 25, 2011http://www.codenique.com/web_color/css3_color_names.phpLengths - Relative Units12em: the 'font-size' of the relevant fontex: the 'x-height' of the relevant fontpx: pixels, relative to the viewing deviceh1 { margin: 0.5em } /* em */h1 { margin: 1ex } /* ex */p { font-size: 12px } /* px */p { font-size: 120% }em is like % 1em = 100% 1.1em = 110% 0.9em = 90%Tuesday, January 25, 2011Lengths - Absolute Units13in: inches — 2.54 centimeters.cm: centimetersmm: millimeterspt: points — 1/72th of an inch.pc: picas — 12 points.h1 { margin: 0.5in } /* inches */h2 { line-height: 3cm } /* centimeters */h3 { word-spacing: 4mm } /* millimeters */h4 { font-size: 12pt } /* points */h4 { font-size: 1pc } /* picas */Tuesday, January 25, 2011Use em or %14Some users have a preferenceem or % is based on their preference Tuesday, January 25, 2011Borders15A border can haveColorImageLengthRadiusStyleSpacingWidthTuesday, January 25, 2011Width16Valuesthinmediumthick<length>p{ border-color: black; border-top-width: 1pt; border-right-width: 2pt; border-bottom-width: thin; border-left-width: thick; border-style: solid;}p{ border-color: black; border-style: solid; border-width: 1pt 2pt thin thick;}p{ border-color: black; border-width: 1pt; border-style: solid;}Tuesday, January 25, 2011Border Styles17nonehiddendotted dashed solid double groove ridge inset outset The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.p{ border-color: black; border-style: solid dotted double dashed;}Tuesday, January 25, 2011Margins18p{ margin: 1.5pt 1em 2.3mm 2in; background-color: lime;}Tuesday, January 25, 2011Boxes & Displays19Tuesday, January 25, 2011Image from http://www.w3.org/TR/CSS21/box.htmlBackground20attachmentbreakclipcolorimageoriginpositionrepeatsizep{ margin: 1.5pt 1em 2.3mm 2in; background-color: lime;}Tuesday, January 25, 2011Fonts21font-familyfont-stylefont-variantfont-weightfont-sizefont-stretchPropertiesFont-familyValue: <family-name> | <generic-family> | inherit<generic-family>serifsans-serifcursivefantasymonospacep{ margin: 1.5pt 1em 2.3mm 2in; background-color: lime; font-family: 'Monotype Corsiva', Helvetica, sans-serif;}Tuesday, January 25, 2011Actual fonts depend on what is installed on client machineFont variant & Style22Font-variantValues: normal | small-caps | inherith3 { font-variant: small-caps }em { font-style: oblique }Font-styleValues: normal | italic | oblique | inheritTuesday, January 25, 2011Font-Weight23normal (400)bold (700)bolderlighter100200300400500600700800900inheritp { font-weight: normal } /* 400 */h1 { font-weight: 700 } /* bold */strong { font-weight: bolder }p { font-weight: lighter }Tuesday, January 25, 2011Font-Size24CSS absolute-size valuesxx-smallx-smallsmallmediumlargex-largexx-largescaling factor3/53/48/911 1/51 1/22HTML headingsh6h5h4h3h2h1HTML font sizes123456Value: <absolute-size> | <relative-size> | <length> | <percentage> | inherit<relative-size> larger | smallerp { font-size: 16px; }@media print { p { font-size: 12pt; }}blockquote { font-size: larger }em { font-size: 150% }em { font-size: 1.5em }Tuesday, January 25, 2011Text25text-indentValues: <length> | <percentage> | inheritp { text-indent: 3em }p.left { text-indent: -1in }text-alignValues: left | right | center | justify | inheritdiv.important { text-align: center }text-decorationValues: none | [ underline || overline || line-through || blink ] | inherita:visited,a:link { text-decoration: underline }Tuesday, January 25, 2011Sample CSS26body { background-color: #ddd; color: #222; font-family: Helvetica; font-size: 14px; margin: 0; padding: 0; }#header h1 { margin: 0; padding: 0;}#header h1 a { background-color: #ccc; border-bottom: 1px solid #666; color: #222; display: block; font-size: 20px; font-weight: bold; padding: 10px 0; text-align: center; text-decoration: none;}#header ul { list-style: none; margin: 10px; padding: 0;}Tuesday, January 25, 2011Example from Chapter 2 of Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan
View Full Document