CSS Introduction


Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.


Advantages of CSS

CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.

Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times.

Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes.

Multiple Device Compatibility - 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.

Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.


Including the colors and size of fonts, the width and colors of line and the amount of space between items on the page.

The cascading style sheets works by allowing to associate rules with the elements tha appear in a web page.

The selector ,which indicate which element or elements the declararion applies to more than one element.

The declarartion ,which set out how the element refered to in the selector should be styled.

  • A property , which is the property of the selected element.
  • A value ,which is specification for this property.

Type of Style Sheet

  1. External Style Sheet

    The CSS rules in a separate file knwon as an External style sheet.With the help of element.

    The element is used in web pages to describe the relationship between two document.

    The element is always an empty element , and when used with style sheets it must carry three attribute

    Syntax

    <link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />

    Example External Style Sheet

      <html> 
         <head>  
           <link rel=”stylesheet” type=”text/css” href=“./../css/css/header.css” />
         </head>  
         <body >
         Welcome to CSS Tutorial     
          </body>  
      </html>
    • type: The type attribute specifies the MIME type of the document being linked to;the MIME type is text/css.
      type=”text/css” 
    • rel: The rel attribute is requried and specifies the relationship between the document containing the link and the document being linked to.The key value for wroking with stylesheet.
      rel=”stylesheet”
    • href: The href attribute specifies the URL for the document being linked to.
       href=“./../css/css/header.css”

  2. Internal Style Sheet: The style sheet rules are held inside a <style> element in the head of the document, they are referred to as an internal style sheet.

    Example Internal Style Sheet

    <html>
         <head>
            <style type="text/css">
            body{
            background-color:#999;
            }
            
            p{
            color:#fff;
            background-color:#777;
            font-size:30px;
            }
            </style>
            </head>
            <body>
            <p>Welcome to CSS Tutorial</p>
         </body>
        </html>

Advantages of External CSS style Sheets

1.Its saves you repwating the same style in each page.

2.The appearance of several pages by altering just the style sheet rather than each individual page. This means it is easier to update your site if you want to..

3.Once a visitor to your site has downloaded the CSS style with the first pages of your site that uses it.

4.The style sheet can act as a style template to help different author achieve the same style of document without learning all of the individual style settings.


Share this article on