eca 228 internet intranet design i n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
ECA 228 Internet/Intranet Design I PowerPoint Presentation
Download Presentation
ECA 228 Internet/Intranet Design I

Loading in 2 Seconds...

play fullscreen
1 / 21

ECA 228 Internet/Intranet Design I - PowerPoint PPT Presentation


  • 104 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'ECA 228 Internet/Intranet Design I' - kasen


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
css rules
CSS rules

Declaration

RULE

h1 { color: red; }

Selector

Property

Value

ECA 228 Internet/Intranet Design I

css rules cont
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
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
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
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
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 cont1
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 cont2
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 cont3
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 cont4
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 cont5
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 cont6
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 cont7
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 cont8
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 css1
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 css2
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 css3
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 css4
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
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
Box Model

margin

OUR CONTENT

border

padding

ECA 228 Internet/Intranet Design I