HTML Tutorials 3 & 4: Working With CSS

CIS 1315 HTMLTutorials 3 & 4: Working With 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) • Style Sheet • Set of Style Rules

CSS Basics • Style Rule Syntax

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” href=“master.css”>

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

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

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: 12pt;} or p {color: blue; font-size: 12pt;}

Basic Selection • Descendant Selector • AKA Contextual Selectors • Based on Hierarchical Structure of Elements in Document • Syntax: b i {color: #336699; background-color: #000000;} • Does Not Apply to i b

Advanced 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>

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

Advanced Selection • <div>…</div> • Block Level Element • Used to Contain Other HTML Elements • Displayed Discretely from the Rest of the Document • Paragraph Breaks Added Before and After <div> Contents • <span>…</span> • Inline Element • Used to Contain Other HTML Elements • Used within Text Blocks

Advanced Selection • Pseudo-Class Selectors • Select Elements Based on Characteristics Other Than Name • Link Pseudo-Classes • :link • Allow Modification of Style Characteristics for Unvisited Links :link {color: green;} • :visited • Allow Modification of Style Characteristics for Visited Links :visited {color: green;}

Advanced Selection • Pseudo-Class Selectors • Dynamic Pseudo-Classes • Apply Styles to an Element Based on User’s Actions • :hover • Applies Style When User Mouses Over Element • :active • Applies Style When User Activates Element • :focus • Applies Style When Element is Accepting User Input

Advanced Selection • Pseudo-Elements Selectors • Modify Aspects of Document Not Classified by Elements • :first-letter • Apply Style Rules to the First Letter of Any Block-level Element • Initial Capitals • Drop Capitals

Advanced Selection • Pseudo-Element Selectors • :first-letter

Advanced Selection • Pseudo-Element Selectors • :first-line • Apply Style Rules to the First Line of Any Block-level Element

Visual Formatting Model • Three Element Display Type Categories • Block (e.g., Paragraphs) • Contain Inline Boxes that Contain Element Content • Inline • Contain Content within the Block-level Elements • Do not Form New Blocks of Content • List-item • Creates Surrounding Container and List-item Inline Boxes • display: block | inline | list-item | none

Box Model • Describes Rectangular Boxes that Contain Content • Each Block-level Element is Displayed as a Box • Each Content Box can have Margins, Borders, & Padding

Margin Properties • margin: # | % • Shorthand Property Sets All Four Individual Margins

Margin Properties • margin-left | margin-right | margin-top | margin-bottom: # | % • Negative margins can be set to achieve special effects

Border Properties • border: style width color • Shorthand Property Sets All Four Individual Borders • Same Format as Margin

Border Properties • border-style: keyword • Keywords • none • dotted • dashed • solid • double • groove • ridge • inset • outset

Border Properties • border-width: thin | medium | thick | # • border-color: value

Special Box Properties • float & clear

Background Properties • background-color

Background Properties • background-image

Background Properties • background-repeat

Background Properties • background-position

List Properties • list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hira-ganairoha | katakana-iroha | none • Default = disc • Allows Customization of the List Marker • Syntax: ul {list-style-type: circle;}

List Properties • list-style-type

List Properties • list-style-image: url(filename.ext) • Allows Use of Image as List Marker • Syntax: ul {list-style-image: url(paw.gif);}

List Properties • list-style-position: inside | outside • Default = inside • Allows Placement of the List Marker • Syntax: ul {list-style-position: outside;}

Positioning Properties • div {position:absolute; left:130px; top:100px;}

Positioning Properties • div {position:absolute; left:130px; top:100px;width: 100px;}

HTML Tutorials 3 & 4: Working With CSS