CSS

Cascading Style Sheet (CSS) style sheet language used to format the layout of web pages. Style defines how to display HTML elements.CSS helps web developers create uniform look across several page of a web sites. Once style sheet is defined in CSS it can be used by any page that references the CSS files.

         

Box Model

The boxes that are formed around elements of content in WebPages. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

Margin: An area around the border. The margin does not have a background color, it is completely transparent.

Border: A border that goes around the padding and content. The border is inherited from the color property of the box.

Padding: An area around the content. The padding is affected by the background color of the box.

Content: The content of the box, where text and images appear.

Basic Syntax

  A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

Selectors

Selectors are the names that you give to your different styles.

     HTML Selectors:

A selector in which using html tags is called HTML selectors

      body {

        font-size: 14px;

        color: navy;

      }

 Class selectors: 

   Used to define styles that can be used without redefining plain HTML                         tags.

      .body1 {

        font-size: 14px;

        color: navy;

      }

ID selectors: 

Used to define styles relating to objects with a unique ID

      #body {

        font-size: 14px;

        color: navy;

      }

Universal Selectors:

  The universal selector can be used to represent any element at all, and is specified using an asterisk (*). 

* {

      Padding: 0px;

      }

Declaration block

A declaration block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value.

Example:

 Color: red;

Versions of CSS

CSS1

The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996.CSS1 is a simple style sheet mechanism that allows authors and readers to attach style to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology.

CSS2

CSS level 2 specification was developed by the W3C and published as a recommendation in May 1998. CSS 2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements and z-index, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. The W3C no longer maintains the CSS 2 recommendation.

CSS2.1

First became a Candidate Recommendation on February 25, 2004, but it was reverted to a Working Draft on June 13, 2005.  Finally published on 7 June 2011. It supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, Braille devices, handheld devices, etc. It also supports content positioning, table layout, features for internationalization and some properties related to user interface.

CSS3

CSS3 is the latest standard for CSS. CSS3 is completely backwards-compatible with earlier versions of CSS. CSS3 has been split into "modules". In addition, new modules are added.

• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout

User Interface

Insertion of CSS

 Three Ways to Insert CSS

 External style sheet

   An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

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 of an HTML page, by using the

Inline style

An inline style loses many of the advantages of style sheets by mixing content with presentation. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

This is a paragraph.

Browser Support

    

A  CSS filter is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3Cstandards. Using CSS filters, some designers have gone as far as delivering different CSS to certain browsers to ensure designs render as expected. Internet Explorer support for CSS began with IE 3.0 and increased progressively with each version. By 2008, the first Beta of Internet Explorer 8 offered support for CSS 2.1 in its best web standards mode. Even when the availability of CSS-capable browsers made CSS a viable technology, the adoption of CSS was still held back by designers' struggles with browsers' incorrect CSS implementation and patchy CSS support.

Limitations

Selectors are unable to ascend

CSS currently offers no way to select a parent or ancestor of an element that satisfies certain criteria. The major reasons for the CSS Working Group previously rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.

Vertical control limitations 

While horizontal placement of elements is generally easy to control, vertical placement is frequently unintuitive, convoluted, or outright impossible. 

Absence of expressions 

There is currently no ability to specify property values as simple expressions (such as margin-left: 10% – 3em + 4px ;). 

Cannot explicitly declare new scope independently of position 

Scoping rules for properties such as z-index look for the closest parent element with a position: absolute or position: relative attribute. This odd coupling has undesired effects. 

Pseudo-class dynamic behavior not controllable 

CSS implements pseudo-classes that allow a degree of user feedback by conditional application of alternate styles

Browser compatibility

Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features are supported and some aren't

Advantages

Accessibility

Without CSS, web designers must typically lay out their pages with techniques such as HTML tables that hinder accessibility for vision-impaired users

Compatible

CSS is combined with HTML or XHTML by web developers for web application development because it is compatible with all web browsers. 

    Low Bandwidth

CSS style sheets are preferred by web developers for website development because they are lighter than table layouts, which consumes lots of bandwidth

    Site-wide consistency

Web developers need not to worry about the change in characteristics of the elements because they can be easily altered at any stage of web development by using CSS.

     Appearance      

  

CSS makes it easy to improve the appearance of a website by allowing you to create a much more stylish website 

 Best Regards,

Endasys Spoke Man

Kallettumkara, Trichur Dist,

Kerala, India 680 683

Email- info@endasys.com 

Website- www.endasys.com