• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Pres
 

Pres

on

  • 245 views

 

Statistics

Views

Total Views
245
Views on SlideShare
245
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Font-family: serif;

Pres Pres Presentation Transcript

  • Building and Marketing Websites
  • Pay per Click Advertising
    Known as PPC
    Advertiser pay each time a user clicks on the advertiser's ad
    Cost per click (CPC) is amount the advertiser pays
  • <html>
    <head>
    <title>Simple Website</title>
    <style type=“text/css”>
    p { color: red; }
    </style>
    </head>
    <body>
    <h1>Welcome</h1>
    <p>This is a demonstration.</p>
    </body>
    </html>
  • Body elements
    <h1> … </h1>
    <p> … </p>
    <ol> … </ol>
    <ul> … </ul>
    <strong> … </strong>
    <em> … </em>
    <imgsrc=“…” />
    <!-- Comment -->
  • CSS
  • HTML describes the content in a Web page
    CSS describes how you want that content to look
  • HTML for Structure
    CSS for Presentation
  • Style sheet
    <head>
    <title>Simple Website</title>
    <style type=“text/css”>
    p { border:2px solid black; }
    </style>
    </head>
    Made up of one or more style instructions (called rules)
    Rules describe how an element or group of elements should be displayed.
  • Style sheet rules
  • Structure
  • Terms to describe structure
    Parent
    Child
    Sibling
  • Inheritance
    Elements pass down certain style properties to the elements they contain
  • Inheritance
    In general, properties related to the styling of text—font size, color, style, etc.—are passed down.
  • Overriding Inheritance
  • Conflicting styles
    Why does “em” style override “body” style?
    How does Browser choose which style to use?
  • Conflicting styles
    Specificity
    More specific the selector, the more weight it is given to override conflicting declarations
    Rule order
    “last-one-listed wins”
  • How do I style certain elements only?
    • Some paragraphs green
    • Some headings orange
  • Classes
    Used to classify elements into a conceptual group.
  • Classes
    Think of it like a club – someone starts a club and by joining you agree to all the rights and responsibilities of the club.
  • <html>
    <head>
    <title>Simple Website</title>
    </head>
    <body>
    <h1>Welcome</h1>
    <p class=“green”>This is a demonstration.</p>
    <p>Business as usual</p>
    </body>
    </html>
  • Class is an attribute
    <element attribute-name="value">Content</element>
    Just like “src” for image elements:
    <imgsrc=“peanut-butter.jpg” alt=“Sandwich” />
  • The CSS Rule
    Select <p> elements that belong to a certain class.
    Make them green.
    p.green{
    color: green;
    }
  • <html>
    <head>
    <title>Simple Website</title>
    <style type=“text/css”>
    p.green{ color: green; }
    </style>
    </head>
    <body>
    <h1>Welcome</h1>
    <p class=“green”>This is a demonstration.</p>
    <p>Business as usual</p>
    </body>
    </html>
  • I want my heading to be part of class!
    <body>
    <h1 class=“green”>Welcome</h1>
    <p class=“green”>This is a demonstration.</p>
    <p>Business as usual</p>
    </body>
  • How does the CSS rule change?
  • <html>
    <head>
    <title>Simple Website</title>
    <style type=“text/css”>
    p.green, h1.green { color: green; }
    </style>
    </head>
    <body>
    <h1>Welcome</h1>
    <p class=“green”>This is a demonstration.</p>
    <p>Business as usual</p>
    </body>
    </html>
  • If you want all elements that are in the green class to have a style, then you can just write your rule like this:
    .green{
    color: green;
    }
  • <html>
    <head>
    <title>Simple Website</title>
    <style type=“text/css”>
    .green { color: green; }
    </style>
    </head>
    <body>
    <h1>Welcome</h1>
    <p class=“green”>This is a demonstration.</p>
    <p>Business as usual</p>
    </body>
    </html>