Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download CIS 1315 – Web Development for Educators
Document related concepts
Transcript
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
Value
Quality or Characteristic (e.g., Color)
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 <style>…</style> in <head>
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
<tag style=“property:value1; property:value2;”>
<h1 style=“color:green; font-family:sans-serif;”>
<b style=“color:yellow; background-color:green;”>
CIS 1315 – Web Development for Educators
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 1315 – Web Development for Educators
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”>
CIS 1315 – Web Development for Educators
Inheritance
Parent
Child
Element that Contains Another Element
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:
<p id=“preface”>This is a unique paragraph that is the preface
of the document</p>
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:
<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 1315 – Web Development for Educators
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
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
:active
Applies Style When User Mouses Over Element
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)
Inline
Contain Content within the Block-level Elements
Do not Form New Blocks of Content
List-item
Contain Inline Boxes that Contain Element Content
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 | marginbottom: # | %
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: # | %
height: # | %
Sets Vertical Height of a Containing Box
float: left | right | none
Sets Horizontal Width of a Containing Box
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 | upperroman | 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;}
CIS 1315 – Web Development for Educators
