CSS Tutorial by yaoyufang


									                   CSS Tutorial

• Cascading Style Sheets (CSS) are the modern
  standard for website presentation.
• When combined with a structural markup language
  like HTML, CSS provide Internet browsers with the
  information that enables them to present all the visual
  aspects of a web document.
• CSS apply things like borders, spacing between
  paragraphs, headings or images, control of font faces
  or font colors, background color and images, textual
  effects like underlined or strike-through text,

CSS Tutorial               tMyn                         1
  layering, positioning, and a number of other
  presentational effects.
• CSS controls the presentational aspects of a web
  page’s design, whereas HTML control the structure of
  a web page, which means little more than
  determining that certain text is a heading, other text is
  a paragraph, still other text is a list of hyperlinks, and
  so on.
• By using modern standards like CSS, you can reduce
  the cost of building and maintaining a website when
  compared to legacy HTML-only pages.

CSS Tutorial                tMyn                           2
• Let us consider the big picture first:

    1. You type a www address into your browser
    2. Browser contacts the HTTP server at that address
    3. HTTP server receives the request from the
    4. HTTP server looks up the web document
    5. HTTP server sends the web document
    6. Your browser receives the document
    7. Your browser processes the source code
    8. The browser displays the web page requested

CSS Tutorial                tMyn                          3
• Look at step 7: If that server has sent an HTML
  document, your PC reads the source code of that
  document and processes it into a displayable web
• This is where CSS enters the picture. If CSS is
  present in the document, the CSS describes what the
  HTML page should look like to the browser.
• If the browser understands the CSS, it processes the
  web page into something you can see and interact
• If the browser only understands some of the CSS, it
  generally ignores what it doesn’t understand.

CSS Tutorial             tMyn                        4
• If the browser doesn’t understand CSS at all, it
  usually displays a plain-looking version of the HTML
• During the time that CSS was being planned,
  browsers began allowing HTML features that control
  presentation of a document into the browser. This
  change is the primary reason for much of the bloated
  and chaotic source code in the majority of websites
  operating today on the Internet.
• Even though HTML was never supposed to be a
  presentational language, it grew to become one.

CSS Tutorial              tMyn                           5
• Unfortunately, by the time CSS level 1 was made a
  full W3C recommendation in 1996, the seed had
  already been planted.
• Presentational HTML had already taken root in
  mainstream website design and continues today.
• However, all is not lost. Today, the most popular
  browsers have a working support for CSS.

CSS Tutorial             tMyn                         6
    CSS have the following advantages:

    1. The presentation of an entire website can be
    centralized to one or a handful of documents,
    enabling the look and feel of a website to be updated
    at a moment’s notice. In legacy HTML documents,
    the presentation was limited only to the document.
    CSS brings a much needed feature to HTML: the
    separation of a document’s structure from its
    2. Users of a website can compose style sheets of
    their own, a feature which makes websites more
    accessible. For example, a user can compose a high-
    contrast style sheet that makes content easier to
CSS Tutorial               tMyn                         7
    3. Browsers are beginning to support multiple style
    sheets, a feature which allows more than one design
    of a website to be presented at the same time. The
    user can simply select the look and feel that they like
    4. Style sheets allow content to be optimized for more
    than one type of device. By using the same HTML
    document, different versions of a website can be
    presented for handheld devices such as PDAs and
    cell phones or for printing.
    5. Style sheets download much more quickly
    because web documents using CSS take up less
    hard disk space.

CSS Tutorial                tMyn                          8
• Web pages can use styles in three different ways:
• Inline style: An inline style is a style that is placed
  directly inside an HTML tag. This can get messy, but
  it’s a reasonable approach for one-time formatting.
  You can remove the style and put it in a style sheet
• Internal style sheet: An internal style sheet is a
  collection of styles that are placed in the <head>
  section of your web page markup. You can then use
  the styles from this style sheet to format the web
  controls on that page. By using internal style sheet,
  you get a clear separation between formatting (your
  styles) and your content (the rest of your HTML

CSS Tutorial               tMyn                             9
  markup). You can also reuse the same style for
  multiple elements.
• External style sheet: An external style sheet is similar
  to an internal style sheet, except it is placed in a
  completely separate file. This is the most powerful
  approach, because it gives you a way to apply the
  same style rules to many pages.

CSS Tutorial               tMyn                         10
• The following is an example of a CSS rule:

    h1{font-family: Arial, sans-serif;}

• Like HTML, CSS can use white space and line
  breaks for purposes of readability. The interpreter
  reading the CSS does not care how much white
  space appears in the style sheet.
• h1 in the example above refers to the <h1> tag in
  HTML document and is what is known as the
  selector, or more specifically type selector (there are
  several types of selectors defined).

CSS Tutorial               tMyn                         11
• The selector is followed by a curly-brace-delimited list
  of one or more semicolon-separated declarations.
• A declaration is a property followed by a colon,
  followed by a value.
• Each declaration formats the element or elements
  specified in the selector list for presentation to web

CSS Tutorial               tMyn                         12
CSS rule:

  selector                declaration

   h1{font-family: Arial, sans-serif;}

               property                 value

CSS Tutorial                   tMyn             13
• Put simply, the selector tells the browser where and
  what to format.
• A selector may be user-specified via the class=“”
  or id=“” attributes, or it may simply be the HTML
  tag name itself.
• CSS also supports more complex selectors that
  function based on the context in which the target
  element appears in the document.
• Grouping selectors and declarations:

    p, h1, h2, h3, h4, h5 {font-family:
    Arial; color: black;}

CSS Tutorial              tMyn                           14
• Does this look better?:

    p, h1, h2, h3, h4, h5
       font-family: Arial;
       color: black;
• Declarations may also be grouped:
    body {font-family: Arial;}
    body {font-size: 10pt;}
    body {color: black;}

CSS Tutorial                tMyn      15
• The above is identical to this:

       font-family: Arial;
       font-size: 10pt;
       color: black;

CSS Tutorial               tMyn     16
• A keyword value is used to invoke some special
  functionality. For example, red, green, and blue
  are CSS keywords:

    table {background-color: red;}

CSS Tutorial             tMyn                        17
• Two kinds of lengths are used in CSS: relative and
• Absolute lengths are not dependent on any other
• Relative lengths, on the other hand, depend on the
  environment in which they are used, such as the
  computer monitor’s screen resolution or the size of a
• Absolute length units are for example cm, pt (point)
  and pc (pica).
• Relative length units are for example em (length
  relevant to the nearest font-size) and px (pixel).

CSS Tutorial              tMyn                        18
• Colors are defined using a hexadecimal (hex)
  notation for the combination of Red, Green, and Blue
  color values (RGB).
• The lowest value that can be given to one of the light
  sources is 0 (hex 00). The highest value is 255 (hex
• Hex values are written as 3 double digit numbers,
  starting with a # sign, for example black #000000 (or
  rgb(0, 0, 0)) and white #FFFFFF (or rgb(255, 255,

    div {color: #000000;}
    div {color: rgb(0,0,0);}
CSS Tutorial              tMyn                         19
• The universal selector tells the CSS interpreter to
  apply the CSS rule to the entire document:

    * {font-family: Arial;}

• Descendant selectors (contextual selectors) apply
  style based on whether one element is a descendant
  of another:

    div h1 {color: red;}

CSS Tutorial               tMyn                         20
• The above example applies a color of red to <h1>
  elements, but only if somewhere in the document
  hierarchy the <h1> element appears inside a <div>

CSS Tutorial            tMyn                      21
  Class and ID selectors
• The class attribute is more generic, meaning it may
  encompass many elements in a given document,
  even elements of different types and purposes.
• On the other hand, you can only use the id attribute
  once per page. The name id tells that the id must be
• The following is an example of a class selector:

    .someclass {color: red;}

• Notice the dot before the class name.

CSS Tutorial              tMyn                       22
• In the document body, you reference the class like

    <div class=“someclass”>
       Some text here…

CSS Tutorial              tMyn                         23
• To reference an id, you precede the selector syntax
  with a hash mark, id selector:

    #someid {color: black;}

• Any element in the document body may contain the

    <div id=“someid”>
       Some text here…

CSS Tutorial             tMyn                        24
• You can make both class and id selectors more
  specific by appending the name of the element to the
  beginning of the selector. For instance, if in the last
  examples you only want <div> elements for each
  rule, the selectors look like the following:

    div.someclass {color: red;}
    div#someid {color: black;}

• Now each rule is applied only to <div> elements that
  contain the corresponding class and id names.

CSS Tutorial               tMyn                         25
• Pseudo-classes are used to represent dynamic
  events, a change in state, or a more general
  condition present in the document that is not easily
  accomplished through other means.
• This may be the user’s mouse rolling over or clicking
  on an element.
• Pseudo-classes contain a single colon before the
  pseudo-class property.

CSS Tutorial              tMyn                        26
    Dynamic pseudo-classes are for example:

  :link: signifies unvisited hyperlinks
  :visited: indicates visited hyperlinks
  :hover: signifies an element that currently has the
  user’s mouse pointer hovering over it
  :active: signifies an element on which the user is
  currently clicking
• The order is important (as applied to links):
  LoVeHAte, or :link, :visited, :hover, :active.

CSS Tutorial              tMyn                          27
• One implementation could be:

    boby{background: #ffffee; color:
    a:link{color: #003366; background:
    a:visited{color: #660099; background:
    a:link:hover, a:visited:hover{color:
    #cc3333; background: transparent;}
    a:active{color: #ff0000; background:

CSS Tutorial            tMyn                28
• Next example deals with external style sheet.
• External style sheet are included in a document from
  within HTML by use of the <link> element:

    <link rel=“stylesheet”

• The following attributes are required to use the
  <link> element for linking to a CSS document:

CSS Tutorial              tMyn                       29
• rel=“”: Defines the relation between the external
  document and the calling document. In this case, the
  relation is that the external document is the style
  sheet for the calling document.
• href=“”: Like the anchor tag, <a>, href stands for
  hyperlink reference. It accepts an absolute or relative
  path to the style sheet document.
• type=“”: Refers to the MIME (Multipurpose Internet
  Mail Extensions) type of the external file.

CSS Tutorial               tMyn                         30
CSS Tutorial   tMyn   31
CSS Tutorial   tMyn   32
CSS Tutorial   tMyn   33
CSS Tutorial   tMyn   34
CSS Tutorial   tMyn   35
CSS Tutorial   tMyn   36
• The validation service by the World Wide Web
  Consortium (W3C) allows Internet users to check
  CSS documents for conformance to CSS
• Let us validate the file quantum2.css:


CSS Tutorial                 tMyn                   37
CSS Tutorial   tMyn   38
CSS Tutorial   tMyn   39
CSS Tutorial   tMyn   40
• Next example deals with internal style sheet.
• An internal style sheet should be used when a single
  document has a unique style. You define internal
  styles in the head section by using the <style> tag,
  like this:

       <style type="text/css">
           hr {color:sienna;}
           p {margin-left:20px;}
           body {background-

CSS Tutorial             tMyn                        41
• First there is no internal style sheet :

CSS Tutorial                tMyn             42
CSS Tutorial   tMyn   43
CSS Tutorial   tMyn   44
CSS Tutorial   tMyn   45
CSS Tutorial   tMyn   46
• Minor modification, internal style sheet included:

CSS Tutorial               tMyn                        47
CSS Tutorial   tMyn   48
CSS Tutorial   tMyn   49
CSS Tutorial   tMyn   50
CSS Tutorial   tMyn   51
CSS Tutorial   tMyn   52
CSS Tutorial   tMyn   53
• The third alternative is inline style.
• An inline style loses many of the advantages of style
  sheets by mixing content with presentation. Use this
  method sparingly, such as when a style is to be
  applied to a single occurrence of an element.
• To use inline styles you use the style attribute in the
  relevant tag. The style attribute can contain any CSS
  property. The example shows how to change the
  color and the left margin of a paragraph:

    <p style="color:sienna;margin-
    left:20px">This is a paragraph.</p>

CSS Tutorial               tMyn                         54
• First there is no inline style:

CSS Tutorial                 tMyn   55
CSS Tutorial   tMyn   56
CSS Tutorial   tMyn   57
CSS Tutorial   tMyn   58
CSS Tutorial   tMyn   59
• Minor modification, inline style included to one

CSS Tutorial               tMyn                      60
CSS Tutorial   tMyn   61
CSS Tutorial   tMyn   62
CSS Tutorial   tMyn   63
CSS Tutorial   tMyn   64

To top