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> …
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: .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 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 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 …
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 …
<!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 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>
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 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 ; …