CMPE 280 Web UI Design and Development September 5 Class Meeting Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak www.cs.sjsu.edu/~mak
HTML and CSS HTML Cascading Style Sheet (CSS) content organization semantics Cascading Style Sheet (CSS) layout formatting
Link to a Style Sheet An HTML page can link to an external style sheet. Example: <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Paragraphs and Headings</title> <link rel="stylesheet" href="css/mystyles1.css" /> </head> <body> ... </body> </html>
Example Style Sheet Style sheet css/mystyles1.css: All h1 headings should have red text on a yellow background. All h3 headings should have a gray text. h1 { background-color: yellow; color: red; } h3 { color: gray; Demo
Style Rules Each style rule has a selector and a declaration block. A declaration block consists of one or more declarations. A declaration is a property: value pair. style rule selector h1 { background-color: yellow; color: red; } h3 { color: gray; declaration block declaration
Style Colors Specify colors for CSS properties with a predefined color keyword: See http://www.w3.org/TR/css3-color/#svg-color for the complete list of predefined colors. HTML and CSS, 8th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2
Style Colors, cont’d You can specify colors by RGB (red-green-blue). Example: rgb(178, 60, 0) where each value can range from 0 through 255. You can include alpha transparency with RGBA. Example: rgba(178, 60, 0, 0.75) where the transparency value ranges from 0 to 1 0 is completely transparent, 1 is completely opaque.
Style Colors, cont’d Also available: HSL (hue-saturation-lightness) and HSLA Examples: hsl(282, 90%, 25%) hsla(282, 90%, 25%, 0.5)
Element Classes An HTML element can have a class name. Several elements can share the same class name. Examples: <p class="latin"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, ... </p> Duis aute irure dolor in reprehenderit in voluptate velit
Class Selectors A style sheet can apply a style to all HTML elements of a particular class. Example: .latin { font-style: italic; } Demo
Class Selectors, cont’d An element can have more than one class. Example: To style an element with both classes: There is no space between the two class names in the selector. <p class="class-1 class-2"> .class-1.class-2 { ... }
Element IDs An HTML element can have an ID. An ID must be unique and cannot be shared. Examples: <p id="alpha"> This is a paragraph. </p> <h1>Chapter 2</h1> <p id="beta"> Yet another paragraph.
ID Selectors A style sheet can apply styles to HTML elements with particular IDs. Examples: The use of element IDs is generally discouraged because styles cannot be reused. #alpha { font-variant: small-caps; } #beta { font-size: x-large; Demo
Grouping Selectors To group selectors in order to share a declaration block, separate the selectors with commas. Example: h1, h3 { background-color: yellow; color: red; }
Defining Selectors CSS provides many ways to define selectors. You’ve already seen: by element name: h1, h2, p by class name: .latin by element ID: #alpha, #beta
Select Elements by Context Select elements based on their ancestors, parents, or siblings. Example: Select paragraphs that are nested inside an element with class formula (i.e., paragraphs that are descendants of such an element). .formula p { ... }
Select Elements by Context, cont’d Example: Select paragraphs that are direct children of an element with class formula. Select only the paragraphs that directly follow a sibling paragraph. .formula > p { ... } .formula p+p { ... }
Select Elements by Context, cont’d HTML and CSS, 8th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2
Select Elements by Context, cont’d HTML and CSS, 8th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2
Select Elements by Context, cont’d HTML and CSS, 8th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2
Select the First or Last Child Elements Example: Select the first item of a list. Select the last item of a list. li:first-child { ... } li:last-child { ... }
Select the First or Last Child Elements, cont’d HTML and CSS, 8th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2
Select the First Letter or the First Line Example: Select the first letter of every paragraph. Select the first line of every paragraph. p:first-letter { ... } p:first-line { ... }
Select the First Letter or the First Line, cont’d HTML and CSS, 8th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2
Select Links Based on State Link states: not yet visited visited focused via the tab key hovered over by the mouse activated by the visitor
Select Links Based on State, cont’d <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Links</title> <link rel="stylesheet" href="css/linkstyles.css" /> </head> <body> <p> An absolute link to the <a href="http://localhost/basics/paragraphs.html"> Paragraphs and Headings </a> page. </p> A relative link to the <a href="tables.html">Tables</a> page. </body> </html>
Select Links Based on State, cont’d a:link { color: red; } a:visited { color: orange; a:focus { color: purple; a:hover { color: green; a:active { color: blue; Demo
Select Elements Based on Attributes Example: Select any paragraph that has a class attribute. p[class] { ... }
Select Elements Based on Attributes, cont’d HTML and CSS, 8th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2
Select Elements Based on Attributes, cont’d Attribute selector options: HTML and CSS, 8th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2
Inheritance An HTML element inherits style properties from its ancestors. HTML and CSS, 8th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2
What Can Be Inherited Text Lists color (except by the a element) list-style direction list-style-image font list-style-position font-family list-style-type font-size Tables font-style border-collapse font-variant border-spacing font-weight caption-side letter-spacing empty-cells line-height Paged Media (as in printing) text-align orphans text-indent page-break-inside text-transform widows visibility Other white-space cursor word-spacing quotes
The Cascade The cascade principle resolves conflicting style properties for an HTML element. Specificity The more specific the selector, the stronger the rule. Some selectors from least specific to most specific: HTML and CSS, 8th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2
The Cascade, cont’d Order Importance Rules that appear later take precedence over earlier rules. Importance A style marked as !important overrides specificity and order. Example: { color: purple !important; }
Embedded Style Sheet Not as clean a separation of content and style. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Embedded Style Sheet</title> <style> img { border: 4px solid red; } </style> </head> <body> ... </body> </html> Not as clean a separation of content and style.
Inline Styles Example: Not recommended! Combines content and style. We want to separate content and style. <p style="color: green; background-color: gray">
Good Tutorial Website http://www.w3schools.com
Formatting Text Format text by setting font properties: family style weight size line height color spacing and indentation alignment transformations and variants
Font Family Example: Surround multi-word names with quotes. Generic font families: serif sans-serif cursive body { font-family: Geneva; } h1, h2 { font-family: "Gill Sans"; fantasy monospace
Font Family, cont’d Specify alternate font families. In case a browser lacks a font family. Example: Default font families shared by Microsoft Windows and Mac OS X: Arial Comic Sans MS Courier New h1 { font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; } New Times Roman Verdana
Font Style Font styles are normal, italic, or oblique (faux italic). Not all font families have true italic. Example: h1: { font-style: oblique; } p: { font-style: italic;
Font Weight Font weights are normal, bold, bolder, or lighter. Example: Also: 100, 200, 300, 400, 500, 600, 700, 800, or 900 .special { font-weight: bold; }
Font Size Default sizes: xx-small x-small small Specify font size with absolute or relative units. Absolute units in pixels (px) or points (pt) Example: There is no space between the number and px or pt. medium large x-large xx-large smaller larger h1 { font-size: 35px; } Use points for printing.
Font Size, cont’d Relative units By percentage of the default size (usually 16px). By ratio of the parent element’s font size (em units). Examples: body { font-size: 100%; /* 16px */ } h1 { font-size: 2.1875em; /* 35px/16px */ h2 { font-size: 1.75em; /* 28px/16px */ Establish the baseline size. In traditional typesetting, an em unit is the width of the letter m.
Line Height Specify line height: as a multiple of the font size as a percentage of the font size in em, px, or pt units Example: p { line-height: 1.65; /* 15px x 1.65 = 24.75px */ }
Font Variants Font variants are normal or small-caps. Example: h2 { font-variant: small-caps; }
Combining Font Values Use the font property to combine font values. Size, families, weight, variant, line height List the values in any order, separated by blanks. You must specify the font size and font families. Size before families, only a blank after the size. Specify line height immediately after the font size, separated by a slash. Followed by a blank and the font families. Example: p { font: italic small-caps bold .85em/1.2 Palatino, serif; }
Line and Letter Spacing Specify line spacing and letter spacing with absolute px units or relative em units. Example: h2 { font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-weight: normal; letter-spacing: 7px }
Text Alignment Text alignments are left, right, center, or justify. Example: h1 { text-align: center; } p { text-align: justify; .intro .subhead {
Text Indentation Specify paragraph indentation with absolute px units or relative em units. Example: p { text-indent: 2em; }
Text Transformation Text transformations are none, capitalize, uppercase, or lowercase. Example: h1 { text-transform: uppercase; }
Controlling the Display of Elements Each HTML element has a default display property setting. Example: Paragraphs are display: block and emphasized text are display: inline CSS rules can override the default display. Example: em { display: block; } The following is some emphasized text that displays as a block.
The Box Model CSS treats every HTML element as if it were enclosed in an invisible box: width height padding borders margins Use absolute or relative units, or auto.
Borders Set the values of each border: Also: border-top, border-bottom border-left, border-right Or just border to set the values of all four borders Also: border-color border-width border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset .about img { border: 5px solid gray; } .nav-main { border-top: 5px solid red; border-bottom: 1px solid red;
Padding Set the size of the padding on each side: padding-top, padding-bottom padding-left, padding-right Padding color is the background-color.
Padding, cont’d Also: padding: size Applies to all sides padding: sizetb, sizerl sizetb applies to the top and bottom and sizerl applies to the right and left padding: sizet, sizerl, sizeb sizet applies to the top, sizeb applies to the bottom, and sizerl applies to the right and left padding: sizet, sizer, sizeb, sizel in clockwise order .about { background-color: white; padding: .3em .6em .3em; }
Margins Set margin sizes (similar to padding sizes): Also: margin-top, margin-bottom margin-left, margin-right Also: margin: size margin: sizetb, sizerl margin: sizet, sizerl, sizeb margin: sizet, sizer, sizeb, sizel h1: { margin-bottom: .4em; }
Floating Elements An element can float among text or other elements by making that other content flow around it. float: left Put the element to the left of the other content. float: right float: none .post-photo { float: left; margin-bottom: 2px; margin-right: 22px; }
Relative Positioning Position an element relative to its natural location. position: relative; Add any top, right, bottom, or left offsets. Relative positioning does not affect any surrounding elements.
Relative Positioning, cont’d Example: <h1>Relative Positioning</h1> <p>When you position an element relatively, you <span class="example">position it</span> relative to its normal location.</p> .example { position: relative; top: 35px; left: 100px; }
Absolute Positioning Position an element absolutely by specifying its position with respect to the page body or to its nearest positioned ancestor element. position: absolute Add any top, right, bottom, or left positions in px, em, or percentage of the ancestor. If elements overlap, specify a z-index value. Elements with higher z-index values overlap elements with lower values. Compare the z-index values only for elements in the same container.
Vertical Alignment Use vertical-align to align an element: baseline Align the element’s baseline with its parent’s baseline. middle Align the middle of the element slightly above the parent’s baseline. sub Position the element as a subscript of the parent’s baseline. super Position the element as a superscript of the parent’s baseline.
HTML Container Elements Semantic containers <header> … </header> <footer> … </footer> <main> … </main> <aside> … </aside> <nav> … </nav> <article> … </article> <section> … </section> Generic containers <div> … </div> <span> … </span> No inherent meaning. Used to apply styling. Contain a block of content. Contain a word or phrase.
ARIA Landmark Roles WAI-ARIA Web Accessibility Initiative Accessible Rich Internet Application Add ARIA roles to HTML elements to guide HTML screen readers for the visually impaired. Example: <nav role="navigation"> … </nav>
Page with No Styles http://www.htmlcssvqs.com/8ed/examples/chapter-11/no-styles.html
Page Layout Header Main Sidebar http://www.htmlcssvqs.com/8ed/examples/chapter-11/finished-page.html Footer