CSS

CSS stands for Cascading Style Sheets
It will apply styles of HTML pages
CSS can load faster than HTML
We can save lot of html code when using external CSS
CSS we can implemented in three types

Inline CSS

CSS acts like a html attributes and apply properties it can apply only one element at a time
Inline CSS also called as single line CSS
<html>
    <head>
                <title> First Page</title>
    </head>
    <body>
             <h1 style='color:red;font-style:italic;'>Welcome to Home Page</h1>
                                <h1>Welcome to Home Page</h1>
                                <h1>Welcome to Home Page</h1>
                                <h1>Welcome to Home Page</h1>
                                <h1>Welcome to Home Page</h1>
    </body>
</html>

Internal CSS

Implement the CSS in style tag embedded in head this CSS will effect web page.
<html>
    <head>
                                <style>
                                                h1{
                                                                color:blue;
                                                                font-weight:lighter;
                                                }             
                                </style>
    </head>
    <body>
                                <h1>Welcome to Home Page</h1>
                                <h1>Welcome to Home Page</h1>
                                <h1>Welcome to Home Page</h1>
                                <h1>Welcome to Home Page</h1>
    </body>
</html>

External CSS

Implement the CSS in a web page and must store the web page with .CSS in to web page
<html>
    <head>
                                <title> Lamp </title>
                                <link href='1.jpg' rel='icon'/>
                                <link href='external.css' type='text/css' rel='stylesheet'>
                                <style>
                                                h1{
                                                                color:blue;
                                                                font-weight:lighter;
                                                }             
                                </style>
    </head>
    <body>
                                <h1>Welcome to Home Page</h1>
                                <h1>Welcome to Home Page</h1>
                                <h1>Welcome to Home Page</h1>
                                <h1>Welcome to Home Page</h1>
    </body>

</html>

No comments:

Post a Comment