What is CSS

Document Sample
What is CSS Powered By Docstoc
					LESSON 9-1: INTRODUCTION TO CASCADING STYLE SHEET
What is CSS?
   CSS, or Cascading Style Sheet, is a language that defines the presentation aspect of your HTML document.
   HTML is the content; CSS is the presentation of that document.
   The main purpose of CSS is the separation between content and presentation.

Component of a CSS Code

                                                         Declaration
                    Selector


                    body { background-color: white; }

                                                   Property                        Value

Adding CSS to HTML Documents
    Inline styles
          Constructed where CSS codes are attached to the element at hand.
          It is the most specific of all because it applies to exactly one element where the CSS codes are attached.
    Example:
  <h2 style=”color: blue”>Hello World</h2>

  <p style=”background-color: yellow; color: blue;”>Our fresh pizzas and hearty
  pasta dishes are sure to please. And don’t forget about our daily chalkboard
  specials!</p>

      Embedded styles
           Sometimes called internal style, are constructed by placing the CSS codes within the head element of
             your HTML document.
           Embedded style sheet is contained within the style element.
           This style sheet applies only to the page in which they are placed.
      Example:
   <html>
    <head>
     <title>Hello World</title>
     <style type=”text/css”>
      body {
        background-color: blue;
        color: yellow;
      }

      p {
         border: 4px solid red;
         background-color: yellow;
         font-size: 24px;
         color: blue;
      }
     </style>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
   </html>
   External styles
        A collection of CSS codes that is placed in a document of its own with a .css file extension.
        The CSS file is linked to the Web pages via the <link /> element placed in the head section of your
           HTML document.
   Example:
        The following are the CSS codes inside the file styles.css

            body {
               background-color: blue;
               background-image: url(bg.gif);
               color: white;
               text-align: justify;
            }

            h2 {
               color: red;
               font-variant: small-caps;
               text-align: center;
               text-decoration: underline;
            }

            p {
               color: white;
               text-align: justify;
            }

          The following is the HTML code that establishes a link to an external style sheet via a link tag in the
           document’s head section.

           <html>
              <head>
                 <title>Spaghetti: Our Menu</title>
                 <link rel=”stylesheet” type=”text/css" href=”styles.css” />
              </head>
              <body>
                 <h2>Good eats for hungry geeks</h2>
                 <p>Our fresh pizzas and hearty pasta dishes are sure to please.
                  And don’t forget about our daily chalkboard specials!</p>
              </body>
           </html>
SEATWORK 4-2                                          1 WHOLE WHITE PAPER; OBSERVE PROPER HEADING

  A. Instructions: Given the following HTML code (with Inline CSS), identify and list down in its respective column all
     selectors containing CSS code, CSS property and value. The first one has been done to serve as an example.

  <html>
   <head>
    <title>My First CSS Document</title>
   <body style=”background-color: white; background-image: url(bgPic.png);
    color: blue; margin: 10px; padding: 10px; text-align: left;”>
      <h1 style=”color: orange; font-family: impact, tahoma, verdana,
       sans-serif;”>Stylesheets: The Tool of the Web Design Gods</h1>
      <p style=”background-color: yellow; font-family: courier;
       border: 1px solid red;”>Amaze your friends! Squash your enemies!</p>
      <h4 style=”text-decoration: overline; text-transform: uppercase;
      font-style: italic; font-weight: normal; text-align: center;>CSS, or
      Cascading Style Sheet is a language that defines the style and layout
      of your document.</h4>
   </body>
  </html>

                  Selector                   Property                              Value

             1.    body         background-color                      white
                                background-image                      url(bgPic.png)
                                color                                 blue
                                margin                                10px
                                padding                               10px
                                text-align                            left


             2.




             3.




             4.




  B. Instructions: Write down the CSS code that will accomplish each of the given items below.

          1. Insert the following CSS code in the paragraph element of an HTML document using inline style.

              margin-left: 25px;
              margin-right: 25px;
              padding: 20px;
              border: 4px dashed teal;
       2. Using embedded style, insert the given code below in an HTML document. Provide your own title and
          content for the document.

           body {
             font-size: 12pt;
             font-family: Book Antiqua;
             color: maroon;
             margin-left: 10pt;
             margin-right: 10pt;
             background-image: url(parchment.gif);
           }

           h1 {
             font: 24pt Prose Antique, Lucida Handwriting;
             font-weight: bold;
             line-height: 30pt;
           }

           h2 {
             font: 18pt Prose Antique, Lucida Handwriting;
             font-weight: bold;
             line-height: 22pt;
           }

       3. Write down the correct code to insert the style sheet named main-design.css to an HTML
          document as external style.

C. Instructions: Write down the HTML code that will display the page content below. The HTML code should
   include the CSS (embedded style) indicated at the bottom-part of this document.

   Document Title: TechNews – Your One Stop Source for the Latest Technology News
                                                                                         Should be placed inside
                                                                                         Level 1 Heading
   Page Content:

   Microsoft To Cut Time Holds Internet Search Data
   Software giant Microsoft said it would slash by 2/3 the time it holds Internet users’ personal data gathered from
   search queries. The US giant called on market leader Google to do likewise during a Brussels press conference.


   Formatting Specifications:
                                                                                    Should be placed inside
   Body:                                                                            Paragraph Element
           margin is 20px;
           padding is 25px;
           text color is teal;
           background image uses bg-design.png
           background color is white;


   Level 1 Heading:                             Paragraph Element:
          font color is green;                        text alignment is justify;
          text alignment is right;                    background color is yellow;
          text decoration is underline;               border is 2px solid lime;
          text variant is small-caps;

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:9/16/2012
language:English
pages:4