1 / 40

Mastering CSS: Configuring Color and Text for Web Development

Dive into the essentials of CSS and learn how to create and manage stylesheets effectively. This guide covers creating style sheets, applying inline styles, and utilizing embedded and external stylesheets. You will also explore selectors, the cascading nature of CSS, and how to control typography and spacing for printed media. Gain insights into the history and evolution of CSS, from CSS1 to CSS3, while understanding the significance of both external and embedded styles in web design. Perfect for web developers aiming for enhanced site aesthetics.

vincent-petty
Download Presentation

Mastering CSS: Configuring Color and Text for Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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) • 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

  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 • http://www.w3.org/TR/CSS1/ • CSS2 (’98) — 70 Additional Properties • Positioning • Visual Formatting • Media Types • Interfaces • http://www.w3.org/TR/CSS2/

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

  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 • 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 • 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> • 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 • 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 • 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 • Based on Hierarchical Structure of Documents • Parent • Element that Contains Another Element • Child • Element within Another Element

  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 • Set the Same Declaration for Multiple Selectors • Syntax: h1 {color: red;} h2 {color: red;} or h1, h2 {color: red;}

  19. 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;}

  20. 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>

  21. 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;}

  22. 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

  23. 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

  24. 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

  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 • 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 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)

  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 • Example • 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 • 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 • Numeric Pixel Value • Positive = Shadow Below; Negative = Shadow Above • blur • Numeric Pixel Value • 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;” • 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

More Related