3 Configuring Color & Text With CSS

Learning Outcomes • Create Style Sheets to Configure Color & Text • Apply Inline Styles • Use Embedded Style Sheets • Use External Style Sheets • Utilize Element, Class, Id, & Contextual Selectors • Utilize the “Cascade” In CSS

Cascading Style Sheets (CSS) • Style Sheets • Used for Years in Desktop Publishing • Apply Typographical Styles & Spacing to Printed Media • CSS • Provides Functionality of Style Sheets & More • For Web Developers • Flexible, Cross-platform, Standards-based Language • Developed by the W3C • Released in 1994 by Hakon Lie of CERN

Advantages of CSS • Greater Typography & Page Layout Control • Style is Separate from Structure • Styles Can Be Stored in a Separate Document • Potentially Smaller Documents • Easier Site Maintenance

History of CSS • CSS1 (’96) — 50 Properties • Fonts & Text • Color & Backgrounds • Block-level Elements • http://www.w3.org/TR/CSS1/ • CSS2 (’98) — 70 Additional Properties • Positioning • Visual Formatting • Media Types • Interfaces • http://www.w3.org/TR/CSS2/

History of CSS • CSS3 (Working Draft) • Accessibility • Columnar Layout • International Features • Mobile Devices • http://www.w3.org/TR/CSS/

CSS Basics • Style Rules • Determines Style Characteristics for an HTML Element • Selector • Determines Element to Which Rule is Applied • Declaration • Details the Exact Property Values • Property • Quality or Characteristic (e.g., Color) • Value • Specification of Property (e.g., Blue) • Each Rule Should be Terminated with a Semicolon

CSS Basics • Style Rule Syntax • Style Sheet • Set of Style Rules

Combining CSS & HTML • Inline • Modify the Appearance of a Particular Element • Style Attribute • Embedded • Applied To An Entire Document • Redefines All Occurrences of a Particular Element • Uses <style>…</style> in <head> • Linked • External File of Declarations Available to an Entire Site • ASCII File with an Extension of .css

Inline Style • Defines a Style for a Single Element • Generally Used to Override a Style Set at a Higher Level • Only Affects One Instance of an Element • Syntax • <tag style=“property:value1; property:value2;”> <h1 style=“color:green; font-family:sans-serif;”> <b style=“color:yellow; background-color:green;”>

Embedded Style • Always Contained in the <head> • Generally Used to Override a Style Set at a Higher Level • Only Affects the Document in Which it Resides • Syntax • selector {declarations} <style type=“text/css”> h1 {color:green; font-family:sans-serif;} b {color:yellow; background-color:green;} </style>

Linked Style • External Style Sheet • Always Contained in the <head> • Text Document that Contains Style Rules • Allows Specification of Rules for Multiple Documents • Does Not Contain HTML Code • Syntax <link rel=“stylesheet” type=“text/css” href=“master.css” />

Cascading • Determines Which Rules are Assigned to Elements • Weight Assignment Based on Four Variables: • Use of the !Important Keyword • Origin of the Rule • Specificity of the Selector • Order of the Rule in the Style Sheet

Cascading • Rule Weight with the !Important Keyword • Allows User to Override Author’s Style Setting • For Particular Element • Improves Accessibility of Documents • Gives Control to Users with Special Requirements • Rule Weight by Origin • Cascading Order of Precedence: • Rules From Author’s Style Sheet • Rules From User’s Style Sheet • Rules From Browser’s Style Sheet

Cascading • Rule Weight by Specificity • Rules with More Specific Selectors Take Precedence Over Rules with Less Specific Selectors • Rule Weight by Order • Based on Order of Rule within Style Sheet • Rules Listed Later Take Precedence Over Those Listed Earlier

Inheritance • CSS Rules Inherit from Parent to Child Elements • Based on Hierarchical Structure of Documents • Parent • Element that Contains Another Element • Child • Element within Another Element

Basic Selection • Type Selectors • Selector Determines Element to which Declaration is Applied • Style Sheet Examples: h2 {color: red;} p {font-size: .75em;}

Basic Selection • Grouping Selectors • Set the Same Declaration for Multiple Selectors • Syntax: h1 {color: red;} h2 {color: red;} or h1, h2 {color: red;}

Basic Selection • Combining Declarations • Multiple Declarations May be Stated for Same Selector • Syntax: p {color: blue;} p {font-size: 1.5em;} or p {color: blue; font-size: 1.5em;}

Basic Selection • id Attribute Selector • Applied to Only ONEUnique Element in a Document • Core Attribute that can be Applied to Any HTML Element • Syntax: <p id=“preface”>This is a unique paragraph that is the preface of the document</p>

Basic Selection • class Attribute Selector • Enables Application of Rule to Selected Element(s) • Core Attribute that can be Applied to Any HTML Element • Syntax: <p class=“quote”>Text in red with a 30 pixel margin</p> • May be Restricted to a Specific Element Type h1.quote {color: red; margin: 30px;}

Basic Selection • Contextual Selector • Based on Hierarchical Structure of Elements in Document • Syntax: parent descendant {styles} strong em {color: #336699; background-color: #000000;} • Does Not Apply to em strong

Color in Software • Color • Combination of Three Primary Colors • RGB — Red, Green, Blue • Software Uses Math to Define Colors • 0 • Absence of Color • 255 • Highest Intensity of Color • Red = 255,0,0; Green = 0,255,0; Yellow = 255,255,0

Color in HTML • Specified by Name • style=“color: green;” • Specified byHexidecimal • Base 16 = 0 1 2 3 4 5 6 7 8 9 A B C D E F • style=“color: #00FF00;” • # Before Number Indicates Hexidecimal Notation

Foreground & Background Properties • Styles • <body style=“color: green;”> • Foreground Color • <h1 style=“background-color: #00FF00;”> • Background Color • <body style=“background-image: url(bg.gif);”> • Background Image

Fonts • Measurement Units • Absolute Units • Specify a Fixed Value • Cannot be Scaled to Client Display • Use Only When Measurements of User Medium are Known • Relative Units • Enables Scalable Web Pages • Adapt to Different Display Types & Sizes • Recommended Method for Web Page Design

Fonts • Measurement Units

Font Propertiess • Styles • style=“font-family: fonts;” • Allows Specification of Font Family Names • Generic Font Families • Allows Greater Portability Across Platforms • Serif  Traditional Letter Form (e.g., Times) • Sans-serif  Block Letters, Have no Serifs (e.g., Arial) • Monospace  Fixed-width • Every Letter has Same Horizontal Width • Cursive  Resembles Handwriting (Limited Support) • Fantasy  Primarily Decorative (Limited Support)

Font Properties • Styles • style=“font-family: fonts;” • Specific Font Families • Allows Specification of Particular Font-family • Garamond, Impact • User Must Have Font Installed on Machine • If not, Browser Will Supply Default • Example: <p style=“font-family: arial;”>

Font Properties • Styles • style=“font-family: fonts;” • Specifying Font Substitution • Allows Specification of Alternate Fonts • Uses Comma Separated List • Browser Scans List for First Installed Font • Otherwise, Browser Supplies Default • Generic Font-family Names can be Used • Example: <p style=“font-family: verdana,arial,helvetica,sans-serif;”>

Font Properties • Styles • style=“font-size: size | keyword | %;” • Absolute Keywords • xx-small • x-small • small • medium • large • x-large • xx-large

Font Properties • Styles • style=“font-size: size | keyword | %;” • Relative Keywords • Smaller | Larger • Example • Parent Element’s Size is Large • Current Element’s Size is Set to Larger • Result is that the Current Font Size will be X-large • Percentage • Example • 50%, 150%, 200%

Font Properties • Font Shortcut • Allows Specification of Properties in a Single Statement • Font-size & Font-family Required • Must be in Order • Line-height Must be Preceded by / • Example: <p style=“font: 1.5em/2em verdana bold;”>

Text Properties • Styles • style=“line-height: # | %;” • AKA Leading • style=“letter-spacing: normal | #;” • AKA Kerning • style=“word-spacing: normal | #;” • AKA Tracking

Text Properties • Styles • style=“text-indent: #;” • Allows Specification Amount of Indentation of First Line

Text Properties • Styles • style=“text-shadow: hOffset vOffset blur color;” • hOffset • Numeric Pixel Value • Positive = Shadow on Right; Negative = Shadow on Left • vOffset • Numeric Pixel Value • Positive = Shadow Below; Negative = Shadow Above • blur • Numeric Pixel Value • color • style=“text-transform: capitalize | uppercase | lowercase | none;”

Text Properties • Styles • style=“white-space: normal | nowrap | pre;” • normal • Whitespace Will Collapse into a Single Whitespace • Text Will Wrap When Necessary • nowrap • Whitespace Will Collapse into a Single Whitespace • Text Will Never Wrap • pre • Whitespace is Preserved

3 Configuring Color & Text With CSS