Skip to main content

Introduce Cascading Style Sheet (CSS)

 .

Cascading Style Sheet (CSS)

A cascading style sheet is a separate HTML file that keeps track of design and format information such as the colors, fonts, font sizes and margins you use in your help files or Web pages. It describe how html element are to be display on screen, paper or in other media. CSS save a lot of works. It can control the layout of multiple web pages all at once.

Types of CSS
  • Inline CSS
  • Internal or embedded CSS
  • External CSS

Inline CSS

Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an html tag using style attribute. 

Example :
<!DOCTYPE html>
    <html>
        <head>
            <title> Inline CSS </title>
        </head>
            <body>
                <p style = "color:#009900;
                    font-size: 50px;
                    font-style: italic;
                    Text-align: center; ">
                        Hello Guys </p>
            </body>
    </html>


Internal or Embedded CSS

   This can be used when a single html document must be styled uniquely. The CSS rule set should be with in the html file in the head section i.e. the CSS is embedded with in the html file. 

Example :
<!doctype html>
    <html>
        <head>
            <title> Internal CSS </title>
            <style>
              .main{
                Text-align : Center ;
                    }
              .afp{
                color : #FF0000 ;
                font-size : 50px ;
                font-weight : bold ;
                    }
             .cls{
                font-style : italic ;
                font-size : 20px ;
                    }
            </style>
        </head>
            <body>
                <div class = "main">
                    <div class = "afp"> Hello World </div>
                        <div class = "cls"> This is my Webpage </div>
                </div>
            </body>
     </html>

External CSS

External CSS contain separate CSS file which contains only style property with the help of tag attribute (for example class, id, heading ...... etc). CSS property written in a separate file with CSS extension and should be link tag. This mean that for each element. Style can be set only once and that will be applied across webpages.

Example :
<!DOCTYPE html>
    <html>
        <head>
            <title> External CSS </title>
            <link rel="stylesheet" href="style.css">
         </head>
       <body>
                <div class = "main">
                    <div class = "file"> Hello World </div>
                        <div class = "cls"> This is my Webpage </div>
                </div>
            </body>
     </html>

Now, again write code in CSS.

body{
    Background-color : blue ;
        }
.main{
    Text-align : center ;
        }
.file{
    color : red;
    font-size : 30px;
    font-weight : bold;
.cls{
    font-style : bold;
    font-size : 20px;
        }

       

Some properties of CSS

border-collapse : represent the border display 
border-spacing  : represent the thickness of the border
caption-side       : represents the place of the table caption
color                   : represent the color of the text
cursor                : represents the cursor to be displayed
direction            : represent the direction of the text
font                    : specifies all the font properties 
font-family        : represent the font family for the text
font-size             : represent the size of the font
font-style           : represent the horizontal alignment of a text
                


Comments

Post a Comment

Popular posts from this blog

Important questions of C programming (BCA)

 . What is the characteristics of a good program? Explain types of language processor. Explain any two system design tools. Explain Program Development Life Cycle. Define programing techniques. Different between top-down and button - up approach with suitable example. Difference between cohesion and coupling. Define identifiers, constants, variables and keywords. Explain datatypes. Explain different types of  datatypes available in C. Define operator. Explain its types with suitable example. Explain decision making statement. Explain its type with example. Difference between while, do while loop, for loop. Write a program to find the fibonacci  sequence. What is jumping statement. Explain its types with suitable example.    Write a program to display following:               *               **               ***         ...
Post a Comment
Read more

BCA Math II old question model solution

 . BCA Math II question model 2018: BCA Math II question model 2019: BCA Math II question model 2020:
Post a Comment
Read more

8085 Microprocessor and its Operation

 . The 8085 microprocessor is an 8 bit microprocessor designed by Intel and introduced in 1976. It is a widely used microprocessor in embedded systems and educational settings due to its simplicity and effectiveness. Here's an overview of its architecture and operation: Data Bus: 8-bit: It can handle 8 bits of data at a time, which means it processes 1 byte of data in a single operation. Address Bus: 16-bit: It can address up to  2 16 2 16  = 65,536 memory locations, which translates to 64KB of addressable memory. Registers: General Purpose Registers:  6 registers (B, C, D, E, H, L) which can be used individually or in pairs (BC, DE, HL) for 16-bit operations. Accumulator:  An 8-bit register (A) used for arithmetic and logic operations. Flag Register:  Contains flags that indicate the status of the processor (Zero, Carry, Sign, Parity, and Auxiliary Carry Flags). Program Counter (PC): 16-bit register that holds the address of the next instruction to be exec...
Post a Comment
Read more