CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS

CIS 1315 – Web Development for Educators 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

CIS 1315 – Web Development for Educators CSS Basics  Style Rule Syntax

CIS 1315 – Web Development for Educators 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 … in  Linked External File of Declarations Available to an Entire Site ASCII File with an Extension of.css

CIS 1315 – Web Development for Educators 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

CIS 1315 – Web Development for Educators Embedded Style  Always Contained in the Generally Used to Override a Style Set at a Higher Level Only Affects the Document in Which it Resides  Syntax selector {declarations} h1 {color:green; font-family:sans-serif;} b {color:yellow; background-color:green;}

CIS 1315 – Web Development for Educators Linked Style  External Style Sheet Always Contained in the Text Document that Contains Style Rules Allows Specification of Rules for Multiple Documents Does Not Contain HTML Code  Syntax

CIS 1315 – Web Development for Educators 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

CIS 1315 – Web Development for Educators Basic Selection  Type Selectors Selector Determines Element to which Declaration is Applied Style Sheet Examples: h2 {color: red;} p {font-size: 10 pt;}

CIS 1315 – Web Development for Educators Basic Selection  Grouping Selectors Set the Same Declaration for Multiple Selectors  Syntax: h1 {color: red;} h2 {color: red;} or h1, h2 {color: red;}

CIS 1315 – Web Development for Educators 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;}

CIS 1315 – Web Development for Educators 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

CIS 1315 – Web Development for Educators Advanced Selection  id Attribute Selector Applied to Only ONE Unique Element in a Document Core Attribute that can be Applied to Any HTML Element  Syntax: This is a unique paragraph that is the preface of the document

CIS 1315 – Web Development for Educators Advanced Selection  class Attribute Selector Enables Application of Rule to Selected Element(s) Core Attribute that can be Applied to Any HTML Element  Syntax: Text in red with a 30 pixel margin May be Restricted to a Specific Element Type h1.quote {color: red; margin: 30px;}

CIS 1315 – Web Development for Educators Advanced Selection  … Block Level Element Used to Contain Other HTML Elements Displayed Discretely from the Rest of the Document Paragraph Breaks Added Before and After Contents  … Inline Element Used to Contain Other HTML Elements Used within Text Blocks

CIS 1315 – Web Development for Educators 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;}

CIS 1315 – Web Development for Educators 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

CIS 1315 – Web Development for Educators 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

CIS 1315 – Web Development for Educators Advanced Selection  Pseudo-Element Selectors :first-letter

CIS 1315 – Web Development for Educators Advanced Selection  Pseudo-Element Selectors :first-line Apply Style Rules to the First Line of Any Block-level Element

CIS 1315 – Web Development for Educators 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

CIS 1315 – Web Development for Educators 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

CIS 1315 – Web Development for Educators Margin Properties  margin: # | % Shorthand Property Sets All Four Individual Margins

CIS 1315 – Web Development for Educators Margin Properties  margin-left | margin-right | margin-top | margin- bottom: # | % Negative margins can be set to achieve special effects

CIS 1315 – Web Development for Educators Padding Properties  padding: # | % Shorthand Property Sets All Four Individual Paddings Same Format as Margin  padding-left | padding-right | padding-top | padding-bottom: # | %

CIS 1315 – Web Development for Educators Border Properties  border: style width color Shorthand Property Sets All Four Individual Borders Same Format as Margin

CIS 1315 – Web Development for Educators Border Properties  border-style: keyword Keywords none dotted dashed solid double groove ridge inset outset

CIS 1315 – Web Development for Educators Border Properties  border-width: thin | medium | thick | #  border-color: value

CIS 1315 – Web Development for Educators Special Box Properties  width: # | % Sets Horizontal Width of a Containing Box  height: # | % Sets Vertical Height of a Containing Box  float: left | right | none Sets Position of an Element to Left/Right of Parent Element  clear: none | left | right | both Controls Flow of Text Around Floated Elements

CIS 1315 – Web Development for Educators Special Box Properties  float & clear

CIS 1315 – Web Development for Educators Background Properties  background-color

CIS 1315 – Web Development for Educators Background Properties  background-image

CIS 1315 – Web Development for Educators Background Properties  background-repeat

CIS 1315 – Web Development for Educators Background Properties  background-position

CIS 1315 – Web Development for Educators 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;}

CIS 1315 – Web Development for Educators List Properties  list-style-type

CIS 1315 – Web Development for Educators List Properties  list-style-image: url(filename.ext) Allows Use of Image as List Marker  Syntax: ul {list-style-image: url(paw.gif);}

CIS 1315 – Web Development for Educators List Properties  list-style-position: inside | outside Default = inside Allows Placement of the List Marker  Syntax: ul {list-style-position: outside;}

CIS 1315 – Web Development for Educators Positioning Properties  position: type position size type = static | relative | absolute | fixed position = top | left | bottom | right size = height | width

CIS 1315 – Web Development for Educators Positioning Properties  div {position:absolute; left:130px; top:100px;}

CIS 1315 – Web Development for Educators Positioning Properties  div {position:absolute; left:130px; top:100px; width: 100px;}