Intro to CSS by gegeshandong


									IT 130 – Internet and the Web

    Cascading Style Sheets
            Part 1

      HTML for Document Markup
HTML was originally designed so that the tags define only the
  content of a document (headings, lists, titles, etc) – as
  opposed to the formatting (e.g. bolding, italics, colors, etc).

Any formatting that might occur was supposed to be decided
  by the user’s computer and not by the creator of the web

      HTML for Document Markup
The idea was that different computers would use different
  formatting depending on their resolution, available fonts,
  available colors, and so on.

This was fine when the documents were only read by scientists
  doing research work and nobody was thinking about HTML as
  being used in the elaborate ways that we see today.

             HTML for Web Pages
When the World Wide Web was invented in the early 1990s,
 HTML was used for web pages.

The creators of web pages, especially commercial web pages,
  wanted more control over the formatting of their pages (again:
  colors, fonts, etc).
They also wanted to ensure that their web pages looked the same
  on all browsers.

For this reason, formatting tags were introduced in HTML. But
  many were still unsatisfied with the combination of content
  and formatting.

           Cascading Style Sheets
The W3 Consortium (, the same organization that
  develops the standards for HTML and XHTML, introduced
  Cascading Style Sheets in the mid-1990s.

 CSS is a new way of formatting web pages.
 CSS is designed to augment HTML, not replace it.
 CSS provides several tools not available with standard HTML.

        Separating Content and Style
The idea behind style sheets is to make a distinction between the content of a
   web page and the style/formatting of a page.
Doing so allows for:
    – Consistent design (e.g. changing a style definition in a “style sheet”
       can change every page on your web site!)
    – More flexibility
    – Less work to maintain large web sites

Like HTML, style sheets are written in a language with certain rules. This
    language is Cascading Style Sheets, or CSS for short.

          Components of a CSS Style
The three parts to a CSS style: selector, property, and value.

• The selector is the HTML tag you are formatting (e.g. H1),
• The property is the attribute you want to change (e.g. font, color).
• Each property is set to a value.

Every property (i.e. attribute) and its value are separated by a colon (:).
         Recall that we previously assigned attribute/value pairs by using the equals sign.
           However this syntax is not correct (does not work) in CSS.

If you include multiple groups of property/value pairs, each group must be
    separated by semicolons (;).

            Property / Value Pairs
Example of property / value pairs separated by semicolons:

  color : blue

Compare how you set a style with HTML syntax v.s. CSS syntax:
   – HTML syntax: color=“blue”  deprecated
   – CSS syntax: style=“color:blue”

       Three ways of creating a style:
                              Inline, Internal, External
Inline style
     – An inline style is applied to a single tag or section of the current HTML file.
     – Inline style declarations are placed inside the tag.
     – <h1 style="font-size: 200%; font-style: italic">

Internal style sheet (also called embedded style sheet)  discussed later
     – An internal style is applied to the entire current HTML file but is not applied to
       other files on the web site.
     – Internal style declarations are placed in the header of the HTML file.

External style sheet (also called linked style sheet)  discussed later
     – An external style is applied to the entire HTML file and may be applied to any
       or all pages on the web site.
     – External style declarations are written in a separate text file which is then
       linked to the HTML file.
     – External style sheets make it easy to give a consistent look to any number of
       web pages.

                        Inline Style
The style declaration is an attribute in the opening tag of a

For example

  <h1 style="font-size:200%; font-style:italic">

Every opening tag with a style attribute has its usual closing tag.
Closing tags never have a style attribute.

             Inline Style Examples
The style <body style="color:blue">
  body is the selector, color is the property, and blue is the

In the style <body style="background-color:silver">
   body is the selector, background-color is the property, and
   silver is the value.

These tags have their usual </body> closing tags.

             Inline Style Examples
In the style <p style="font-family:Arial; font-weight:bold">
   p is the selector, font-family and font-weight are the
   properties, and Arial and bold are the values.

In the style <p style="font-size:300%; color:red">
   p is the selector, font-size and color are the properties, and
   300% and red are the values.

These tags have their usual </p> closing tags.

  <h3>This is plain h3</h3>
  <h3 style="font-family:Arial, Times;
             font-style:italic; color:green">
  This is h3 in Arial, italic, green

           This is plain h3
           This is h3 in Arial, italic, and green

           ** span, div, and p Tags
The previous styles show you how to change the default style of a tag.

What if you want to apply a style to just a section of text (one word, a few
  words, a sentence, a paragraph)?

You can use the span or div or p tags, and then apply a style(s):

   <span style="font-style:italic"> Hey! </span>

   <div style="color:blue"> Good night… </div>

                          span / div / p
span tags are usually used to format text that is not surrounded
  by a tag, such as a single word or words inside a paragraph.

p tags are typically used to format individual paragraphs
   Every paragraph of content should typically be surrounded by
   a ‘p’ tag.

div tags are usually used to format even larger segments of a
  web page, such as a table of contents.
   – The div tag is used not only for styling, but also to organize your page into
     sections. This will become very important later on.
   – A <div> tag can enclose several paragraphs, but it would be very unlikely to
     have a <div> inside a paragraph.

          Example of the <span> tag
This sentence has one word in
<span style="color:#0000FF;"> blue </span>
and the rest in standard text color. <span
style="color:#00DD45;">This sentence is in

<p style="font-style:italic; font-size:200%">Note
  how unlike tags such as ‘h’ ‘p’ or ‘div’, the
  ‘span’ tag doesn’t apply extra formatting such as
  new lines. </p>


  * Use your p tag for paragraphs
• For reasons that will become evident shortly,
  it’s a good idea to place every paragraph of
  content in between <p> and </p> tags.

                    div tag
• This tag is more organizational than anything.
  It is typically used to divide your page into
  meaningful sections
  – Header (e.g. logo + Company Name)
  – Tagline (e.g. company slogan)
  – Navigation (e.g. table of contents)
  – Footer (e.g. contact information)
             div Tag Continued
• So, the div tag is used to help divide your page
  into sections.
• In other words, even inside the <body> area, it
  will be a good idea to organize your web page
  into sections.
• It is possible (and common) to have several
  tags (p, a, h, etc) inside a given div section.
  – However, the opposite does not apply: you will
    not typically include a div tag inside other tags
 Use an ‘id’ attribute with div tags
• We will discuss the use of the ‘id’ attribute in
  more detail later. For now, simply get in the
  habit of including this attribute with every div
• An ‘id’ attribute must be unique to each tag.
  That is, no two tags in a web document may
  have the same id values.
• Choose id values carefully. Be sure they
  describe the purpose of that div section.
                                Template using ‘div’
   <div id="header">
         <h1>Turtles Are Us</h1>

   <div id="tagline">
      For all your terrapine needs.

   <div id="main_content">
     Thank you for visiting our site. We hope that you will find everything that…..

   <div id="footer">
     <a href=“contact.htm”>Contact Us</a> | FAQ | Shipping | Returns
                         Colors in CSS
There are four ways to specify a color in HTML and CSS:

•   Hexadecimal form: body {color: #008080}
•   RGB color values: body {color: rgb(0,128,128) }
•   RGB color percentages: body {color: rgb(0%,50%,50%) }
•   Name code: body {color: teal }

Most people use hexadecimal, and that is what we will use in
 this course.
    Sometimes during testing, I will use the ‘name code’, but when making a
    “professional” page, I use Hex codes. You should use Hex for your

     Colors: Names, RGB, and Hex values

  This is only a very small sampling of the colors available to you. Google
  ‘html color swatch’ to get a sense of what else is available.

One example:            23

To top