; Intro to CSS
Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Intro to CSS

VIEWS: 5 PAGES: 17

  • pg 1
									Some Web design
         basics
     Poynter Eyetrack 07
          findings:
   Online readers read both short and long
    stories more completely than print
    readers
   Online readers read an average of 77%
    of stories they chose to read
   Online readers are an even split of
    methodical and scanner readers
   Online readers see navigation bars and
    teasers than headlines/ads
   88% of the eye stops on graphics went
    to maps, including weather and traffic.
       What got looked at
            online:
   Story list: 35%
   Teasers/directionals: 27%
   Ads: 18%
   Blogs: 4%
   Photo galleries: 3%
   Podcasts: 1%
Major design lessons
   Give your readers:
       Easy-to-scan text
       Easy-to-find navigation/consistent
        navigation
       Limit unnecessary imagery, but use
        one good visual focal point
Intro to CSS
I swear it’s easier than it
          looks.
           What is CSS?
   Cascading Style Sheets
   Use for formatting HTML pages. We
    can write CSS rules and apply to large
    swaths of text.
   Advantages of CSS:
       Faster to update
       Lighter code, loads faster
       More control than <font> tags
3 ways to style your
     document
   Inline styles
       Added to a tag using the XHTML
        style attribute:
    <p>This paragraph simply takes on the browser’s
      default paragraph style.</p>

    <p style=“font-size: 25pt; font-weight:bold;
      font-style italic; color:red;”>By adding inline
      CSS styling to this paragraph, we can override
      the default styles.</p>
    Why/why not to use
       inline styles
   Inline styles are not that different than
    putting presentational markup in your
    document.
   Use on a rare occasion to override a
    style.
   Use as a way to try out a style before
    moving to a style sheet.
      Embedded styles
   These can go in the head of your
    XHTML file.
<head>
<title>Exbedded styles example</title>
<meta http-equiv=“Content-type” content=“text/html;
   charset=iso-8859-1” />
meta http-equiv=“Conent-Language” content=“en-us” />

<style type=“text/css”>
H1 {font-size: 16px}
P {color:blue}
</style>
</head>
    Why/why not to use embedded
              styles


   The styles embedded in an HTML page
    affect only that page
   This technique works if you are only
    publishing a single page
   Page styles override style sheet styles,
    lose out to inline styles
           Linked style
   You place styles in a separate document
    (.css file) that links to multiple pages
    and has a site-wide scope.
<link href=“my_style_sheet.css” media=“screen”
rel=“stylesheet” type=“text/css” />

   If you use one .css file for an entire
    Web site, you can make changes in one
    location instead of across hundreds of
    pages.
       Anatomy of a CSS
             rule
selector {declaration;}

                    {property:value;}

p {color:red;}



You   can combine multiple selectors.
h1 {color:blue; font-weight:bold;}

h2 {color:blue; font-weight:bold;}

h3 {color:blue; font-weight:bold;}



h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}

You  can target tags within the document structure. The example below
targets em text only inside paragraphs. You could do the same with em
text in list tags or something if necessary.
p em {color: green}

       Classes andof IDs
    Classes and IDs are ways writing
    specific paragraph styles for your
    document.
   If you’re laying out a page for a news
    story, you might create a class called
    “byline.”
   Classes are used throughout the
    document.
   IDs are only used once in the entire
    document. An example would be an ID
    called “footer.”
Defining classes and
        IDs
   To write a class, you name the class
    with a .
.headline {font-family:Helvetica, sans-serif;
   color:#666666;}

   To write an ID, you name the class with
    a#
#footer {font-family:Helvetica, sans-serif;
   color:#666666;}
      Applying classes in
            HTML
   To apply a class, you use either the
    <div> tag or the <span> tag.
   The <div> tag surrounds a block of
    elements. It creates a character return
    when inserted.
<div class=“headline”>This is how you might apply a
   specialized headline style to something.</div>
          The span tag
   The <span> tag is an inline element. It
    does not create an spaces in text. You
    could use it inside a div to stylize more
    text.
<div class=“bodycopy”>Let’s say you have a long story
   and you’re adding a special emphasis to a pull-out
   quote or something. You’ve already created body
   copy, which sets the size, color and font of your
   text. You need the quote to be italicized,
   slightly bolded and grey instead of black. <span
   class=“pullquote”>This is the quote.</span></div>

								
To top
;