html tutorials 3 & 4: working with css

CIS 1315 – Web Development for Educators

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


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 Typeh1.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-image



background-repeat



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



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



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

html tutorials 3 & 4: working with css

Documents

web development

elementsyntax cis

yellow backgroundcolor

style set

html elementsyntax

unique element

red margin

html codesyntaxcis