History

  • CSS was first proposed by Hakon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN.
  • CSS3 is the latest version of CSS.

Introduction

  • CSS stands for Cascading Style Sheets.
  • CSS uses editor application such as notepad to write its code and any web browser to run it.
  • CSS is normally written with html codes but only CSS codes can also be written and is saved as .css extension.

Definition

  • CSS is a web language that implements the various style of an HTML document.
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

Syntax

selector/s  {  Declaration/s  }
selector/s  {  Property:value ; Property:value;    . . .     n times  }

Structure

  • A CSS is consists of two parts – a selector and a declaration block.

CSS selector

  • The selector is HTML elements/tags where css/style is being applied in the web page.
  • The declaration part may contain one or more declarations and each is separated by semicolons symbols.
  • The declaration has two components – Property and Value i.e. each declaration includes a css property name and related value, separated by a colon.
  • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Features

  • CSS controls the layout of multiple web pages at a time.
  • CSS is used to define styles for the web pages, such as the design, layout, animations and variations in display for different devices and screen sizes.
  • CSS is used to controls 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, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.
  • Cascading Style Sheet(CSS) is used to set various desired styles in web pages.
  • CSS works with html elements.

Advantage

  • CSS makes web pages attractive and effective.
  • CSS is easier to maintain and update.
  • CSS provides greater consistency in web page design.
  • It has unlimited formatting/designing options.
  • It is lightweight code.
  • It is faster to download.
  • It provides ease of presenting different styles to different viewers.
  • It shows greater accessibility.
  • CSS saves a lot of work time of the developer.

Disadvantage

  • CSS does not make any arithmetic calculation.
  • It is mainly used in web page designing work.
  • Its output varies browser by browser.

Types of CSS

  • Precedence order of CSS = inline css > internal css > external css > browser default.
  • There are 3 types of CSS –

(A) Inline CSS (B) Internal/Embedded/Document Level CSS (C) External CSS

(A) Inline CSS :-
    • This css code is written with html tags/element individually with style tag.
    • Suitable for single html tag/element.
    • Examples are –  
 <!DOCTYPE html>
 <html>
   <body>                             
       <h1 style="color:red">Inline CSS</h1>
       <h2 style="color:red">First type of CSS</h2>                                                        <p style="background-color:green">Codershelpline.com</p>                     
   </body>       
 </html>
(B) Internal/Embedded/Document Level CSS :-
    • This css code is normally written inside head tags/element of html with style tag.
    • Suitable for single html page.
    • Examples are –                
<!DOCTYPE html>
<html>
   <head>
       <style>
                  p {
                       color: black;
                       font-size:20px;
                    }
              h1,h2 {
                       color: Blue;
                       font-family:arial;
                    }
              p,h2  {
                       background-color:Blue;                       
                    }
       </style>
   </head>

   <body>
       <h1>Internal CSS</h1>
       <h2>Second type of CSS</h2>
       <p>Codershelpline.com</p>
   </body>
</html>

(C) External CSS :-

    • This css code is written outside the html page in any text editor software with .css extension name.
    • Suitable for multiple html page.
    • External stylesheets are stored in CSS files.
    • It is normally called/used with link tag of html in the head section of html page.
    • Examples are –      
 body {
        background-color:red;
      }
    p {
        color:black;
        font-size:20px;
      }
h1,h2 {
        color:Blue;
        font-family:arial;
      }
 
NB: The above code is written in any text editor and save as say chl.css.This code does not contains any html tags or elements.This file is normally saved in html file/page folder where it is used.


<!DOCTYPE html>
<html>
     <head>
          <link rel="stylesheet" type="text/css" href="chl.css">
     </head>
     <body>
          <h1>External CSS</h1>
          <h2>Third type of CSS</h2>
          <p>Codershelpline.com</p>
     </body>
</html>

CSS Selector

  • Css Selector is a pattern which can apply to different html elements/tags as per need of the program of an html page.
  • By using the selector, we can select the html elements in several ways –           

           (a) Simple/Elemental Selector (b) Multiple/Group Selector (c) Id Selector (d) Class             

                 Selector

      (a) Simple/Elemental Selector :

            – Applied for a single html tab/element at a time.

            – Examples are    

<!DOCTYPE html>
<html>
   <head>
      <style>
                p{
                  color: black;
                  font-size:20px;
                 }
               h1{
                  color: Blue;
                  font-family:arial;
                 }
              h2{
                 background-color:Blue;
                }
       </style>

   </head>
   <body>
        <h1>Simple Selector</h1>
        <h2>Elemental Selector</h2>
        <p>Codershelpline.com</p>
   </body>
</html>

(b) Multiple/Group Selector :

– Applied for a more than one html tab/element at a time. The html element/tag may be same    or different. 

Examples are 

<!DOCTYPE html>
<html>
   <head>
      <style>
             h1,h2,h3{
                      color: black;
                      font-size:20px;
                     }
                 p,h4{
                       color: Blue;
                       font-family:arial;
                     }              
      </style>

   </head>
   <body>
        <h1>Multiple Selector</h1>
        <h2>Second type of CSS Selector</h2>
        <h3>Unique type of CSS Selector</h3>
        <p>Codershelpline.com</p>
        <h4>Group Selector</h4>
   </body>
</html>

(c) Id Selector :

      – It uses the id attribute of an any HTML element to select a specific element.

      – The id of an element should be specific or unique in a page so this id selector is used to              select only one unique html element.We can’t put same id for more than one similar or                dissimilar html element.

      – Id attribute is defined with hash(#) character.

      – Id selector is similar to class selector.The difference is that an Id selector can be used to            identify one html element, whereas a class selector can be used to identify more than one          html element.

      – syntax : #IdSelectorName{

                                                            Property 1:Value 1;

                                                            Property 2:Value 2;

                                                            Property n:Value n;

                                                        }

      –  Examples are

<!DOCTYPE html>
  <html>
       <head>
           <style>
                       #chl{
                              font-family:arial;
                              color: red;
                           }
           </style>
       </head>

    <body>
       <h3>Welcome U All to My Website</h3>       
       <p id="chl">codershelpline.com</p>
       <p id="spl">Id Selector</p>
       <p>An Unique Style Specification Method</p>
    </body>
 </html>

 (d) Class Selector :

  • It uses the class attribute for any HTML element to style that.
  • The class of an element may be specific/unique  or similar in a html page to select one or  more similar html element. Thus, we can put unique class name or same class for more      than one similar or dissimilar html element as per program need.
  • Class selector is used to apply same style specifications to the content of one or more than one kind of similar or dissimilar html elements.
  • Class attribute is defined with dot(.) character.
  • Syntax :

ClassSelectorName{

                                                            Property 1:Value 1;

                                                            Property 2:Value 2;

                                                            Property n:Value n;

                                                        }

  • Examples are
<!DOCTYPE html>
  <html>
       <head>
           <style>
                       .chl{
                              font-family:arial;
                              color: red;
                           }
                       .uc{
                              text-transform:uppercase;
                              font-weight:bold;
                           }
           </style>
       </head>

       <body>
          <h3 class="uc">Welcome U All to My Website</h3>       
          <p class="chl">codershelpline.com</p>
          <p class="spl">Class Selector</p>
          <p>A general Style Specification Method</p>
       </body>
 </html>

<! ---------------------------------------------------------------------- >

<!DOCTYPE html>
  <html>
       <head>
           <style>
                       .chl{
                              font-family:arial;
                              color: red;
                           }
                       .uc{
                              text-transform:uppercase;
                              font-weight:bold;
                           }
           </style>
       </head>

       <body>
          <h3 class="uc">Welcome U All to My Website</h3>       
          <p class="chl">codershelpline.com</p>
          <p class="chl">Class Selector</p>
          <p>A general Style Specification Method</p>
       </body>
 </html>

<! ---------------------------------------------------------------------- >

<!DOCTYPE html>
  <html>
       <head>
           <style>
                       p.chl{
                              font-family:arial;
                              color: red;
                           }
                       .uc{
                              text-transform:uppercase;
                              font-weight:bold;
                           }
           </style>
       </head>

       <body>
          <h3 class="uc">Welcome U All to My Website</h3>       
          <p class="chl">codershelpline.com</p>
          <p class="chl">Class Selector</p>
          <p>A general Style Specification Method</p>
       </body>
 </html>

<! ---------------------------------------------------------------------  >

<!DOCTYPE html>
<html>
   <head>      
      <style>
         .use{
                color:green;
                background-color:purple;
             }
      </style>
   </head>

   <body>
       <h1>Welcome All of You</h1>
       <div class="use">
           <h3>Codershelpline.com<h3>
           <p>It is your own site</p>
           <p>Example of class selector</p>
       </div>
       <p>A general type of style specifications</p>
   </body>
</html>

 1,385 total views,  1 views today

Categories: CSS

2 Comments

Suraj Sojas · April 9, 2020 at 10:22 AM

please upload advance css selector

and advance css topics

    Sweta · April 9, 2020 at 3:54 PM

    Ok

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.