HTML BOOT CAMP Chapter 8 Cascading Style Sheets

HTML BOOT CAMP Chapter 8 Cascading Style Sheets Kirkwood Continuing Education © Copyright 2016 Fred Mc. Clurg All Rights Reserved

WHAT IS A STYLE SHEET Description: Cascading Style Sheets (CSS) are rules that specify how the HTML is rendered (displayed) in the browser. It is a way to manage the “look” of the page (e. g. backgrounds, fonts, colors, etc. ). All tags have default attributes and property values. CSS allows you to change those defaults. 2

PURPOSE OF STYLE SHEET Purpose: Way to keep the design presentation separate from the page layout and content. Advantages: 1. Easier to establish a common style 2. 3. 4. between multiple pages Easier to establish a common style across multiple elements Easier to change style when requirements change Styles can be layered (i. e. cascaded) 3

STYLE SHEET TECHNIQUES Description: There are three basic ways to apply styles to elements. 1. Inline Styles (Element Level) 2. Internal (Document Level) Style Sheet 3. External Style Sheet 4

INLINE STYLES: STYLE ATTRIBUTE Description: Style attributes attached to each HTML tag. Example: <div style="color: blue; "> Blue, blue, my world is blue Blue is my world since I'm without you. </div> 5 Chapter 08: Inline Style Attribute

PROS/CONS INLINE STYLES Description: Inline Style have a few advantages and several disadvantages. Advantages: q Override most styles Disadvantages: q Can not reuse styles q Multiple page styles more difficult q Changes more difficult because styles are spread throughout document 6

DOCUMENT-LEVEL STYLESHEET Description: Style attributes embedded in an HTML document. <head> <style type="text/css"> div { color: blue; font-style: italic; } </style> </head> <body> <div> I'm so blue I don't know what to do. </div> </body> Chapter 08: Document-Level Stylesheet 7

PROS/CONS DOC-LEVEL STYLES Description: Document-Level Stylesheets have some advantages and disadvantages. Advantages: q Overrides externally defined styles q Easy to experiment before moving to external stylesheets Disadvantages: q Managing multiple documents difficult 8

EXTERNAL STYLESHEETS Description: Styles can be placed in a separate file and imported into an HTML document. <head> <link rel="stylesheet" type="text/css" href="styles. css"> </head> <body> <div> I'm so blue I don't know what to do. </div> </body> Chapter 08: External Stylesheet Link 9

EXTERNAL STYLESHEETS Description: Styles placed in a separate file and imported into an HTML document. Example “styles. css” file: /* make div blue & italic */ div { color: blue; font-style: italic; } 10 Chapter 08: External Stylesheet File

PROS/CONS EXTERNAL STYLES Description: External Stylesheets have some advantages and disadvantages. Advantages: q Provides consistency between pages q “Single” point of maintenance q Easier to share with other sites Disadvantages: q Slower page load time 11

CASCADING ORDER Description: Generally, styles will “cascade” by the following rules. Rule one has the highest priority: 1. Inline style (HTML attribute) <div style=". . . "> 2. Internal style sheet (in the head section) <style>. . . </style> 3. External style sheet (last overrides previous) <link href="style. css"> 4. Browser default 12

STYLE COMMENTS Description: Comments allow the author to document the CCS purpose: Example: /* one line comment */ /* multiple line comment */ 13

STYLE PRECEDENCE Description: Some CSS styles override others. Conflicting style sheet definitions follow the precedence rules. One has the highest precedence: 1. 2. 3. 4. 5. 6. 7. The ID selector The attribute selector The class selector The child selector The adjacent sibling selector The descendant selector The type selector 14

STYLE SYNTAX Description: A style rule is made up of two parts: the selector and the property/value pairs: Syntax: selector { property 1: value 1; property 2: value 2; . . . } Example: h 1 { color: green; } 15

MULTIPLE SELECTORS Description: Used to apply the same property values to multiple elements. When elements in a selector are separated by commas “, ”, the property values apply to all elements in the list: Comma-Separated Multiple Selector List: h 1, h 2, h 3 { text-align: center; } Does the same as: h 1 { text-align: center; } h 2 { text-align: center; } h 3 { text-align: center; } 16

CONTEXTUAL SELECTORS Description: Used to select elements inside elements. Elements in a selector that are separated with spaces, match the hierarchy (or nested) order of the elements. Space-Separated Contextual Selector List: ol li { list-style: upper-roman; } ol ol li { list-style: upper-alpha; } ol ol ol li { list-style: decimal; } ol ol li { list-style: lower-alpha; } ol ol ol li { list-style: lower-roman; } Note: If two contextual selectors apply to an element, the most specific context take precedence. Chapter 08: Contextual Selectors 17

MULTIPLE CONTEXTUAL SELECTORS Description: Multiple Contextual Selectors can be specified by separating them with a comma “, ”: Multiple Contextual Selector List: p strong, em strong { color: red; } 18

PARENT/CHILD (DESCENDANT) SELECTORS Description: Used to select an element with a specific parent. Elements in a selector that are separated with “>”, match the exact hierarchy (or nested) order of the elements. Child Selector List: /* parent > child */ p > em { color: red; } Note: Elements that are not directly a child of the 19 parent will not be selected.

UNIVERSAL SELECTORS Description: A universal selector functions similar to a wildcard. The dot “*” in the selector identifies a Universal Selector class: Universal Selector: * { color: purple; } 20

ADJACENT (SIBLING) SELECTORS Description: Used to select an element that is immediately after another element. The plus “+” between the elements identifies an Adjacent Selector: Adjacent Selector List: h 1 + h 2 { margin-top: +20 px; } 21

ATTRIBUTE SELECTORS Description: Used to select an element that has a specific attribute: Attribute Selector List: /* match attribute & any value */ p[align] {color: green; } /* match attribute & left */ p[align=left] {color: magenta; } 22

MORE ATTRIBUTE SELECTORS Description: Used to select an element that has a specific attribute: Attribute Selector List: /* matches word "intro" */ p[title~="intro"] {color: blue; } /* start word "en" or "en-us" only */ p[lang|="en"] {color: red; } /* matches substring "w 3 schools" */ a[href*="w 3 schools"] {color: cyan; } /* value starts with "https" */ a[href^="https"] {color: yellow; } /* value ends with ". pdf" */ a[href$=". pdf"] {color: navy; } 23

PSEUDOELEMENT SELECTORS Description: Used to select an elements that have special relationships: Pseudoelement Selector List: p: first-letter {font-size: 200%} p: first-line {font-style: italic} 24

REGULAR CLASS SELECTORS Description: Used to select a group of elements that have common characteristics. The dot “. ” before the selector name identifies a class: Regular Classes: h 2. center {text-align: center; } p. abstract { font-style: italic; margin-left: 1 in; margin-right: 1 in; } div. author {text-align: right; } p. footnote {font-size: 8 pt; } 25 Chapter 08: Regular Class Selectors

GENERIC CLASS SELECTORS Description: Used to select all elements that have a class name. The dot “. ” before the selector name identifies a class. The first example is the same as “*. italic”: Generic Classes: . italic {font-style: italic; }. center {text-align: center; }. small {font-size: 8 pt; }. tiny {font-size: 6 pt; }. thumbnail { border: 1 px solid gray; margin: 5 px; } 26 Chapter 08: Generic Class Selectors

ID SELECTORS Description: Used to select one element with an ID name. The hash “#” before the selector name identifies a ID Selector: Generic Classes: #company { font-family: Georgia, serif; font-variant: small-caps; font-size: 2 em; font-weight: bold; } #slogan {font-style: italic; } 27 #footnote {font-size: 6 pt; }

PSEUDOCLASS SELECTORS Description: Used to select the state of an element. The colon “: ” after the “a” element selector identifies a Pseudoclass Selector: Hypertext Pseudoclasses: a: link {color: blue; } a: active { color: red; font-weight: bold; } a: visited {color: green; } 28

PSEUDOCLASS SELECTORS Description: Used to select the state of an element. The colon “: ” after the “a” element selector identifies a Pseudoclass Selector: Interaction Pseudoclasses: a: hover { color: magenta; border: 1 px solid black; } a: focus { color: white; background: gray; } 29

SELECTORS REFERENCE Description: There a number of other less used CSS selectors. CSS Selectors Reference: http: //www. w 3 schools. com/cssr ef/css_selectors. asp 30

IMPORTANT STYLE OVERRIDING Description: The keyword “!important” can be used to override CSS precedence. Example: <style type="text/css"> p { color: red !important; } </style> <p style="color: green"> While public opinion might sway back and forth, right and wrong do not. </p> — Andy Andrews Chapter 08: Important Style Overriding 31

STYLE SHEET SPECIFICITY Description: The style sheet definition follows the following precedence: The ID value in the style selector. 2. Attribute and pseudo-classes in selector. 3. Element names and pseudo-elements in selector. 1. Example: <style type="text/css"> p { border: 6 px ridge red; padding: 10 px; /* apply to all paragraphs */ } p. my. Class { border: 6 px ridge green; } p#my. Id { border: 6 px ridge blue; } </style> Chapter 08: Stylesheet Specificity 32

EQUALLY SPECIFIC STYLES Description: The style with the most specification has precedence. However, two styles with equal specificity, the browser selects the last one defined: Example: <style type="text/css"> p. my. Class 1 { background-color: red; } p. my. Class 2 { background-color: yellow; } </style> <p class="my. Class 1 my. Class 2"> "Every single choice you make. . . </p> Chapter 08: Equally Specific Styles 33

CSS INHERITANCE Description: Most nested elements inherit the styles of the parent. Example: <style type="text/css"> div { color: white; background-color: red; border: medium groove black; } </style> <div> <p> ". . . you are creating the painting that your life will ultimately become – a masterpiece or a disaster. " </p> </div> Chapter 08: CSS Inheritance 34

FORCING INHERITANCE Description: The styles that are not usually inherited can be forced to reflect the style of their parent by using the keyword “inherit”. Example: <style type="text/css"> div. stuff { color: white; background-color: red; border: medium groove black; } p. stuff { border: inherit; } </style> <div> <p> ". . . you are creating the painting that your life will ultimately become – a masterpiece or a disaster. " </p> </div> Chapter 08: Forcing Inheritance 35

ABSOLUTE LENGTH PROPERTIES Description: Used to set the size of a property. Lengths cm mm in pt pc px Definition centimeters millimeters inches: 1 in is equal to 2. 54 cm points: 1 pt is equal to 1/72 nd of 1 in picas: 1 pc is equal to 12 pt pixels: 1 px is equal to 1/96 th of 1 in (96 dpi display) 36

RELATIVE LENGTH PROPERTIES Description: Used to set the size of a property. Lengths em % ex rem Definition Equal to the “font-size” value of the element property. Percentage value of initial property. Height of letter “x”. 1 ex ≈ 0. 5 em. Relative to font-size of root HTML element. 37

COLOR MODELS Description: CSS allows you to specify colors using several different color models: Code rgb(r, g, b) Definition RGB model specifies color in red, green, blue values Example rgb(148, 0, 211) rgba(r, g, b, a) RGB model with alpha value for opacity rgba(148, 0, 211, 0. 4) hsl(h, s, l) hsl(120, 100%, 22%) HSL model specifying Hue, Saturation, Lightness hsla(h, s, l, a) HSL model with alpha value hsla(120, 100%, 22%, 0. 4) for opacity 38 Opacity scale: 0 = transparent, 1 = opaque

COLOR NAMES Description: The definitive list of permissible color names can be found at the following URL: http: //www. w 3. org/TR/css 3 color/ 39

COLOR PROPERTY VALUES Description: Used to specify color values. Syntax: #7788 CC /* purple */ #78 C /* purple (not preferred) */ rgb(255, 0, 0) /* red */ rgb(100%, 0) /* yellow */ blue See also CSS Color Names: http: //www. w 3 schools. com/cssref/css_co lornames. asp http: //en. wikipedia. org/wiki/HTML_colo 40 r_names

WEB SAFE FONT COMBINATIONS Description: Commonly used Serif font combinations. Serif: font-family Georgia, serif "Palatino Linotype", "Book Antiqua", Palatino, serif "Times New Roman", Times, serif 41

WEB SAFE FONT COMBINATIONS Description: Commonly used Sans-Serif font combinations. Sans-Serif: font-family Arial, Helvetica, sans-serif "Arial Black", Gadget, sans-serif "Comic Sans MS", cursive, sans-serif Impact, Charcoal, sans-serif "Lucida Sans Unicode", "Lucida Grande", sans-serif Tahoma, Geneva, sans-serif "Trebuchet MS", Helvetica, sans-serif Verdana, Geneva, sans-serif 42

WEB SAFE FONT COMBINATIONS Description: Commonly used Monospace font combinations. Monospace: font-family "Courier New", Courier, monospace "Lucida Console", Monaco, monospace 43

FONT-SIZE KEYWORD PROPERTIES Description: Keywords can also be used to specify fontsize. Keywords: medium (default) approx. 16 px=1 em xx-small (absolute) large (absolute) x-large (absolute) xx-large (absolute) smaller (relative) larger (relative) 44

COMMON FONT PROPERTIES Description: Common font properties. Properties font-style font-variant font-height font-weight Description normal, italic normal, small-caps 12 pt See next slide 45

FONT-WEIGHT PROPERTIES Description: font-weight properties defines the font thickness. Properties Description normal Default (same as 400) bold Bold font (same as 700) bolder Make thicker characters lighter Make lighter characters 100, 200, 300, 400 is same as normal 400, 500, 600, 700 is same as bold 700, 800, 900 46

FONT PROPERTIES Description: The font property combines many properties into one specification For example: p. multi. Font. Prop { font-weight: bold; font-size: 12 pt; line-height: 14 pt; font-family: Times, Garamond, serif; } Same as: p. single. Font. Prop { font: bold 12 pt/14 pt Times, Garmond, serif} 47

BACKGROUND PROPERTIES Description: The background property combines many properties into one specification. Quotes around URL pathname is not recommended. For example: body { background-image: url(images/draft. png); background-color: azure; background-repeat: no-repeat; background-attachment: fixed; background-position: center; } Same as: body { background: url(images/draft. png) azure no-repeat fixed center; } 48

URL PROPERTY VALUES Description: Used to specify a URL value. Syntax: url(protocol: //server. domain. com/dirname/fi lename) Examples: url(http: //localhost/quote/images/flag. png) url(images/flag. png) CSS Background Image: background-image: url(images/draft. png); 49 Chapter 08: Background Image

TEXT-ALIGN PROPERTIES Description: text-align defines the justification properties of text. Properties left right center justify Description Left alignment (default) Right alignment Center alignment Align text to span left and right margins by adjusting word spacing. 50

BOX MODEL Description: HTML elements fit into a rectangular box. Note: “outline” is outside of border: 51

CSS FORMATTING MODEL Description: Each element fits into a rectangular space or box. See Figure 8 -14 on page 274: 52

BORDER PROPERTIES Description: The border property combines many properties into one specification For example: img. border { border-color: gray; border-style: ridge; border-width: 5 px; } Same as: img. border { border: gray ridge 5 px; } 53

FLOAT PROPERTIES Description: float causes text to float around an element. Properties left right none Description Sets element to left margin and allows text to flow on right side Sets element to right margin and allows text to flow on left side Does not allow text to flow on either side of element (default) 54

FLOATING ELEMENTS Description: The float property allows an element to be pushed horizontally left or right. For example: div. float. Right { float: right; } 55 Chapter 08: Floating Elements

MARGIN PROPERTIES (4 VALUES) Description: The margin property combines many properties into one specification For example: div. edge { margin-top: 5 px; margin-right: 10 px; margin-bottom: 15 px; margin-left: 20 px; } Same as: div. edge { margin: 5 px 10 px 15 px 20 px; } 56

MARGIN PROPERTIES (3 VALUES) Description: The margin property combines many properties into one specification Example: div. edge { margin: 5 px 10 px 15 px; } Meaning: o top margin is 5 px o left and right margins are 10 px o bottom margin is 15 px 57

MARGIN PROPERTIES (2 VALUES) Description: The margin property combines many properties into one specification Example: div. edge { margin: 5 px 10 px; } Meaning: o top and bottom margins are 5 px o left and right margins are 10 px 58

MARGIN PROPERTIES (1 VALUE) Description: The margin property combines many properties into one specification Example: div. edge { margin: 5 px; } Meaning: o all four margins are 5 px 59

PADDING PROPERTIES (4 VALUES) Description: The padding property combines many properties into one specification For example: div. matte { padding-top: 5 px; padding-right: 10 px; padding-bottom: 15 px; padding-left: 20 px; } Same as: div. matte { padding: 5 px 10 px 15 px 20 px; } 60

PADDING PROPERTIES (3 VALUES) Description: The padding property combines many properties into one specification Example: div. matte { padding: 5 px 10 px 15 px; } Meaning: o top padding is 5 px o left and right paddings are 10 px o bottom padding is 15 px 61

PADDING PROPERTIES (2 VALUES) Description: The padding property combines many properties into one specification Example: div. matte { padding: 5 px 10 px; } Meaning: o top and bottom paddings are 5 px o left and right paddings are 10 px 62

PADDING PROPERTIES (1 VALUE) Description: The padding property combines many properties into one specification Example: div. matte { padding: 5 px; } Meaning: o all four paddings are 5 px 63

LIST-STYLE-IMAGE PROPERTY Description: The list-style-image property defines an image for the list item instead of a bullet Example: li. check { list-style-image: url(images/check. png); list-style-type: square; } Meaning: Defines the image “check. png” instead of an item bullet. If the image file is not found, the browser uses a square bullet. 64

BORDER-COLLAPSE PROPERTY Description: The border-collapse property controls spacing between table cells and the border Example: table { border-collapse: collapse; } 65 Chapter 08: Table Border Collapse

WHITE-SPACE PROPERTY Description: The “white-space” property controls how a sentence is wrapped. The value “nowrap” prevents the text from wrapping. Example: div. coding { white-space: nowrap; font-family: "Courier New", Courier, monospace; font-weight: bold; } 66

ROUND CORNERS PROPERTY Description: The border-radius property displays rounded corners on borders. Example: div. rounded { border-radius: 10 px; border: medium double gray; padding: 20 px; } 67 Chapter 08: Border Radius

NTH-CHILD SELECTOR Description: The “nth-child” property specifies a certain value for every “nth” child of its parent. Example: <style> ul li: nth-child(even) { background: #ffff 00; } ul li: nth-child(odd) { background: #00 ffff; } </style> <ul> <li> </ul> One </li> Two </li> Three </li> Four </li> 68 Chapter 08: nth-child Selector

NTH-OF-TYPE SELECTOR Description: The “nth-of-type” property specifies a certain attribute for every element that is the “nth” element of its parent. Example: <style> div. row: nth-of-type(odd) { background-color: #CCCCCC; } div. row: nth-of-type(even) { background-color: #666666; color: #ffffff; } </style> <div class="row"> List One </div> <p> Paragraph One </p> <div class="row"> List Two </div> <p> Paragraph Two </p> <div class="row"> List Three </div> <p> Paragraph Three </p> <div class="row"> List Four </div> <p> Paragraph Four </p> 69 Chapter 08: nth-of-type Selector

MEDIA QUERIES Description: Media Queries allow you to specify a device and set an attribute based on things like height, width, orientation (landscape/portrait), and resolution. Example: <style> div. max. Min { color: black; background-color: yellow; } @media screen and (max-width: 500 px) { div. max. Min { color: yellow; background-color: black; } } @media screen and (min-width: 700 px) { div. max. Min { color: black; background-color: cyan; } } </style> <div class="max. Min"> When the screen is smaller than 500 px it is one color. When the screen is smaller than 700 px it is another. Resize the browser to try it! </div> 70 Chapter 08: Media Queries