CSS – Introduction

Introduction: We can apply styles to HTML elements in 3 ways Using Style Attribute: To apply different styles to different elements in single HTML document. <html>      <head>                  <title> Headings </title>      </head>      <body>                  <h1 style=”color:red”> Web Technologies </h1>                  <h2 style=”color:blue”> HTML </h2>                   <h2 style=”color:blue”> CSS </h2>                  <p style=”color:green”> CSS is used to apply styles </p>      </body></html> …

CSS – Introduction Read More »

CSS – Change Background Colors

Change the background colors by click on the buttons: <html>            <head>                        <script>                                    function blue()                                    {                                                document.body.style.backgroundColor=”blue”;                                    }                                    function green()                                    {                                                document.body.style.backgroundColor=”green”;                                    }                                    function red()                                    {                                                document.body.style.backgroundColor=”red”;                                    }                                    function yellow()                                    {                                                document.body.style.backgroundColor=”yellow”;                                    }                        </script>            </head>             <body>                        <button onclick=”blue()”> Blue </button>                        <button onclick=”green()”> Green </button>                        <button onclick=”red()”> Red </button>                        <button onclick=”yellow()”> Yellow </button>            </body></html>

CSS – Class Selector

CSS .class Selector: .class selector select elements with specific class attribute. CSS Borders: We can set borders to HTML elements using border-style attribute in CSS <html>            <head>                        <style>                                    p{                                                border-style : dotted ;                                    }                                                          </style>            </head>            <body>                        <p> No border </p>                        <p> A dotted border </p>                        <p> A dashed border </p>                        <p> A solid border …

CSS – Class Selector Read More »

CSS – ID Selector

CSS Class Selector v/s ID Selector: Class Id We can apply a class to various elements. We can only apply it to one specific element. Starts with “.” followed by the name of the class. Starts with “#” symbol followed by a unique id name. We can attach multiple class selectors to an element. We …

CSS – ID Selector Read More »

CSS – Universal and Grouping Selector

CSS Universal Selector: Selects All HTML elements on the page <!doctype html><html>            <head>                        <style>                                    *{                                                color : blue ;                                                text-align : center ;                                    }                        </style>            </head>            <body>                        <p> Paragraph1 </p>                        <p id=”p1″> Paragraph with ID p1 </p>                        <p> Paragraph2 </p>                        <p id=”p2″> Paragraph with ID p2 </p>            </body></html> CSS Grouping Selector: Selects all HTML elements …

CSS – Universal and Grouping Selector Read More »

HTML – DIV Tag with CSS

DIV tag in HTML: CSS Padding: It is used to create space around the HTML element content. <!doctype html><html>            <head>                        <style>                                    div {                                                padding : 70px ;                                                border : 1px solid blue ;                                    }                        </style>            </head>            <body>                        <h1> HTML Div – CSS Padding </h1>                        <div> This div element with padding </div>            </body></html> Note: border …

HTML – DIV Tag with CSS Read More »

CSS – Navigation Menu

<!doctype html><html>               <head>                              <style>                                             nav                                             {                                                            background-color: #333;                                                            padding: 10px;                                             }                                             ul                                             {                                                            list-style: none;                                                            margin: 0;                                                            padding: 0;                                             }                                             li                                             {                                                            display: inline-block;                                             }                                             a                                             {                                                            color: #fff;                                                            text-decoration: none;                                                            padding: 10px;                                             }                                             a:hover                                             {                                                            background-color: #555;                                             }                              </style>               </head>               <body>                              <nav>                                             <ul>                                                            <li><a href=”#”>Home</a></li>                                                            <li><a href=”#”>About Us</a></li>                                                            <li><a href=”#”>Services</a></li>                                                            <li><a href=”#”>Contact Us</a></li>                                             </ul>                              …

CSS – Navigation Menu Read More »

CSS – Backgrounds

CSS Backgrounds: used to apply Background colors and images Background-color: We apply background color to entire body hence we use <!doctype html><html>            <head>                        <style>                                    h1, h2, p{                                                color : red ;                                                text-align : center ;                                    }                                    body{                                                background-color : lightblue ;                                    }                        </style>            </head>            <body>                        <h1> Heading1 </h1>                        <p> Paragraph1 </p>                        <h2> Heading4 </h2>            </body></html>

CSS – Background Image

Background- image: By default, the image is applicable to entire page. url(): <!doctype html><html>            <head>                        <style>                                    h1, h2, p{                                                color : red ;                                                text-align : center ;                                    }                                    body{                                                background-image : url(“download.jpg”) ;                                    }                        </style>            </head>            <body>                        <h1> Heading1 </h1>                        <p> Paragraph1 </p>                        <h2> Heading4 </h2>            </body></html> Background-repeat: <!doctype html><html>            <head>                        <style>                                    h1, h2, p{                                                …

CSS – Background Image Read More »

CSS – Borders

CSS Borders: <!doctype html><html>            <head>                        <style>                                    p.one{                                                color : red ;                                                text-align : center ;                                                border-color : blue ;                                                border-style : solid ;                                    }                                    p.two{                                                color : blue ;                                                text-align : center ;                                                border-color : green ;                                                border-style : dotted ;                                    }                                    p.three{                                                color : green ;                                                text-align : center ;                                                border-color : red ;                                                …

CSS – Borders Read More »

Scroll to Top