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

Introduction of Computer

.  A computer is an electronic device. It take input and store the data in memory and performing the function to produce accurate result in output device. It is used to type document, send email, play game, browse the web and entertainment.   Characteristics of computer  1 . High speed  Computer is very fast device. It is capable of performing calculation of very large amount of data. The computer has unit of speed in microsecond, nanosecond and even in picosecond. The computer is capable of performing millions of tasks per second. 2. Accuracy  The computer produces highly accurate and reliable result.  It does not make any kind of mistake in calculating. The calculation are 100% error free. The computers perform accurate 'n' number of times. 3. Storage capability A computer has much more storage capability. It can store large amount of data. It can store any type of data such as image, video, text document, audio and many more. 4. Diligence Diligence ...
1 comment
Read more

Introduce Linux, UNIX and Linux distribution.

 . Linux Linux is an open source operating system. The term Linux is actually referred to mean a kernel of Unix like operating system developed by a Finish software architect Linus Torvald. The name Linux is derived from Linus' Unix. Linux was originated from the inspiration of a small Unix like operating system MINIX by A.S Tanenbum. Linux is a complete multiuser, multiprocessing, secure and stable operating system which is also considered as UNIX clone. However no code from the proprietary from AT and T is included in Unix. It has flavor of Unix but is not Unix. UNIX  UNIX is a layered operating system. The innermost layer is the hardware that provides the service for the OS. The operating system, referred to in UNIX as the kernel, interacts directly with the hardware and provides the services to the user program. These user programs don't need to know anything about the hardware. They just need to know how to interact with the kernel and it's up to the kernel to provide ...
Post a Comment
Read more

Create file and folders with file explorer

 . Here's how you can create files and folders using File Explorer on Windows: Open File Explorer by pressing the Windows key + E on your on Windows: Navigate to the location where you want to create the folder or file. To create a folder, right-click on an empty space in the location, select "New" and then select "Folder". Alternatively, you can click the "New folder" button on the ribbon at the top of the window. give your folder a name and press Enter. To create a file, right-click on an empty space in the location, select "New" and then select the type of file you want to create, such as "Text Document" or "Word Document". Alternatively, you can click the "New item" button on the ribbon at the top of the windows and select the type of file you want to create. Give your file a name and press Enter. Double-click on the folder or file to open it and start adding content. That's it! you can now create as many...
Post a Comment
Read more