3 Configuring Color & Text With CSS

CIS 1310 – HTML & CSS

3

Configuring Color & Text With CSS


Learning OutcomesLearning 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)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 CSSAdvantages 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 CSSHistory 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 CSSHistory of CSS

CSS3 (Working Draft)

Accessibility

Columnar Layout

International Features

Mobile Devices

http://www.w3.org/TR/CSS/


CSS BasicsCSS 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 BasicsCSS Basics

Style Rule Syntax

Style Sheet Set of Style Rules


Combining CSS & HTMLCombining 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 StyleInline 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 StyleEmbedded 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 StyleLinked 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” />


CascadingCascading

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


CascadingCascading

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:

1. Rules From Author’s Style Sheet

2. Rules From User’s Style Sheet

3. Rules From Browser’s Style Sheet


CascadingCascading

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


InheritanceInheritance

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

Global Initial Property Value

Used to Set a CSS Property to its Default Value


Basic SelectionBasic Selection

Type Selectors

Selector Determines Element to which Declaration is Applied

Style Sheet Examples:

h2 {color: red;}

p {font-size: .75em;}



Grouping Selectors

Set the Same Declaration for Multiple Selectors

Syntax:

h1 {color: red;}

h2 {color: red;}

or

h1, h2 {color: red;}



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



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>



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



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 SoftwareColor 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 HTMLColor 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


Foreground & Background PropertiesForeground & 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


FontsFonts

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


FontsFonts

Measurement Units


Font PropertiessFont 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 PropertiesFont 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;”>



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;”>



Styles

style=“font-size: size | keyword | %;”

Absolute Keywords

xx-small

x-small

small

medium

large

x-large

xx-large



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%



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



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 PropertiesText Properties

Styles style=“line-height: # | %;”

AKA Leading style=“letter-spacing: normal | #;”

AKA Kerning style=“word-spacing: normal | #;”

AKA Tracking



Styles style=“text-align: left | center | right;”

AKA Justification style=“text-decoration: none | underline | overline |

line-through | blink;”



Styles style=“text-indent: #;”

Allows Specification Amount of Indentation of First Line



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;”



Styles style=“vertical-align: baseline | sub | super | top |

text-top | middle | bottom | text-bottom | % | #;”



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

Date post:	30-Dec-2015
Category:	Documents
Upload:	vincent-petty
View:	26 times
Download:	1 times