Configuring Color & Text With CSS CIS 1310 – HTML & CSS.
Download
Report
Transcript Configuring Color & Text With CSS CIS 1310 – HTML & CSS.
3
Configuring Color & Text
With CSS
CIS 1310 – HTML & 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
CIS 1310 – HTML & 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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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/
CIS 1310 – HTML & CSS
History of CSS
CSS3 (Working Draft)
Accessibility
Columnar Layout
International Features
Mobile Devices
http://www.w3.org/TR/CSS/
CIS 1310 – HTML & 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
Value
Quality or Characteristic (e.g., Color)
Specification of Property (e.g., Blue)
Each Rule Should be Terminated with a Semicolon
CIS 1310 – HTML & CSS
CSS Basics
Style Rule Syntax
Style Sheet
Set of Style Rules
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & 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;”>
CIS 1310 – HTML & CSS
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>
CIS 1310 – HTML & CSS
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” />
CIS 1310 – HTML & 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
CIS 1310 – HTML & CSS
Cascading
Rule Weight with the !Important Keyword
Allows User to Override Author’s Style Setting
Improves Accessibility of Documents
For Particular Element
Gives Control to Users with Special Requirements
Rule Weight by Origin
Cascading Order of Precedence:
1.
Rules From Author’s Style Sheet
2.
Rules From User’s Style Sheet
3.
Rules From Browser’s Style Sheet
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Inheritance
CSS Rules Inherit from Parent to Child Elements
Parent
Element that Contains Another Element
Child
Based on Hierarchical Structure of Documents
Element within Another Element
Global Initial Property Value
Used to Set a CSS Property to its Default Value
CIS 1310 – HTML & CSS
Basic Selection
Type Selectors
Selector Determines Element to which Declaration is Applied
Style Sheet Examples:
h2 {color: red;}
p {font-size: .75em;}
CIS 1310 – HTML & CSS
Basic Selection
Grouping Selectors
Set the Same Declaration for Multiple Selectors
Syntax:
h1 {color: red;}
h2 {color: red;}
or
h1, h2 {color: red;}
CIS 1310 – HTML & CSS
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;}
CIS 1310 – HTML & CSS
Basic Selection
id Attribute Selector
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>
CIS 1310 – HTML & CSS
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;}
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Color in HTML
Specified by Name
style=“color: green;”
Specified by Hexidecimal
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
CIS 1310 – HTML & CSS
Foreground & Background Properties
Styles
<body style=“color: green;”>
Foreground
<h1 style=“background-color: #00FF00;”>
Background
Color
Color
<body style=“background-image: url(bg.gif);”>
Background
Image
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Fonts
Measurement Units
CIS 1310 – HTML & CSS
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)
CIS 1310 – HTML & CSS
Font Properties
Styles
style=“font-family: fonts;”
Specific Font Families
Allows Specification of Particular Font-family
User Must Have Font Installed on Machine
Garamond, Impact
If not, Browser Will Supply Default
Example:
<p style=“font-family: arial;”>
CIS 1310 – HTML & CSS
Font Properties
Styles
style=“font-family: fonts;”
Specifying Font Substitution
Allows Specification of Alternate Fonts
Browser Scans List for First Installed Font
Uses Comma Separated List
Otherwise, Browser Supplies Default
Generic Font-family Names can be Used
Example:
<p style=“font-family: verdana,arial,helvetica,sans-serif;”>
CIS 1310 – HTML & CSS
Font Properties
Styles
style=“font-size: size | keyword | %;”
Absolute Keywords
xx-small
x-small
small
medium
large
x-large
xx-large
CIS 1310 – HTML & CSS
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%
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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;”>
CIS 1310 – HTML & CSS
Text Properties
Styles
style=“line-height: # | %;”
style=“letter-spacing: normal | #;”
AKA Leading
AKA Kerning
style=“word-spacing: normal | #;”
AKA Tracking
CIS 1310 – HTML & CSS
Text Properties
Styles
style=“text-align: left | center | right;”
AKA Justification
style=“text-decoration: none | underline | overline |
line-through | blink;”
CIS 1310 – HTML & CSS
Text Properties
Styles
style=“text-indent: #;”
Allows Specification Amount of Indentation of First Line
CIS 1310 – HTML & CSS
Text Properties
Styles
style=“text-shadow: hOffset vOffset blur color;”
hOffset
vOffset
Numeric Pixel Value
Positive = Shadow Below; Negative = Shadow Above
blur
Numeric Pixel Value
Positive = Shadow on Right; Negative = Shadow on Left
Numeric Pixel Value
color
style=“text-transform: capitalize | uppercase |
lowercase | none;”
CIS 1310 – HTML & CSS
Text Properties
Styles
style=“vertical-align: baseline | sub | super | top |
text-top | middle | bottom | text-bottom | % | #;”
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS