Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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