210 likes | 329 Views
ECA 228 Internet/Intranet Design I. Cascading Style Sheets. CSS rules. Declaration. RULE. h1 { color: red; }. Selector. Property. Value. CSS rules cont …. each rule has 2 parts selector : determines to which element a rule is applied
E N D
ECA 228 Internet/Intranet Design I Cascading Style Sheets
CSS rules Declaration RULE h1 { color: red; } Selector Property Value ECA 228 Internet/Intranet Design I
CSS rules cont … • each rule has 2 parts • selector: determines to which element a rule is applied • declaration: the rules to apply to the selector • property: the name of the CSS property that describes the formatting being applied • value: an allowable option to set or describe the property • a rule may have more than one declaration • semicolon must end declarations • semicolon is optional for the last pair ECA 228 Internet/Intranet Design I
Applying CSS • can be applied three ways:1. Internal 2. External 3. Inline • Internal • rules are placed inside <style> tags in <head> section <style type=“text/css”> h1 { color: red; } </style> ECA 228 Internet/Intranet Design I
CSS Internal Example <html><head> <title>CSS Example</title> <style type=“text/css”> h1 { color: red; } </style></head> <body> . . . ECA 228 Internet/Intranet Design I
Selectors • element type • to apply a rule to more than one element, separate them with a comma h1 { color: red; } h1, h2 { color: red; } <h1>This will be red></h1> <h2>So will this</h2> ECA 228 Internet/Intranet Design I
Selectors cont … • class • can be used more than once in HTML • case sensitive • prefixed with dot .redText { color: red; } <h1 class=“redText”>This will be red</h1> ECA 228 Internet/Intranet Design I
Selectors cont … • class cont … • can be used alone or contextually with elements h1.redText { color: red; } <h1 class=“redText”>This will be red</h1> <h2 class=“redText”>This will not</h2> ECA 228 Internet/Intranet Design I
Selectors cont … • id • unique identifier – can only be used once in HTML • prefixed with hash or pound sign # #redText { color: red; } <h1 id=“redText”>This will be red</h1> <h2 id=“redText”>This will be red</h2> ILLEGAL ECA 228 Internet/Intranet Design I
Selectors cont … • context • nested elements can be considered as parent/child • nested relationship is indicated without use of comma h1 em { color: red; } <h1>This word is <em>red</em></h1> ECA 228 Internet/Intranet Design I
Selectors cont … • context cont … • many properties are inherited • ie, if a property belongs to the parent, it also applies to the child #div1{ color: red; } <div id=“div1”> <h1>This is my header</h1> </div> ECA 228 Internet/Intranet Design I
Selectors cont … • context cont … • other properties, such as borders, are not inherited #border1{ border-style: double; border-width: thin; } <div id=“border1”> <h1>This is my header</h1> <p>This is my paragraph</p> </div> ECA 228 Internet/Intranet Design I
Selectors cont … • context cont … • classes or ids can be nested inside one another #contentArea .green{ color: green; } <div id=“contentArea”> <h1>This is <span class=“green”>green</span></h1> <p>This is <span class=“green”>green</span> </p> </div> ECA 228 Internet/Intranet Design I
Selectors cont … • pseudo-class • special type of class that allows formatting based on a state or condition • if a link has been visited or not • if the mouse passes over the link • when the link is clicked a:link{ color: blue; text-decoration: none; } a:visited{ color: pink; text-decoration: none; } a:hover{ color: purple; text-decoration: underline; } a:active{ color: red; text-decoration: underline; } ECA 228 Internet/Intranet Design I
Selectors cont … • pseudo-class • special type of class that allows formatting based on a state or condition • first letter of every paragraph • first line of every paragraph p:first-line{ font-size: 120%; } p:first-letter{ font-size: 150%; font-weight: bold; } ECA 228 Internet/Intranet Design I
Applying CSS • can be applied three ways:1. Internal 2. External 3. Inline • External • external stylesheet is a separate document • to apply the same stylesheet to more than one page of a website • provides consistent look • to modify look of site, make changes in one place ECA 228 Internet/Intranet Design I
Applying CSS • External cont … • no HTML in external stylesheet • no <style> tags in external stylesheet • save as text file, with .css extension • to apply external stylesheet to an HTML document, link the document from inside the <head> section <link rel=“stylesheet” type=“text/css” href=“myStyle.css” /> ECA 228 Internet/Intranet Design I
Applying CSS • External cont … • an HTML document can link to more than one external stylesheet at a time, as well as an internal sheet • if a conflict occurs, precedence is given to the rule defined last • URLs in an external stylesheet are relative to the location of the stylesheet, not the document linking to it ECA 228 Internet/Intranet Design I
Applying CSS • Inline • used to apply style locally • within an HTML tag use style as an attribute, the rule as the value • separate definitions with a semicolon <h1>This word is <span style=“color:red;”>red<span>.</h1> ECA 228 Internet/Intranet Design I
Comments • CSS comments /* This is a comment */ • using comments is a good way to debug a stylesheet which is not working • do not confuse /* */ with <! – – – – > ECA 228 Internet/Intranet Design I
Box Model margin OUR CONTENT border padding ECA 228 Internet/Intranet Design I