Search The Website

Content:

CSS, CSS Examples, and Useful Links.

CSS Tutorial

CSS: A cascading style sheet (CSS) is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict. The Cascading Style Sheet, level 1 (CSS1) recommendation from the World Wide Web Consortium (W3C), which is implemented in the latest versions of the Netscape and Microsoft Web browsers, specifies the possible style sheets or statements that may determine how a given element is presented in a Web page. CSS gives more control over the appearance of a Web page to the page creator than to the browser designer or the viewer. With CSS, the sources of style definition for a given document element are in this order of precedence:
The STYLE attribute on an individual element tag. The STYLE element that defines a specific style sheet containing style declarations or a LINK element that links to a separate document containing the STYLE element. In a Web page, the STYLE element is placed between the TITLE statement and the BODY statement. An imported style sheet, using the CSS @import notation to automatically import and merge an external style sheet with the current style sheet
Style attributes specified by the viewer to the browser. The default style sheet assumed by the browser In general, the Web page creator's style sheet takes precedence, but it's recommended that browsers provide ways for the viewer to override the style attributes in some respects. Since it's likely that different browsers will choose to implement CSS1 somewhat differently, the Web page creator must test the page with different browsers.

What Browsers Support Media Queries? : IE9+, Safari 4+, Google Chrome 21+, Opera 9+, Firefox 3.5+, and others. The numbers above specifies the first browser version that fully supports the @media rule.

CSS Examples

You may learn CSS by examples: CCS3 School

Example 1: Change the background-colour if the document is smaller than 640 pixels wide <head>
<style>
body {
            background-color: lightgreen;
          }
@media screen and (max-width: 640px) {
        body {
                 background-color: lightblue;
        }
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is less than 640 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>

Resize the browser window. When the width of this document is less than 640 pixels, the background-color is "lightblue", otherwise it is "lightgreen".

Example 2: The visibility property specifies whether or not an element is visible.:

<head>
<style>
div {
      background-color: red;
       opacity: 0.5;
      }
</style>
</head>
<body>
<div>This element's opacity is 0.5! Note that both the text and the background-color are affected by the opacity level!</div>
</body>

Resize the browser window. When the width of this document is less than 640 pixels, the background-color is "red" and opacity is "0.5", otherwise it is "lightred" and opacity is "1.0".

Example 3: Set the opacity level for a <div> element:

<head>
<style>
        .visible {
         visibility: visible;
         background-color: blue;
         }

      @media screen and (max-width: 640px) {
           .visible {
           visibility: hidden;
      }
}
</style>
</head>
<body>
<div class="visible">
<p>Resize the browser window. When the width of this document is less than 640 pixels, This is a "visible" heading, otherwise is an "invisible" heading. Notice that the invisible heading still takes up space.</p>
</div>
</body>

Resize the browser window. When the width of this document is less than 640 pixels, This is a "visible" heading, otherwise is an "invisible" heading. Notice that the invisible heading still takes up space.

More Examples: (view HTML/CCS source code of the following examples to to learn more about CSS).

1. Pull Down Page Taps

2. Pages with H&V Sliders

3. CSS Containers

4. Header Footer and data container

5. Images Containers

Useful Links

CSS

Coding Help

Development Tools

Collection of some of the most useful web development resources

Here you will find carefully picked links to thebest tutorials, most useful references and official specifications of the most important web programming languages.

Browse

Home About Research Publication Contact