Download presentation
Presentation is loading. Please wait.
1
3 Configuring Color & Text With CSS
2
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
3
Cascading Style Sheets (CSS)
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
4
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
5
History of CSS CSS1 (’96) — 50 Properties
Fonts & Text Color & Backgrounds Block-level Elements CSS2 (’98) — 70 Additional Properties Positioning Visual Formatting Media Types Interfaces
6
History of CSS CSS3 (Working Group Note) Accessibility Columnar Layout
International Features Mobile Devices
7
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
8
CSS Basics Style Rule Syntax Style Sheet Set of Style Rules
9
Combining CSS & HTML Inline Embedded Linked
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
10
Inline Style Defines a Style for a Single Element Syntax
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;”>
11
Embedded Style Always Contained in the <head> Syntax
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>
12
Linked Style External Style Sheet Syntax
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” />
13
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
14
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
15
Cascading Rule Weight by Specificity Rule Weight by Order
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
16
Inheritance CSS Rules Inherit from Parent to Child Elements Parent
Based on Hierarchical Structure of Documents Parent Element that Contains Another Element Child Element within Another Element Global Initial Property Value Used to Set a CSS Property to its Default Value
17
Basic Selection Type Selectors
Selector Determines Element to which Declaration is Applied Style Sheet Examples: h2 {color: red;} p {font-size: .75em;}
18
Basic Selection Grouping Selectors Syntax:
Set the Same Declaration for Multiple Selectors Syntax: h1 {color: red;} h2 {color: red;} or h1, h2 {color: red;}
19
Basic Selection Combining Declarations Syntax:
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;}
20
Basic Selection id Attribute Selector Syntax:
Applied to Only ONE Unique 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>
21
Basic Selection class Attribute Selector Syntax:
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;}
22
Basic Selection Contextual Selector Syntax:
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
23
Color in Software Color Software Uses Math to Define Colors
Combination of Three Primary Colors RGB — Red, Green, Blue Software Uses Math to Define Colors Absence of Color 255 Highest Intensity of Color Red = 255,0,0; Green = 0,255,0; Yellow = 255,255,0
24
Color in HTML Specified by Name Specified by Hexidecimal
style=“color: green;” Specified by Hexidecimal Base 16 = A B C D E F style=“color: #00FF00;” # Before Number Indicates Hexidecimal Notation
25
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
26
Fonts Measurement Units Absolute Units Relative 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
27
Fonts Measurement Units
28
Font Properties 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)
29
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;”>
30
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;”>
31
Font Properties Styles style=“font-size: size | keyword | %;”
Absolute Keywords xx-small x-small small medium large x-large xx-large
32
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 50%, 150%, 200%
33
Font Properties Styles style=“font-style: normal | italic | oblique;”
style=“font-variant: normal | small-caps;” style=“font-weight: normal | bold | bolder | lighter | #;” # = 100 – 900 in Increments of 100 400 = Normal 700 = Bold
34
Font Properties Font Shortcut Example:
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;”>
35
Text Properties Styles style=“line-height: # | %;”
AKA Leading style=“letter-spacing: normal | #;” AKA Kerning style=“word-spacing: normal | #;” AKA Tracking
36
Text Properties Styles style=“text-align: left | center | right;”
AKA Justification style=“text-decoration: none | underline | overline | line-through | blink;”
37
Text Properties Styles style=“text-indent: #;”
Allows Specification Amount of Indentation of First Line
38
Text Properties Styles
style=“text-shadow: hOffset vOffset blur color;” hOffset Numeric Pixel Value Positive = Shadow on Right; Negative = Shadow on Left vOffset Positive = Shadow Below; Negative = Shadow Above blur color style=“text-transform: capitalize | uppercase | lowercase | none;”
39
Text Properties Styles
style=“vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | % | #;”
40
Text Properties Styles style=“white-space: normal | nowrap | pre;”
Whitespace Will Collapse into a Single Whitespace Text Will Wrap When Necessary nowrap Text Will Never Wrap pre Whitespace is Preserved
Similar presentations
