1 / 21

ECA 228 Internet/Intranet Design I

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

kasen
Download Presentation

ECA 228 Internet/Intranet Design I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ECA 228 Internet/Intranet Design I Cascading Style Sheets

  2. CSS rules Declaration RULE h1 { color: red; } Selector Property Value ECA 228 Internet/Intranet Design I

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  21. Box Model margin OUR CONTENT border padding ECA 228 Internet/Intranet Design I

More Related