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

Intro to CSS


  • pg 1
									Some Web design
     Poynter Eyetrack 07
   Online readers read both short and long
    stories more completely than print
   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
   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
       Limit unnecessary imagery, but use
        one good visual focal point
Intro to CSS
I swear it’s easier than it
           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
   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
   Use on a rare occasion to override a
   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.
<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}
    Why/why not to use embedded

   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
       Anatomy of a CSS
selector {declaration;}


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
   If you’re laying out a page for a news
    story, you might create a class called
   Classes are used throughout the
   IDs are only used once in the entire
    document. An example would be an ID
    called “footer.”
Defining classes and
   To write a class, you name the class
    with a .
.headline {font-family:Helvetica, sans-serif;

   To write an ID, you name the class with
#footer {font-family:Helvetica, sans-serif;
      Applying classes in
   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
<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