CSS – Cascading Style Sheets

Document Sample
CSS – Cascading Style Sheets Powered By Docstoc
					 CSS – Cascading Style
 Sheets

CIT150 – Introduction to Web Page
Development
Objectives

Introducing Cascading Style Sheets
 CSS was invented by the World Wide Web
  Consortium (W3C).
 CSS is an easy-to-use style language that lets
  you use familiar desktop publishing
  terminology to control the appearance of Web
  pages.
 You can use CSS to control typography,
  colors, backgrounds, and other design
  characteristics.
Cascading
 "Cascading" means that styles can fall (or
  cascade) from one style sheet to another,
  enabling multiple style sheets to be used on
  one HTML document.
 These could be, for instance, corporate style
  guidelines, styles common to a group of
  documents, and styles specific to a single
  document.
Browser Support for Cascading Style
Sheets
 The only drawback to working with CSS is the
  lack of support in older browsers.
 To enjoy all the benefits of Web pages created
  with CSS, the user needs a newer browser.
 Netscape users need version 6.0 or above;
  Internet Explorer users need version 5.0 or
  above.
     There are 3 levels to which Styles
     may be applied:
   Attribute (Inline) styles - the „closest‟ to the web page
    content. Adding styles to each individual tag within the
    HTML file.
   Embedded or internal styles - applied to the entire
    HTML file, allowing the Web author to modify the
    appearance on any tag in the document.
   Linked or external styles sheets – the „furthest‟ from the
    web page content. A text file containing style
    declaration. The Web author can create styles for any
    tag in the Web site whose HTML file is linked to the
    style sheet.
Attribute (Inline) Styles:
   You add the STYLE property to each HTML
    tag inside the BODY
<tag style=“attribute1: value1; attribute2: value2; ...”>

   The following HTML code colors a specific
    <p> tag:

    <p style="color: red;"> This line will be red </p>
    <p>This line will not be red. </p>
Attribute (Inline) Styles:
The style attribute is a HTML attribute and can
  be used with any HTML element.
 Only affects one instance of an element in a
  document.
 Use to override a style that was specified at a
  higher level in the document.
 Useful for testing styles during development.
Style Attribute (Inline) Code Sample:
<p style="font-weight: bold;">Use the style
 attribute to change the style of this
 paragraph with a CSS style rule.</p>

In the browser you will see:
Use the style attribute to change the style
of this paragraph with a CSS style rule.
Activity - Inline Styles
   Activity 1 - css_1.html
         style=“font-weight: bold;”

   Activity 2 - css_1.html
         style=“color: red;”

   Activity 3 - css_1.html
         style=“color: red; font-family: Comic Sans MS;”
     There are 3 levels to which Styles
     may be applied:
   Attribute (Inline) styles - the „closest‟ to the web page
    content. Adding styles to each individual tag within the
    HTML file.
   Embedded or internal styles - applied to the entire
    HTML file, allowing the Web author to modify the
    appearance on any tag in the document.
   Linked or external styles sheets – the „furthest‟ from the
    web page content. A text file containing style
    declaration. The Web author can create styles for any
    tag in the Web site whose HTML file is linked to the
    style sheet.
Understanding Style Rules:
 CSS syntax is designed to be easy to write and
  read.
 The main components of CSS syntax are
  <style> tags and their associated style rules.
 You write style rules that select an element and
  then declare style characteristics for the
  element.
Understanding Style Rules:
   The style rule is composed of two parts: a
    selector and a declaration
    h1 {color: red;}
 The selector determines the element to which
  the rule is applied
 The declaration specifies the exact property
  values to be applied to the element
Style Rule Syntax:


      h1 {color: red;}

Selector       Declaration
Understanding Style Rules:
 The declaration contains a property and a
  value       h1 {color: red;}
 The property is a quality or characteristic,
  such as color, font size, or margin, followed by
  a colon (:)
 The value is the precise specification of the
  property, such as blue for color, 12 pt (point)
  for font size, or 30 px (pixels) for margin,
  followed by a semicolon (;)
Property Declaration Syntax:


      h1 {color: red;}

        Property        Value
Understanding Style Sheets:
 A style sheet is a collection of style rules.
 The style rules you write are contained in a
  style sheet
 An external style sheet is a stand-alone
  document that is shared by a number of Web
  pages
 Alternately, your style sheet can be contained
  within a single Web page, controlling the
  styles for that page only
Using the <style> Element
   (Embedded or Internal Style):
    The <style> element is always contained in the
     <head> section of the document.
    Style rules are placed between <style> tags.
    <head>
       <title>Name of web page</title>
       <style type="text/css">
              body {font-family: Arial;}
              h1 {color: red;}
       </style>
    </head>
    Style rules contained in the <style> element only
     affect the document in which they reside.
Embedded or Internal Styles:
   Set the type attribute to text/css
   Applies to the entire XHTML page
        <head>
        <style type=“text/css”>
               h1, h2 {font-face: arial; color: gold; }
               h1{font-size: 3em;}
               h2{font-size: 1.5em;}
        </style>
        </head>
Activity - Internal Styles
   Activity 4 css_2.html
         <style type="text/css">
            h1 {color:red;}
         </style>

   Activity 5 css_2.html
         (think) add p {font-family: Comic Sans MS;}

   Activity 6 css_2.html
         add p {font-family: Comic Sans MS; font-weight: bold;}

   Activity 7 css_2.html
         (think) add body{text-align: center;}
     There are 3 levels to which Styles
     may be applied:
   Attribute (Inline) styles - the „closest‟ to the web page
    content. Adding styles to each individual tag within the
    HTML file.
   Embedded or internal styles - applied to the entire
    HTML file, allowing the Web author to modify the
    appearance on any tag in the document.
   Linked or external styles sheets – the „furthest‟ from the
    web page content. A text file containing style
    declaration. The Web author can create styles for any
    tag in the Web site whose HTML file is linked to the
    style sheet.
External Style Sheets:
 An external style sheet is a text document
  containing style rules
 You can create one external style sheet whose
  style rules affect all the pages on a Web site
 When you want to update a style, you only
  have to change the style rule once in the
  external style sheet
External Style Sheets:
   Many documents can link to ONE style sheet
   Stored in an external „text file‟
   Affects all files for which there is a <link> tag
   Usually used to maintain consistency across a entire
    Website. This allows for quick formatting changes.
<head>
   <link rel=“stylesheet” type =“text/css” href =“filename.css” />
</head>
   rel=relation_type (should be “stylesheet”)
   type=language used (should be “text/css”)
   href=url (location of .css file)
What is inside a Style File?
body { background: #ffff99; font color: blue;}
h1 { color: #33ff33; }
h2 {font-size: 22pt; color: green;}
p { color: #330000; font-family: Garamond, Serif; }
Activity: External Style Sheet
   Activity 8 save as css_3.css
       create an external style sheet
   Linking to an external style sheet:
<head>
  <title>Introduction to Style Sheets</title>
  <link rel = “stylesheet” href = “mystyle.css" type = "text/css“ / >
</head>
In CSS (Cascading Style Sheets)
How do styles Cascade?
   You can have Inline, Embedded, and External Style
    Rules affecting one Web Document…
   An inline style (attribute) has precedence over any
    embedded style and over any external style sheet.
   An embedded style has precedence over an external
    style sheet
   An external style sheet has precedence over the
    internal style rules set by the Web browser.
   NOTE: Precedence only becomes an issue when the
    styles are in conflict!
Activity:
   Activity 9 - save as css_3.html (css_3_9.html)
        link to an external style sheet
   Activity 10 - save as css_3.css (css_3_10.css)
        add to your external style sheet
   Activity 11 - css_3.html       (css_3_11.html)
        check your web page for changes.
CSS Measurement Units:
 CSS offers a variety of measurement
 units:
  Absolute units
  Relativeunits
  Percentages
Absolute Measurement Units:
 Specifies a fixed value. p {margin: 1.25in;}
 Try to avoid using absolute units on Web
  pages because it can‟t be scaled to the
  individual user‟s display type.
 Better suited for print.

 Absolute units:
                        pc - Pica (equal to 12 points)
    cm - Centimeters
                        pt - Points (72 points = 1 inch)
    in - Inches
    mm - Millimeters
Relative Measurement Units:
 Adapts to different display types and sizes.
  p {margin: 2 em;}
 Try to always use relative units on web pages.

 Relative units:
    em - Width of the capital M in the current font
    ex - Height of the letter x in the current font
       (less reliable unit of measurement than em)
    px - Size of a pixel on the current monitor
Relative Measurement Units:
 Percentage Measurement Units.
 Percentage values are always relative to
  another value.
  p {font-size: 150%;}
Activity
   Activity 12
    Open dropbox act4_css_4.html
     Save as css_4.html

     Change the CSS measurement units
     Use inline style attributes
    <p style=“font-size: 24px;”>Change…. </p>
CSS Comments:
   CSS allows comments within the <style> element or in
    an external style sheet
   Use comments to explain your code, which can help
    you when you edit the source code at a later date.
   A comment will be ignored by the browser.
   A CSS comment begins with "/*", and ends with "*/".

    /* This is a comment and will be ignored by the browser */
Example comment:
<head>
  <title>Name of web page</title>
      <style type="text/css">
      /* This is a comment */
      h1 {color: red;}
      h2 {color: blue;}
  </style>
</head>
CSS Font Properties
   The CCS font properties allow you to control
    the appearance of your text.
     font-family
     font-size
     line-height
Specifying Font-Families:
   You can specify generic font families:
       Serif - fonts with little strokes (serifs) that finish
        off the tops and bottom of the letters. Times
       Sans-serif - fonts have no serifs. Arial
       Monospace - fixed width font. Used to mimic
        typewritten text or programming code. Courier
       Cursive fonts resemble handwriting.
       Fantasy fonts are decorative.

    p {font-family: sans-serif;}
Specifying Font-Families:
   If you don‟t specify any font family, the
    browser displays the default font. Typically
    Times.
   You can specify specific font-families.
   The user must have the font installed on their
    computer.

    p {font-family: arial;}
Specifying Font-Families:
   You can specify a list of alternate fonts.

    p {font-family: arial, helvetica, sans-serif;}
Specifying Font Size:
   font-size controls the size of your type.
   You can specify length units: em, pt, or px
   You can specify percentage values based on
    the parent element‟s font size.

blockquote {font-family: arial; font-size: 14pt;}
blockquote {font-family: arial; font-size: 150%;}

body {font-family: arial; font-size: 12pt;}
Specifying Line Height:
   Line height is the space between lines.
   Line height is also called “Leading”.
   You can specify either a length or percentage
    value for the line height.

    p {line-height: 150%;}
    p {line-height: 2em;}
    p {line-height: 24pt;}
                                      Line Height
Other font properties:
   p {font-style: italic;}
       options: normal, italic, oblique
   p {font-weight: bold;}
       options: normal, bold, bolder, lighter, 100 to 900
   p {font-variant: small-caps;}
       options: normal, small-caps
   Set all of the properties for a font in one declaration:
    p {font: italic small-caps 900 12px Arial}

   http://www.w3schools.com/css/css_font.asp
Activity:
   Activity 13 Open act5_css5.html

      Use Inline style Attributes
      Change many different font properties.
Text properties:
   p {color; red;} or p {color: #ff0000;}
       options: color or #hex
   h1 {text-align: center}
       options: center, left, right
   p {text-indent: 1.5em}
       options: length or %
   p {text-transform: uppercase}
       options: none, capitalize, uppercase, lowercase
   http://www.w3schools.com/css/css_text.asp
Activity:
   Activity 14 - Changing text properties
    Save as css_5.html

      Use Inline style Attributes
      Change many different text properties.
Background properties:
   Setting the background color:
       body {background-color: yellow}
       h1 {background-color: #00ff00}
       h2 {background-color: transparent}
       p {background-color: rgb(250,0,255)}




   http://www.w3schools.com/css/css_background.asp
Displaying a background image:
    body {background-image: url(“bgdesert.jpg”)}




    Actual
    Image




       Note: The image is “tiled” (repeated) on the screen.
Displaying a background image:
   body {
       background-image: url(“bgdesert.jpg”);
       background-repeat: repeat-y;
    }
     Options: repeat, repeat-x, repeat-y, no-repeat
Displaying a background image:
   body {
       background-image: url(“bgdesert.jpg”);
       background-attachment: fixed;
    }
     Options: scroll, fixed
Activity: Background images
   Activity 15 Add a background image
    Open act6_css_6.html Save as css_6.html
         Use Inline style Attributes
        look at image bgdesert.jpg in browser
         add background-image property. Notice tiling.

   Activity 16 Adjust the Background Image Repeat property
     Save as css_6.html
       Use Inline style Attributes
       add background-repeat: repeat-y;

   Activity 17 Background Image Repeat property
    Save as css_6.html
       Use Inline style Attributes
       add background-attachment: fixed;
Basic Selection Techniques:
 Using type selectors
     h1 {color: red;}
 Grouping selectors
     h1, h3 {color: blue;}
 Combining declarations
       p {color: blue; font-size: 2em;}
   Using descendant selectors
       ul li b {color: blue;}
Using Type Selectors:
A  type selector applies the rule to every
 instance of the element in the document,
 as shown in the following rules:
     body {color: gray;}
     H2 {color: red;}
     p {font-size: 10pt;}
Grouping Selectors
   To make your style rules more concise, you
    can group type selectors for which the same
    rules apply:
       h1, h3 {color: red;}

   Notice the comma between selectors.
   Same as:
        h1 {color: red;}
        h3 {color: red;}
Activity:
   Activity 18 Grouping Selectors
Using Descendant Selectors:
 Descendant  selectors let you select
  elements that are the descendants of other
  elements.
 The following rule selects only <b>
  elements that are contained within <p>
  elements:
   p b {color: blue;}
Activity:
 Activity 19 Using Descendant Selectors
 20 – Using Descendant Selector
Advanced Selection Techniques:
 Using the class selector
 Using the id selector

 Working with the <div> element

 Working with the <span> element
Creating custom style rules using the
Class selector:
 The class selector lets you write a style rule,
  assign it a name, and then apply that name to
  any elements you choose.
 The period at the beginning of the class
  selector is called a flag character.
 The name following the period is the class
  selector.
     .quote {color: red;}
 Class Selector Syntax:
      .quote {color: red;}

Flag Character
                    Declaration

            Class Name
Choosing class names
 Itis better to choose class names
  according to their purpose rather than a
  name that describes their color or style.
   danger would be better than red
   quote would be better than indent
   heading would be better than big
Example of creating a style rule using
a class selector

<head>
  <title>Name of web page</title>
  <style type="text/css">
       .quote {color: red; margin: 30px;}
  </style>
</head>
Applying a style rule using a class
selector:
 To apply the style rule to an element, you
 add the class attribute to the element and
 set it to the name you have specified.
                     <style type="text/css">
                            .quote {color: red; margin: 30px;}
                     </style>

 <body>
    <p class=“quote">Ask not what…</p>
 </body>
Activity:
 21 – Using class selectors
 22 Add two more internal style rules by adding
  class selectors.
 Making Class Selectors more specific:
 Gives better control over how styles are applied.
 This will not let someone apply a style to an element
  it was not intended for.
 When you define the class include a prefix indicating
  the element to which you want it applied.
     h1.topic1 {
          color: red;
          font-family: Arial;
     }
Making Class Selectors more specific:
   The class is defined:
       h1.topic1{
               color: red;
               font-family: Arial;
       }
   To apply the style rule you use the class attribute.

    <body>
       <h1 class= "topic1">Milton</h1>
       <p class= "topic1">This would not
       apply the style to this text.</p>
    </body>
Activity:
 23 – Create a specific class selector
  h1.heading_red and apply it.
 24 - Try applying rule to h2 tag.
The id selector:
   The id selector is similar to the class selector, but it
    uses a # sign instead of a period.
   The difference between an ID and a class is that an ID
    can only be applied to a single element within a
    document, whereas a class can be applied as many
    times as needed.
   Style rule:
        #control {color: blue}
   You are not allowed to do this:
       <p id="control"> water </p>
       <em id="control"> chemicals </em>
Should you use id or class?
 If you need to use the same specific selector
  more than once, classes are a better choice.
 An id selector should be used when you have
  information that is unique in the document and
  will only be used once.
Using the id selector:
   With the id selector you define a style as
    shown below:
       #heading {color: green}

   You apply the rule as shown below:
    <h1 id=“heading">Sample text</h1>
Activity:
 25 – Create an id selector called special_color
  and apply it.
 26 – Create an internal style rule called credits
Making id selectors more specific:
   The style rule below will match a p element that has an
    id with a value of "par2":

    p#par2{
       text-align: center;
       color: red;
    }
   The style rule above will match only the p element:
       <p id=“par2">Some text</p>
       <h1 id=“par2">Some text</h1>
Activity:
   27 – Create a specific id selector
    h2#heading_cap and apply it.
The Box Model:
   To understand positioning in CSS you must
    first understand the box model. Every element
    in a document is considered to be a
    rectangular box which has a content area
    surrounded by padding, a border and margins.
The Box Model:
   This illustration shows you how the model looks:




   The margin in this example has a dotted line, the border is in
    black and the padding is represented by the red color.
The Box Model:
   Margins are always transparent.
   Borders can have various styles.
   Background settings for an element apply to the area
    just inside the borders which includes both the
    padding and content areas.
   Margins, borders and padding are all optional but
    they are given a default width of zero if not specified
    for calculating positions and sizes.
   You can set different widths for each individual side
    (top, right, bottom and left). Margins can even have
    negative values.
Types of Borders:
   None               3D styles do not look
   Dotted              the same on a white
   Dashed              background.
   Solid
                       Borders do not look the
   Double              same in different
   Groove - 3D         browsers.
   Ridge - 3D
   Inset - 3D         Border-width options:
   Outset - 3D         thin, medium, thick
Working with CCS Box models:
                 <style type=“text/css”>
                    p{
                        margin: 2 em;
                        padding: 1.5 em;
                        border-style:
                        double;
                        border-width: .5 em;
                        border-color: green;
                        background:
                        yellow;
                      }
                    </style
Activity:
 28 Work with the box model – margin
 29 Create a style selector for the h1 tag to
  apply a border
 30 Create a box around the <h2> element
Using the <div> and <span> elements
 DIV stands for DIVision of "area".
 SPAN stands for “SPAN of words”.

 The <div> and <span> let you specify logical
  divisions within a document that have their
  own class or id name and style properties.
 Table   cells stretch to fit the content
    placed inside them, but DIVs may not!
Using the <div> and <span> elements
 The difference between <div> and <span> is
  their element display type
 <div> is a block-level element

 <span> is its inline equivalent
<div> tag properties:
   Position: Defines how the <div> tag will be
    positioned:
       Relative means that the <div> tag will flow like
        any other HTML tag, whereas
       Absolute means the div element will be
        positioned at specific coordinates.
<div> tag properties:
   Top: This is the number of pixels your div element
    will be positioned horizontally from the top of the
    page.
   Left: This is the number of pixels that your div
    element will be positioned vertically from the left of
    your page.
   Width: This is the width (px) of your div element.
   Height: This is the height (px) of your div element.
<div> tag properties:
 Padding: This is the margin of your div
  element in pixels.
 Border: You can set the style, width, and
  color of the border surrounding your div
  element.
 Color: The color of the text inside the div
  element.
 Background-color: The color of the
  background.
Using the <div> tag:
The “Chapter 1:” text is positioned between the div tags.
Using the <div> tag:
<style type="text/css">
.title_block {
      background-color: yellow;
      padding:20px;
       margin: 20px;
      left:10px;
      top:50px;
      border:solid;
      border-color:black;
      float: left;
   }
</style>                          …
                                  <div class="title_block">
                                     <p style="font-size:2em;"> Chapter 1:</p>
                                  </div>
<div> tag properties
position: absolute;
left: 50px; top: 100px; width: 200px; height: 100px;
visiblity: visible;
z-index: 1;
background-color:#FF0000;
layer-background-color:#FF0000;
background-image:URL(filename.gif);
layer-background-image:URL(filename.gif);
Using the <div> element:
                             <style type="text/css">
   Define the style rule:
                                .menu {
                                    background-color: yellow;
                                    padding:10px;
                                    left:10px;
                                    top:50px;
                                    width:75px;
                                    border:solid;
                                    border-color:black;
                                    float:left;
                                }
                             </style>
                                   .menu {
                                       background-color: yellow;
 Applying the <div> tag                padding:10px;
                                       left:10px;
                                       top:50px;
                                       width:75px;
                                       border:solid;
                                       border-color:black;
                                       float:left;
                                   }
<div class="menu">
  <p>
      <a href=“??.com">Home</a><br />
      <a href=“??.com">Links</a><br />
      <a href=“??.com">Pictures</a><br />
      <a href="??.com">Homework</a>
  </p>
</div>
Using <div> tag to define areas of page:
   If you use the <div> tag combined with CSS, you
    will create a page that is easy to manage and
    manipulate later.
   Using the <div> tag allows you to define the page in
    terms of the logical divisions of the page,
   Most Web pages have fairly standard content
    chunks, and if you use the <div> tag to divide them,
    you'll be ready to style them however you'd like.
Using <div> tag to define areas of page:
   header: defining the top banner and possibly navigation of the
    page
    <div id="header">...</div>
   navigation: defining the navigation of the page
    <div id="navigation">...</div>
   left sidebar: defining a sidebar on the left
    <div id="leftside">...</div>
   right sidebar: defining a sidebar on the right
    <div id="rightside">...</div>
   body: defining the main portion of the page
    <div id="body">...</div>
   footer: defining the footer and possibly sub-navigation of the
    page
    <div id="footer">...</div>
Activity:
   31 Work with the div tag
   32 Change the properties of the div tag class selector
    rules.
   33 Create an id selector called box 1 and apply it to
    document.
   34 Create an id selector called box 2 and apply it to
    document.
   35 Create an id selector called box 2 and apply it to
    document.
   36 Create an id selector called box 3 and apply it to
    document.
Using the <span> element:
<style type=“text/css”>
  span.red_text {color: red;}
</style>
…
<p>This is a <span class=“red_text">super
  example </span>of using the span element to
  change the color of a few words in a Web
  document.</p>
Using the <span> element:
<style type=“text/css”>
  span.cap-g { float: left; font-size: 1.7em; padding: 0
   0.15em; margin: 0 0.15em 0 0; background: #90ee90;
   border: 3px outset #2e8b57; }
</style>
…
<p><span class="cap-g">T</span>his is a great example
   of using the span element.</p>
Activity:
   37 Using the <span> tag
Pseudo Classes or Elements:
   CSS pseudo-elements are used to add special
    effects to some selectors.
   Syntax of pseudo-elements:
    selector: pseudo-element {property: value}
Anchor Pseudo-classes:
   a:link {color: #ff00ff;} /* unvisited link */
   a:visited {color: #00ff00;} /* visited link */
   a:hover {color: #ff00ff;} /* mouse over link */
   a:active {color: #0000ff;} /* selected link */

       hover must come after a:link and a:visited
        and active must come after hover to be effective.

       The least significant style should be written first, and
        the most significant style written last.
Activity:
Working with Pseudo Classes
 38 – a:link

 38 continued – visited, hover, active
First-line Pseudo-element:
   The first-line pseudo-element is used to add special
    styles to the first line of text in a selector.
   p {font-size: 12pt;}
    p:first-line {color: green; font-variant: small-caps;}
First-letter Pseudo-element:
    The first-letter pseudo-element is used to add special
     styles to the first letter of text in a selector.
     p {font-size: 12pt;}
     p:first-letter {color: red; font-family: diploma; font-size:
         200%; float: left; margin-right: .1em;}




The Float property is used most often to float images thus allowing text wrap. While
the float property is invaluable in this application, it can also be used to float a single
letter.
Activity:
Working with Pseudo Classes
 39 – p:first-line

 40 – p: first-letter
Restricting the application of
Pseudo-classes: (Using a class selector)
   You can be more restrictive where pseudo-classes are
    applied.
    <style type=“text/css”>
        p {font-size: 12pt;}
        p.fancy:first-letter {color: red; font-family: diploma; font-size:
            200%; float: left; margin-right: .1em;}
</style>
    <p class=“fancy”>This text is written for experimentation… </p>
Activity:
 41 – p.fancy:first-letter
 42 – neat effect
Summary
 CSS is a style language that lets you gain
  visual control over the display of your Web
  content
 CSS was poorly supported by browsers at first,
  but now it is becoming widely supported
 A style sheet is a collection of style rules
Summary
   A style rule defines style characteristics for an
    HTML element
       It consists of a selector and a declaration
          The   declaration consists of a property and a value
   You can combine CSS style rules with your
    HTML documents in three different ways –
    with the style attribute, or with internal or
    external style sheets
Questions?